snapDOM

snapDOM is a high-fidelity DOM capture tool, developed as part of the animation engine 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
• ⚡ Lightweight, no dependencies
• 📦 100% based on standard Web APIs

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

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

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

The global object snapdom will be available.

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

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

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

// 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);

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

Parameters:

• el: DOM element to capture.
• scale: Scale factor (default is 1).
• quality: Compression quality for JPG/WebP (range 0–1).

• 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 needing external font files.
• Placeholder and Exclusion:
  • data-capture="exclude": Skips an element while preserving layout space.
  • data-capture="placeholder" + data-placeholder-text="Text": Replaces an element with decorative placeholder text.

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

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

  const button = document.createElement('button');
  button.textContent = "Capture";
  button.onclick = async () => {
    const img = await snapdom.toPng(document.getElementById('captureMe'), 2);
    document.body.appendChild(img);
  };
  document.body.appendChild(button);
</script>

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

snapDOM is not only highly accurate — it's also extremely fast at capturing large or complex DOM structures.

In benchmark tests against popular libraries:

✅ Key insight:
While modern-screenshot is yet slightly faster for very small elements, snapDOM dramatically outperforms all others as the DOM size grows.

✅ Perfect for:

• Capturing full-page views
• Capturing modal windows
• Complex layouts with custom fonts, backgrounds, or shadow DOM

MIT © Juan Martín Muda - Zumerlab