snapDOM

snapDOM is a high-fidelity DOM capture tool, developed as part of the animation engine I'm building for Zumly — a framework for creating smooth 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 SVG Data URL
const svgDataUrl = await snapdom(document.querySelector("#myElement"));

// Insert the captured image into the page
const img = new Image();
img.src = svgDataUrl;
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:

• scale (number): Scale factor (default is 1)
• quality (number): Compression quality for JPG/WebP (0–1)
• backgroundColor (string): Background fill for JPG/WebP exports

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.toImg(target);
    document.body.appendChild(img);
  });
</script>

Limitations

• External images must be CORS-accessible.
• Fonts must be fully loaded before capturing (document.fonts.ready is automatically awaited).
• Iframes are not captured.

Benchmarks

snapDOM is not only highly accurate — it’s extremely fast, especially for large elements.

Latest benchmarks show major speed improvements over existing libraries:

✅ snapDOM also improved fidelity, even on complex layouts:

• Up to 7.82× faster for complex modal captures.
• Still faster even at very large sizes.

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