SnapDOM captures a DOM subtree as a self-contained SVG, then exports it to PNG, JPG, WebP, Canvas, Blob, or a format supplied by a plugin. It runs in the browser and has no runtime dependencies.
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 (v2.x.x)
npm i @zumer/snapdom@2.x.x yarn add @zumer/snapdom@2.x.x
This archive uses the v2.x.x package range. For development builds and v3 installation, see the current documentation.
CDN (v2.x.x)
<!-- Minified build -->
<script src="https://unpkg.com/@zumer/snapdom@2.x.x/dist/snapdom.js"></script>
<!-- Minified ES Module build -->
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom@2.x.x/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 | Script tag, legacy require |
Subpath imports (lighter bundle if you only need one):
import { preCache } from '@zumer/snapdom/preCache';
Official plugins ship in their own package, @zumer/snapdom-plugins, importable from the root or per plugin:
import { filter } from '@zumer/snapdom-plugins/filter';
Capture flow
SnapDOM transforms your DOM element through these stages:
| Stage | What happens |
|---|---|
| Clone | Deep clone with styles, open Shadow DOM and same-origin iframe content. Exclude or filter nodes when needed. |
| Styles & Pseudo | Inline ::before/::after as elements, resolve counter()/counters(). |
| Images & Backgrounds | Fetch and inline external images/backgrounds as data URLs. |
| Fonts | Embed @font-face (optional) and icon fonts. |
| SVG | Wrap clone in <foreignObject>, serialize to data:image/svg+xml. |
| Export | Convert SVG to PNG/JPG/WebP/Blob or trigger download. |
Plugin hooks fire in order: beforeSnap → beforeClone → afterClone → beforeRender → afterRender → beforeExport → afterExport. See 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.
Running the capture from automation or a backend job? Use SnapDOM inside the page controlled by Playwright or Puppeteer. The DOM capture boundaries guide covers workers, SSR and cross-origin frames.
Run your first capture
Open the demo or install the package and use the quick-start example above.
Open the demo Install from npm