Speed
The live benchmark times first and repeat captures against html2canvas and the other libraries, sorted by measured time. Repeat captures of an unchanged element reuse the last result.
High-performance DOM engine · zero dependencies
Capture a DOM element. Export PNG, SVG or canvas.
Capture in the browser with styles, images and fonts. Plugins add PDF, editable vector, HTML and agent context, or record a live element as GIF or video. MIT licensed.
npm i @zumer/snapdom@latest
const image = await snapdom.toPng(document.querySelector('#card'))
1m+ downloads/month
MIT licensed
+
+
Capture
Prints come out here.
Press the shutter: the scene above is a live DOM, and the print is a real capture.
Projects using SnapDOM
Why SnapDOM.
Measure captures, inspect the output and read the implementation.
Fidelity
Inspect captures of text, shadows, fonts and embedded content in the live demos.
Flexibility
Capture once, export many formats. Official plugins add outputs, and the same hooks let you write your own.
Maintenance
Public releases, rendering fixes and migration notes are recorded in the changelog. MIT licensed.
Pick your output.
The core exports images. Each plugin card opens the plugin's page, with its options and a live demo to try.
Images & canvas
CoreSave a chart, dashboard or component as an image. Use canvas output as a WebGL texture.
PDF documents
PluginTurn a report or invoice into a PDF with selectable text, links, page breaks and optional form fields.
Vector artwork
PluginTurn captured text and shapes into editable SVG, or copy them to the clipboard for Figma.
HTML snapshots
PluginSave the rendered markup with its styles and resources. Reopen it without rebuilding your app.
GIF & video
PluginsRecord the live element and save the clip as a GIF, or as an MP4 or WebM video.
Live stream
PluginKeep a live element in a canvas that repaints only what changed. Use it as a WebGL texture or a video overlay.
Context for agents
PluginsGive an agent the captured text, form state and locations of interactive elements.
Prepare the capture
PluginsChange what the capture shows before it renders: hide field values, swap text, apply a filter or a tint, add a timestamp.
Tools built on SnapDOM.
Three separate projects that use SnapDOM captures for visual testing and for agents.
SnapDiff
Separate projectVisual regression testing in the browser. Compare captures against baselines, review the diff views and run the checks as a Vitest suite.
SnapEye
Separate projectCapture, compare and record a local app for coding agents, through a CLI and a page API.
SnapSurf
Web navigation and verification for agents: open a page, act on it and verify what changed.
New · Chrome extension
SnapStudio. Capture without code.
The official SnapDOM extension. Click any part of a page and save it as an image, a PDF, an editable SVG, a GIF or a video. Free, and nothing leaves your browser.
Live demos
Try the live demos.
Edit a sample and capture it with the published library, or try a plugin export.
Open the showcaseStart here.
Install the package, capture an element, then choose a recipe or read the reference.