SnapDOM

A rendered element turned into PNG, SVG or canvas in the page

SnapDOM takes an element the browser has already painted, clones it with its computed styles, images and fonts, and exports the clone as PNG, JPG, WebP, SVG, canvas or Blob. Everything runs in the page, and the @zumer/snapdom npm package has no runtime dependencies. The result object holds on to the capture, so one snapshot can be exported in several formats even after the source element has changed.

Shadow roots, web fonts and pages taller than a canvas

• Open shadow roots, same-origin iframes with their own fonts, CSS counters in pseudo-elements and line-clamp all make it into the image.
• Since v3, the web fonts an element uses are embedded by default (embedFonts: 'auto'); system-font captures skip the step.
• A very long page comes out as one full-resolution PNG or JPEG through download() or toBlob(), rendered in windows rather than in one giant canvas. JPEG goes up to 65,535 px per side.
• An unchanged element reuses its first capture, and a local change rebuilds only the affected subtree.
• Official plugins, MIT-licensed like the core, add PDF with selectable text, editable SVG, HTML, GIF and video export, and JSON context for agents.

Invoices, Figma pastes and WebGL textures

• Let users download an invoice or a chart as PNG from the screen that shows it.
• Build a paginated PDF with working links from a page fragment, in the browser, with the pdf plugin.
• Put a component on the clipboard as a Figma payload with the vector plugin (HTTPS or localhost, triggered by a user action).
• Feed a Three.js texture from an HTML element, redrawn into the same canvas on every refresh.

Browser-only, and on its third major version since May 2025

A real browser is required, on the server too. SnapDOM needs a browser DOM, so a Node.js process has to drive a browser to use it, for instance Chromium launched through Playwright. There is no CommonJS build.

Cross-origin resources are left to the application. Images, fonts and stylesheets from another domain must be readable under CORS or go through a proxy (useProxy); a crossorigin attribute does nothing unless the server allows it. Cross-origin iframes become placeholders.

The default SVG output is meant for browsers. It wraps HTML in a <foreignObject>, which other SVG viewers render unevenly. Editable SVG for a design tool requires the vector plugin, which converts only the paint effects it supports.

fromString() runs whatever HTML it is given. Inline handlers such as <img onerror> execute in the caller's origin, and the README asks for untrusted HTML to go through DOMPurify or an equivalent first. In forms, the core masks password fields only; other visible values end up in the image unless the redact-inputs plugin removes them.

The speed figures come from the project, caveats included. SnapDOM measures itself against html2canvas, modern-screenshot, html-to-image and dom-to-image in its benchmark file. That file calls its tables measurements from v3 development rather than a speed guarantee, and says no release script reruns the benchmarks.

Three major versions have shipped since May 2025: 1.0.0 on 19 May 2025, 2.0.0 on 18 November 2025, 3.0.0 on 14 September 2026. The v3 migration removes preCache, drops support for burst and compress, and lets width override scale. Version 3.4.0 followed on 24 October 2026, the seventh release that month, and the 4.x plugins require core 3.3.0 or later.