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

Summary

snapDOM snapDOM is a high-fidelity DOM capture tool, developed as part of the animation engine for Zumly — a framework for creating smooth zoom-based view transitions. It converts any HTML element into a scalable SVG image, preserving styles, fonts, backgrounds, shadow DOM content, pseudo-elements, and more. 📸 Full DOM capture 🎨 Embedded styles, pseudo-elements, and fonts 🖼️ Export to SVG, PNG, JPG, WebP, or canvas ⚡ Lightweight, no dependencies 📦 100% based on standard Web APIs Installation You can use snapDOM by including it via CDN, script tag, or by importing it as a module. CDN < script src =" https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js " > </ script > Script tag (local) < script src =" snapdom.js " > </ script > The global object snapdom will be available. ES Module import { snapdom } from './snapdom.mjs' ; Script Tag (Type Module) < script type = "module" > import { snapdom } from 'https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs'; </ script > Now you can call snapdom(el) , snapdom.toPng(el) , etc., directly in your JavaScript. Basic usage // Capture an element as SVG Data URL const svgDataUrl = await snapdom ( document . querySelector ( "#myElement" ) ) ; // Insert the captured image into the page const img = new Image ( ) ; img . src = svgDataUrl ; document . body . appendChild ( img ) ; API The main API is exposed as snapdom and offers multiple capture methods: Method Description Returns snapdom(el, scale?) Captures as SVG Data URL Promise<string> snapdom.toImg(el, scale?) Captures as HTMLImageElement (SVG) Promise<HTMLImageElement> snapdom.toCanvas(el, scale?) Captures as HTMLCanvasElement Promise<HTMLCanvasElement> snapdom.toPng(el, scale?) Captures as PNG image ( Image ) Promise<HTMLImageElement> snapdom.toJpg(el, scale?, quality?) Captures as JPG image ( Image ) Promise<HTMLImageElement> snapdom.toWebp(el, scale?, quality?) Captures as WebP image ( Image ) Promise<HTMLImageElement> snapdom.toBlob(el, scale?) Captures as SVG Blob...