Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed

Re:Show HN: I created snapDOM to capture DOM nodes as images... by streptomycin on Sunday April 27, 2025 @01:30PM (#43813611)

I've been using html2canvas for a long time in https://play.basketball-gm.com/ so I gave your library a try. It was much slower (I know your README has benchmarks saying the opposite so idk) and the result looked a lot worse.

html2canvas: https://i.imgur.com/zfSwNR1.png

snapdom: https://i.imgur.com/FxowTzp.png

Also I recommend putting the npm package name clearly in your README. I guess I don't really know what other people are doing these days, but I think most people are like me and consume packages like this from npm rather than a <script> tag.

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by tinchox6 on Sunday April 27, 2025 @01:44PM (#43813761)

Thank you for testing it out and sharing the screenshots!

I’ve run some performance tests using Vitest Bench, and SnapDOM was faster. I also created a few manual demos, and SnapDOM won in both speed and accuracy.

That said, I still need to run more real-world tests. So, thanks again for your help!

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by hirako2000 on Sunday April 27, 2025 @03:10PM (#43814341)

How can svg be faster, and especially more accurate (lets throw some IMG or CSS shadows for fun) than canvas?

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by kaoD on Sunday April 27, 2025 @03:41PM (#43814538)

You can embed HTML in an SVG via foreignObject. Seems like that's exactly what the library is doing[0].

Whether that's faster or more reliable, I don't know. Seems likely to render different depending on where you view the SVG (especially out of browsers).

[0]: https://github.com/search?q=repo%3Azumerlab%2Fsnapdom%20fore...

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by tinchox6 on Monday April 28, 2025 @03:49PM (#43825314)

I'm working on enabling a special full mode for those who don't mind the final size:

https://github.com/zumerlab/snapdom/issues/1

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by tinchox6 on Sunday April 27, 2025 @02:02PM (#43813883)

I added to README the npm / yarn reference. Thanks!

[ Parent | on HN ]

Re:Show HN: I created snapDOM to capture DOM nodes as images... by tinchox6 on Wednesday April 30, 2025 @09:10AM (#43844742)

If interested I solved almost all issues you pointed out (speedy and accuracy).

https://github.com/zumerlab/snapdom/issues/3

[ Parent | on HN ]