snapDOM

snapDOM is a fast and accurate DOM capture tool to images developed for Zumly, a WIP framework that enables zoom-based view transitions.

It converts any HTML element into a scalable SVG image, preserving styles, fonts, backgrounds, shadow DOM content, pseudo-elements, and more.

• 📸 Full DOM capture
• 🎨 Embedded styles, pseudo-elements, and fonts
• 🖼️ Export to SVG, PNG, JPG, WebP, or canvas
• ⚡ Ultra fast, no dependencies
• 📦 100% based on standard Web APIs

Installation

You can use snapDOM via NPM, CDN, script tag, or by importing as a module.

NPM / Yarn

npm i @zumer/snapdom

yarn add @zumer/snapdom

CDN

<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>

Script tag (local)

<script src="snapdom.js"></script>

The global object snapdom will be available.

ES Module

import { snapdom } from './snapdom.mjs';

Script Tag (Type Module)

<script type="module">
  import { snapdom } from 'https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs';
</script>

Now you can call snapdom(el), snapdom.toPng(el), etc., directly in your JavaScript.

Basic usage

// Capture an element as <img> tag
const el = document.querySelector("#myElement")
const img = await snapdom.toImg(el);

document.body.appendChild(img);

API

Note: API may evolve until v1.0.0!

The main API is exposed as snapdom and offers multiple capture methods:

Options

You can pass an options object to control the behavior of all capture methods:

preCache() – Optional helper

The preCache() function can be used to load external resources (like images and fonts) in advance.

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

await preCache(document.body, {
  embedFonts: true,
  preWarm: true
});

import { snapdom, preCache } from './snapdom.mjs';
    window.addEventListener('load', async () => {
    await preCache();
  console.log('📦 Resources preloaded');
    });

Options for preCache():

• embedFonts (boolean, default: true) — Inlines non-icon fonts during preload.
• reset (boolean, default: false) — Clears all existing internal caches.
• preWarm (boolean, default: true) — Runs a fake capture in memory to warm up styles, fonts and layout detection.

Special features

• Shadow DOM: Captures content inside Web Components and shadowRoot.

• Pseudo-elements: Captures ::before and ::after, including background images.

• Backgrounds and images: Inlines external images as Data URLs.

• Fonts: Replicates applied font families without requiring external font files.

• Icon fonts: Captures icon fonts like Font Awesome and Material Icons.

• Placeholder and Exclusion:

  • data-capture="exclude": Skips an element while preserving layout space.
  • data-capture="placeholder" + data-placeholder-text="Text": Replaces an element with placeholder text.

Now with improved fidelity and even faster performance.

Full example

<div id="captureMe">
  <h1 style="color: tomato;">Hello World!</h1>
  <p>This content will be captured.</p>
</div>

<button id="captureBtn">Capture as img</button>

<script type="module">
  import { snapdom } from './snapdom.mjs';

  const button = document.getElementById('captureBtn');
  button.addEventListener('click', async () => {
    const target = document.getElementById('captureMe');
    const img = await snapdom.toJpg(target, { quality: 0.5});
    document.body.appendChild(img);
  });
</script>

Limitations

• External images must be CORS-accessible.
• Iframes are not captured.

Please if you find a bug open an issue.

Benchmarks

snapDOM is not only highly accurate — it’s extremely fast.

Latest benchmarks show significant performance improvements against other libraries:

Run the benchmarks

To run these benchmarks yourself:

git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run test:benchmark

They execute in headless Chromium using real DOM nodes.

License

MIT © Zumerlab