zumerlab / snapdom

English | 简体中文 SnapDOM **SnapDOM** is a next-generation **DOM Capture Engine** — ultra-fast, modular, and extensible. It converts any DOM subtree into a self-contained representation that can be exported to SVG, PNG, JPG, WebP, Canvas, Blob, or **any custom format** through plugins. • Full DOM capture • Embedded styles, pseudo-elements, and fonts • Export to SVG, PNG, JPG, WebP, , or Blob • ⚡ Ultra fast, no dependencies • 100% based on standard Web APIs • Support same-origin • Support CSS counter() and CSS counters() • Support line-clamp Demo https://snapdom.dev Quick Start **Capture any DOM element to PNG in one line:** **Reusable capture** (one clone, multiple exports): --- Capture Flow SnapDOM transforms your DOM element through these stages: | Stage | What happens | |-------|--------------| | **Clone** | Deep clone with styles, Shadow DOM, iframes. Exclude/filter nodes. | | **Styles & Pseudo** | Inline / as elements, resolve / . | | **Images & Backgrounds** | Fetch and inline external images/backgrounds as data URLs. | | **Fonts** | Embed (optional) and icon fonts. | | **SVG** | Wrap clone in , serialize to . | | **Export** | Convert SVG to PNG/JPG/WebP/Blob or trigger download. | Plugin hooks: → → → → → → . Table of Contents • Quick Start • Capture Flow • Installation • NPM / Yarn (stable) • NPM / Yarn (dev builds) • CDN (stable) • CDN (dev builds) • Build Outputs • Usage • Reusable capture • One-step shortcuts • API • snapdom(el, options?) • Shortcut methods • Options • debug • Fallback image on load failure • Dimensions ( , , ) • Cross-Origin Images & Fonts ( ) • Fonts • embedFonts • localFonts • iconFonts • excludeFonts • Filtering nodes: vs • outerTransforms • outerShadows • Cache control • preCache • Plugins (BETA) • Registering Plugins • Plugin Lifecycle Hooks • Context Object • Custom Exports via Plugins • Example: Overlay Filter Plugin • Full Plugin Template • Limitations • ⚡ Performance Benchmarks (Chromium) • Simple elements • Complex elements • Run the benchmarks • Roadmap • Development • Contributors 🙌 • 💖 Sponsors • Star History • License Installation NPM / Yarn (stable) NPM / Yarn (dev builds) For early access to new features and fixes: ⚠️ The tag usually includes improvements before they reach production, but may be less stable. CDN (stable) CDN (dev builds) Build Outputs | Variant | File | Use case | |---------|------|----------| | **ESM** (tree-shakeable) | | Bundlers (Vite, webpack), | | **IIFE** (global) | | Script tag, legacy | **Bundler (npm):** **Script tag (CDN):** **Subpath imports** (lighter bundle if you only need one): Usage | Pattern | When to use | |---------|-------------| | **Reusable** | One clone → many exports (PNG + JPG + download). | | **Shortcuts** | Single export, less code. | Reusable capture Capture once, export many times (no re-clone): One-step shortcuts Direct export when you need a single format: API Returns an object with reusable export methods: Shortcut methods | Method | Description | | ------------------------------ | --------------------------------- | | | Returns an SVG (deprecated) | | | Returns an SVG | | | Returns a | | | Returns an SVG or raster | | | Returns a PNG image | | | Returns a JPG image | | | Returns a WebP image | | | Triggers a download | Exporter-specific options Some exporters accept a small set of **export-only options** in addition to the global capture options. | Option | Type | Default | Description | | --- | --- | --- | --- | | | | | Download name. | | | | | Output format for the downloaded file. | **Example:** | Option | Type | Default | Description | | --- | --- | --- | --- | | | | | Blob type to generate. | **Example:** Options All capture methods accept an object: | Option | Type | Default | Description | | ----------------- | -------- | -------- | ----------------------------------------------- | | | boolean | | When , logs suppressed errors to for troubleshooting | | | boolean | | Skips small idle delays for faster results | | | boolean | | Inlines non-icon fonts (icon fonts always on) | | | array | | Local fonts | | | string\|RegExp\|Array | | Extra icon font matchers | | | object | | Exclude families/domains/subsets during embedding | | | number | | Output scale multiplier | | | number | | Device pixel ratio | | | number | - | Output width | | | number | - | Output height | | | string | | Fallback color for JPG/WebP | | | number | | Quality for JPG/WebP (0 to 1) | | | string | | Proxy base for CORS fallbacks | | | string[] | - | CSS selectors to exclude | | | \| | | How is applied | | | function | - | Custom predicate | | | \| | | How is applied | | | string | | \| \| \| | | | boolean | | Show placeholders for images/CORS iframes | | | string \| function | - | Fallback image for load failure | | | boolean | | When removes but preserves , producing a flat, reusable capture | | | boolean | | Do not expand the root’s bounding box for shadows/blur/outline, and strip those visual effects from the cloned root | | | number | | Safari only: iterations to prime font/decode (WebKit #219770). Use if 3 causes lag | debug When , SnapDOM logs normally suppressed errors to (with the prefix). Useful for troubleshooting capture issues (canvas failures, blob resolution, style stripping, etc.) without noisy output in production. Fallback image on load failure Provide a default image for failed loads. You can pass a fixed URL or a callback that receives measured dimensions and returns a URL (handy to generate dynamic placeholders). Notes: • If the fallback image also fails to load, snapDOM replaces the with a placeholder block preserving width/height. • Width/height used by the callback are gathered from the original element (dataset, style/attrs, etc.) when available. Dimensions ( , , ) • If is provided, it **takes precedence** over / . • If only is provided, height scales proportionally (and vice versa). • Providing both and forces an exact size (may distort). Cross-…