SnapDOM Documentation

What is SnapDOM

SnapDOM is a browser capture engine for web interfaces. It captures a DOM subtree with its styles and assets into a reusable result. The core exports SVG, PNG, JPG, WebP, canvas and blobs, and reports capture geometry. Plugins add HTML, text or JSON context, annotated element maps and image-based PDFs from that state, or record new captures as GIF or video.

Documentation sections

Quick start

Capture any DOM element to PNG in one line:

import { snapdom } from '@zumer/snapdom';

const img = await snapdom.toPng(document.querySelector('#card'));
document.body.appendChild(img);

Reusable capture (one clone, multiple exports):

const result = await snapdom(document.querySelector('#card'));
await result.toPng();      // → HTMLImageElement
await result.toSvg();      // → SVG as Image
await result.download({ format: 'jpg', filename: 'card.jpg' });

Installation

NPM / Yarn

npm i @zumer/snapdom@latest
yarn add @zumer/snapdom@latest

CDN

<!-- Minified build -->
<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.js"></script>

<!-- Minified ES Module build -->
<script type="module">
  import { snapdom } from "https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs";
</script>

Build outputs

Variant	File	Use case
ESM (tree-shakeable)	dist/snapdom.mjs	Bundlers (Vite, webpack), `import`
IIFE (global)	dist/snapdom.js	Browser script tag; exposes `window.snapdom`. No CommonJS build.

Plugin registry import. The subpath shares the core runtime and registry:

import { registerPlugins } from '@zumer/snapdom/plugins';

Capture flow

A capture freezes the subtree; exports then read that captured state. The work is split into these steps:

Stage	What happens
Clone	Deep clone with styles, Shadow DOM, iframes. Leave nodes out with `exclude`.
Styles & Pseudo	Inline `::before`/`::after` as elements, resolve `counter()`/`counters()`.
Images & Backgrounds	Fetch and inline external images/backgrounds as data URLs.
Fonts	Embed the webfonts the capture uses by default. Render icon-font glyphs through the icon path.
SVG	Wrap clone in `<foreignObject>`, serialize to `data:image/svg+xml`.
Export	Return the SVG, rasterize to PNG/JPG/WebP/canvas, create a blob, or run a plugin export.

Plugins can use the clone without rendering by declaring needs: 'clone'. Image exports require 'render', the default. Hooks and custom outputs are covered in the plugins guide.

Usage patterns

Pattern	When to use
snapdom(el)	Reusable — one clone many exports (PNG + JPG + download).
snapdom.toPng(el)	Shortcut — single export, less code.

See the full API reference for every method and the options reference for everything you can pass.

Choose a recipe for your output

For a PNG preview, a downloaded file or a Blob to upload, use the HTML to PNG recipe. For a shareable report containing several charts, use the dashboard export recipe. Keep the rendered component in place while capturing; the library exports the DOM your users already see.

For framework state updates, the Angular guide waits for the next render, the Svelte guide waits for tick(), and the Lit guide selects a card inside its shadow root after updateComplete.

Ready to capture?

Try the browser demo, then use the API reference to choose your output.

Open the demo Install from npm