SnapDOM Documentation

What is SnapDOM

SnapDOM is a next-generation DOM capture engine — the fast, modern alternative to html2canvas, dom-to-image and html-to-image. It converts any DOM subtree into a self-contained representation that can be exported to SVG, PNG, JPG, WebP, Canvas, Blob, or any custom format through plugins — ultra-fast, modular, extensible, and dependency-free.

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.

Ready to capture?

Drop SnapDOM into your project and capture your first element in one line.

Open the demo Install from npm