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 (stable)
npm i @zumer/snapdom yarn add @zumer/snapdom
NPM / Yarn (dev builds)
For early access to new features and fixes. The @dev tag usually includes improvements before they reach production, but may be less stable.
npm i @zumer/snapdom@dev yarn add @zumer/snapdom@dev
CDN (stable)
<!-- Minified build -->
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>
<!-- Minified ES Module build -->
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom/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';
import { plugins } from '@zumer/snapdom/plugins';
Capture flow
SnapDOM transforms your DOM element through these stages:
| Stage | What happens |
|---|---|
| Clone | Deep clone with styles, Shadow DOM, iframes. Exclude/filter nodes. |
| 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.
Run your first capture
Open the demo or install the package and use the quick-start example above.
Open the demo Install from npm