snapdom

SnapDOM Skill

Fast, dependency-free DOM-to-image capture library for converting HTML elements into scalable SVG or raster image formats.

When to Use This Skill

Use SnapDOM when you need to:

• Convert HTML elements to images (SVG, PNG, JPG, WebP)
• Capture styled DOM with pseudo-elements and shadows
• Export elements with embedded fonts and icons
• Create screenshots with custom dimensions or scaling
• Handle CORS-blocked resources using proxy fallback
• Implement custom rendering pipelines with plugins
• Optimize performance on large or complex elements

Key Features

Universal Export Options

• SVG - Scalable vector format, embeds all styles
• PNG, JPG, WebP - Raster formats with configurable quality
• Canvas - Get raw Canvas element for further processing
• Blob - Raw binary data for custom handling

Performance

• Ultra-fast capture (1.6ms for small elements, ~171ms for 4000×2000)
• No dependencies - Uses standard Web APIs only
• Outperforms html2canvas by 10-40x on complex elements

Style Support

• Embedded fonts (including icon fonts)
• CSS pseudo-elements (::before, ::after)
• CSS counters
• CSS line-clamp
• Transform and shadow effects
• Shadow DOM content

Advanced Capabilities

• Same-origin iframe support
• CORS proxy fallback for blocked assets
• Plugin system for custom transformations
• Straighten transforms (remove rotate/translate)
• Selective element exclusion
• Tight bounding box calculation

Installation

NPM/Yarn

npm install @zumer/snapdom
# or
yarn add @zumer/snapdom

CDN (ES Module)

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

CDN (UMD)

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

Quick Start Examples

Basic Reusable Capture

// Create reusable capture object
const result = await snapdom(document.querySelector('#target'));

// Export to different formats
const png = await result.toPng();
const jpg = await result.toJpg();
const svg = await result.toSvg();
const canvas = await result.toCanvas();
const blob = await result.toBlob();

// Use the result
document.body.appendChild(png);