SnapDOM is a dependency-free browser capture engine that renders a live DOM element into a reusable capture and exports it as SVG, PNG, JPG, WebP, canvas, Blob, self-contained HTML, image-based PDF, animated GIF or browser-encoded video, built for frontend developers who need screenshots, share images or exports of real web interfaces.

What it is

SnapDOM captures the rendered state of a DOM element, including its styles, fonts and images, and holds that state as a reusable result. It runs entirely inside the page using standard Web APIs, with no core dependencies. The core package exports images and canvas; official plugins extend it to self-contained HTML, page context, element maps for visual agents, PDF and recordings. This checkout documents v3.x.x, and the v2 source and v2 documentation remain available alongside a migration guide.

The project solves a specific problem in the JavaScript browser ecosystem: turning a live interface into a portable artifact without a screenshot service or a headless browser. It sits in the same slot as the DOM-to-image capture libraries named in its topic list, where the usual workaround has been to pull in a separate library per output format. SnapDOM replaces that scattergun approach with one capture step and a consistent set of exporters. Capture once, then call toPng(), toCanvas(), toBlob() or download() on the same result; the capture survives later changes to the source element until snapdom(element) is called again.

Key capabilities

• Core exporters toPng(), toJpg() and toWebp() return an HTMLImageElement; toSvg() returns an SVG-backed HTMLImageElement; toCanvas() returns an HTMLCanvasElement; toBlob() returns an SVG Blob unless a format was set.
• toRaw() and the url property expose the capture's SVG data URL, and download() writes the chosen format to disk.
• One-step shortcuts such as snapdom.toPng(element, options) capture and export in a single call, and to(name, options?) dispatches to any core or plugin exporter by name.
• Official plugins cover html-export for self-contained HTML with captured styles and fonts, context-export and agent-map for text or JSON context and images with element maps, plus pdf-image, gif-export and video-export.
• Captures expose canvas plus capture geometry, so they can feed WebGL textures, overlays, visual regression tests and UI transitions.
• Build outputs are dist/snapdom.mjs as an ES module, dist/snapdom.js as a script tag exposing window.snapdom, and types/snapdom.d.ts for TypeScript declarations; there is no CommonJS build.
• Options such as width, dpr and background control the size and rendered content of a capture.

Who uses it and how

• Frontend teams generating share cards, charts, invoices and dashboards as SVG, PNG, JPG, WebP, canvas or Blob directly from the rendered page.
• Applications that archive a page fragment for later display, using the html-export plugin to keep captured styles and fonts intact.
• Teams that need to hand an agent or a log file a view of page content, via context-export text and JSON, or an image with an element map from agent-map.
• Projects producing image-based PDF documents, animated GIFs or browser-encoded video, using pdf-image, gif-export and video-export to record changing content over time.
• Engineering teams wiring captures into visual regression suites, overlays and UI transitions, where capture geometry and canvas output are the inputs.

Getting started

Install the core and any needed plugins with npm i @zumer/snapdom@latest @zumer/snapdom-plugins@latest, keeping matching major versions. The same module is available from a CDN, either as an ES module from https://esm.sh/@zumer/snapdom@latest or from https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs.

How it compares

The topics list places SnapDOM beside html2canvas, dom-to-image and html-to-image, the established libraries for turning DOM nodes into images. Those tools concentrate on producing a bitmap, while SnapDOM presents one capture primitive whose result is reused across image, canvas, HTML, context, PDF, GIF and video exporters, with official plugins carrying the formats beyond the core. Choosing between them comes down to whether a single raster export is enough or whether several outputs and plugins are wanted from the same capture.

When to use it — and when not to

SnapDOM runs inside the page, so a self-hoster operates no database, storage layer or mail server; the cost is that it needs a browser environment with a real DOM and cannot replace a server-side rendering pipeline. The plugin ecosystem is a second install with its own major-version matching, and the absence of a CommonJS build rules out plain require consumers without a bundler or ESM interop. The published README is detailed but partially presented here, v3.x.x requires a migration step from v2.x.x, and anyone pinned to v2 behaviour should stay on the v2 source and documentation rather than move yet.

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

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

const result = await snapdom(card);

const image = await result.toPng();
const canvas = await result.toCanvas();
const blob = await result.toBlob({ format: 'png' });
await result.download({ format: 'jpg', filename: 'card' });

npm i @zumer/snapdom@latest @zumer/snapdom-plugins@latest

<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.js"></script>
<script>
  snapdom.toPng(document.querySelector('#card')).then(image => {
    document.body.appendChild(image);
  });
</script>

import { snapdom } from 'https://esm.sh/@zumer/snapdom@latest';
import { htmlExport } from 'https://esm.sh/@zumer/snapdom-plugins@latest/html-export';

npm install
npm run compile
npm run site

const result = await snapdom(card, {
  width: 800,
  dpr: 1,
  backgroundColor: '#ffffff',
  exclude: '.capture-ignore',
  excludeMode: 'remove'
});

import { htmlExport, contextExport } from '@zumer/snapdom-plugins';

const result = await snapdom(card, {
  plugins: [htmlExport(), contextExport({ format: 'json' })]
});

const html = await result.toHtml();
const context = await result.toContext();

const result = await snapdom.fromString('<article>Hello</article>');
const image = await result.toPng();

const canvas = document.createElement('canvas');
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;

async function refresh(element) {
  await snapdom.toCanvas(element, { canvas, scale: 1, dpr: 1 });
  texture.needsUpdate = true;
}