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.
Ready to capture?
Try the browser demo, then use the API reference to choose your output.
Open the demo Install from npm