SnapDOM

https://snapdom.dev/docs
Admin
SnapDOM is a fast DOM capture engine that converts DOM subtrees into self-contained representations...
Tokens:9,230
Snippets:97
Trust Score:6.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install SnapDOM development builds

Source: https://snapdom.dev/docs

Commands for installing the dev version of SnapDOM to access early features and fixes.

```bash
npm i @zumer/snapdom@dev
yarn add @zumer/snapdom@dev
```

--------------------------------

### Install official plugins

Source: https://snapdom.dev/docs/plugins

Command to install the official SnapDOM plugins package via npm.

```bash
npm install @zumer/snapdom-plugins
```

--------------------------------

### Install SnapDOM via package managers

Source: https://snapdom.dev/docs

Commands for installing the stable version of SnapDOM using npm or yarn.

```bash
npm i @zumer/snapdom
yarn add @zumer/snapdom
```

--------------------------------

### Import official plugins

Source: https://snapdom.dev/docs/plugins

Example imports for specific plugins from the official package.

```javascript
import { filter } from '@zumer/snapdom-plugins/filter';
import { timestampOverlay } from '@zumer/snapdom-plugins/timestamp-overlay';
```

--------------------------------

### Configure SnapDOM Cache Modes

Source: https://snapdom.dev/docs/cache

Examples of setting the cache option to control how internal caches are cleared between captures.

```javascript
// Use minimal but fast cache
await snapdom.toPng(el, { cache: 'auto' });

// Keep everything in memory between captures
await snapdom.toPng(el, { cache: 'full' });

// Force a full cleanup on every capture
await snapdom.toPng(el, { cache: 'disabled' });
```

--------------------------------

### Initialize a new plugin

Source: https://snapdom.dev/docs/plugins

Use the degit template to scaffold a new plugin project.

```bash
npx degit zumerlab/snapdom/packages/plugin-template my-plugin
```

--------------------------------

### Perform one-step shortcuts

Source: https://snapdom.dev/docs/api

Use shortcut methods for direct, single-format exports.

```javascript
const png = await snapdom.toPng(el);
const blob = await snapdom.toBlob(el);
document.body.appendChild(png);
```

--------------------------------

### Preload Resources with preCache()

Source: https://snapdom.dev/docs/cache

Use preCache to warm up resources like fonts and images before the first capture to avoid performance stalls.

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

await preCache({
  root: document.body,
  embedFonts: true,
  localFonts: [{ family: 'Inter', src: '/fonts/Inter.woff2', weight: 400 }],
  useProxy: 'https://proxy.corsfix.com/?'
});
```

--------------------------------

### snapdom.plugins()

Source: https://snapdom.dev/docs/plugins

Registers plugins globally, applying them to all capture operations. Plugins can be provided as instances, factories, or tuples of [factory, options].

```APIDOC
## snapdom.plugins(...plugins)

### Description
Registers one or more plugins to be used globally for all SnapDOM capture operations.

### Parameters
- **...plugins** (Instance|Factory|[Factory, Options]) - Required - A list of plugin instances, factory functions, or tuples containing a factory and its configuration options.

### Example
```javascript
import { snapdom } from '@zumer/snapdom';

snapdom.plugins(
  myPluginInstance,
  [myPluginFactory, { optionA: true }],
  { plugin: anotherFactory, options: { level: 2 } }
);
```
```

--------------------------------

### snapdom.toPng(element, options)

Source: https://snapdom.dev/docs/options

Configures image rendering options for PNG conversion, specifically focusing on proxy settings for cross-origin assets.

```APIDOC
## snapdom.toPng(element, options)

### Description
Converts an element to a PNG with optional proxy configuration for cross-origin assets.

### Parameters
- **element** (HTMLElement) - The DOM element to convert.
- **options** (Object) - Configuration object.
  - **useProxy** (string) - Optional. A prefix URL used to fetch assets that are blocked by CORS.

### Example
```javascript
await snapdom.toPng(el, {
  useProxy: 'https://proxy.corsfix.com/?'
});
```
```

--------------------------------

### Include SnapDOM via CDN

Source: https://snapdom.dev/docs

Load SnapDOM directly in the browser using script tags for minified or ES module builds.

```html
<!-- Minified build -->
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>

<!-- Minified ES Module build -->
<script type="module">
  import { snapdom } from "https://unpkg.com/at/zumer/snapdom/dist/snapdom.mjs";
</script>
```

--------------------------------

### Configure download options

Source: https://snapdom.dev/docs/api

Specify export-only options like format, quality, and filename when using the download method.

```javascript
await result.download({
  format: 'jpg',
  quality: 0.92,
  filename: 'my-capture'
});
```

--------------------------------

### Import specific SnapDOM subpaths

Source: https://snapdom.dev/docs

Import individual modules to reduce bundle size when only specific functionality is required.

```javascript
import { preCache } from '@zumer/snapdom/preCache';
import { plugins } from '@zumer/snapdom/plugins';
```

--------------------------------

### Register and use overlay filter plugin

Source: https://snapdom.dev/docs/plugins

Demonstrates global registration and per-capture usage of the overlay filter plugin.

```javascript
import { snapdom } from '@zumer/snapdom';

// Global registration
snapdom.plugins([overlayFilterPlugin, { color: 'rgba(0,0,0,0.3)', blur: 2 }]);

// Per-capture
const out = await snapdom(document.querySelector('#card'), {
  plugins: [[overlayFilterPlugin, { color: 'rgba(255,200,0,0.15)' }]]
});

const png = await out.toPng();
document.body.appendChild(png);
```

--------------------------------

### snapdom(element, options)

Source: https://snapdom.dev/docs/plugins

Registers plugins for a specific capture call. Plugins defined here run before global plugins and can override them if they share the same name.

```APIDOC
## snapdom(element, options)

### Description
Performs a capture on the provided element with specific configuration, including per-capture plugin registration.

### Parameters
- **element** (HTMLElement) - Required - The DOM element to capture.
- **options** (Object) - Required - Configuration object.
  - **plugins** (Array) - Optional - An array of plugins to apply only to this capture, defined as [factory, options] tuples.

### Example
```javascript
const out = await snapdom(element, {
  plugins: [
    [overlayFilterPlugin, { color: 'rgba(0,0,0,0.25)' }],
    [myFullPlugin, { providePdf: true }]
  ]
});
```
```

--------------------------------

### Registering a SnapDOM plugin

Source: https://snapdom.dev/docs/plugins

Plugins can be registered globally using snapdom.plugins() or locally for a specific capture via the plugins option.

```javascript
import { snapdom } from '@zumer/snapdom';

// global
snapdom.plugins(pdfExportPlugin());

// or per capture
const out = await snapdom(element, { plugins: [pdfExportPlugin()] });
```

--------------------------------

### snapdom.plugins(plugin)

Source: https://snapdom.dev/docs/plugins

Registers a plugin globally to extend SnapDOM functionality.

```APIDOC
## snapdom.plugins(plugin)

### Description
Registers a plugin globally for all subsequent SnapDOM captures.

### Parameters
- **plugin** (Object) - Required - The plugin instance to register.
```

--------------------------------

### SnapDOM Options Object

Source: https://snapdom.dev/docs/options

The options object allows fine-grained control over the capture process, including performance settings, visual fidelity, and resource handling.

```APIDOC
## SnapDOM Options Object

### Description
All SnapDOM capture methods accept an `options` object to configure the behavior of the capture pipeline.

### Options
- **debug** (boolean) - Default: false - Logs suppressed errors to console.warn.
- **fast** (boolean) - Default: true - Skips small idle delays for faster results.
- **embedFonts** (boolean) - Default: false - Inlines non-icon fonts.
- **localFonts** (array) - Default: [] - Local fonts configuration { family, src, weight?, style? }.
- **iconFonts** (string | RegExp | Array) - Default: [] - Extra icon font matchers.
- **excludeFonts** (object) - Default: {} - Exclude families/domains/subsets during embedding.
- **scale** (number) - Default: 1 - Output scale multiplier.
- **dpr** (number) - Default: devicePixelRatio - Device pixel ratio.
- **width** (number) - Output width.
- **height** (number) - Output height.
- **backgroundColor** (string) - Default: "#fff" - Fallback color for JPG/WebP.
- **quality** (number) - Default: 1 - Quality for JPG/WebP (0 to 1).
- **useProxy** (string) - Default: '' - Proxy base for CORS fallbacks.
- **exclude** (string[]) - CSS selectors to exclude.
- **excludeMode** ("hide" | "remove") - Default: "hide" - How `exclude` is applied.
- **filter** (function) - Custom predicate `(el) => boolean`.
- **filterMode** ("hide" | "remove") - Default: "hide" - How `filter` is applied.
- **cache** (string) - Default: "soft" - Options: `disabled`, `soft`, `auto`, `full`.
- **placeholders** (boolean) - Default: true - Show placeholders for images/CORS iframes.
- **fallbackURL** (string | function) - Fallback image for `<img>` load failure.
- **outerTransforms** (boolean) - Default: true - When `false` removes `translate/rotate` but preserves `scale/skew`.
- **outerShadows** (boolean) - Default: false - Do not expand the root's bounding box for shadows/blur/outline.
- **safariWarmupAttempts** (number) - Default: 3 - Safari only: iterations to prime font/decode.
- **compress** (boolean) - Default: true - Downsample inlined raster images to their visible resolution.
- **reconcile** (boolean) - Default: false - Measures the styled clone against the live DOM and pins any box whose size diverges.
- **burst** (boolean) - Default: false - Memoizes repeated captures of this element.
- **invalidate** (boolean) - Default: false - With `burst: true`, forces a fresh capture for changes automatic tracking can't see.
```

--------------------------------

### Shortcut Methods

Source: https://snapdom.dev/docs/api

Direct export methods that capture and export an element in a single call.

```APIDOC
## Shortcut Methods

### Methods
- **snapdom.toSvg(el, options?)**: Returns an SVG HTMLImageElement.
- **snapdom.toCanvas(el, options?)**: Returns a Canvas.
- **snapdom.toBlob(el, options?)**: Returns an SVG or raster Blob.
- **snapdom.toPng(el, options?)**: Returns a PNG image.
- **snapdom.toJpg(el, options?)**: Returns a JPG image.
- **snapdom.toWebp(el, options?)**: Returns a WebP image.
- **snapdom.download(el, options?)**: Triggers a download.
```

--------------------------------

### to[Format]()

Source: https://snapdom.dev/docs/plugins

Dynamically generated export method based on plugin definitions.

```APIDOC
## to[Format]()

### Description
An asynchronous method generated automatically by SnapDOM based on the keys returned by `defineExports`. For example, if a plugin defines 'pdf', the method 'toPdf()' is available on the capture result.

### Parameters
- **options** (Object) - Optional - Exporter-specific options such as width, height, quality, or filename.
```

--------------------------------

### snapdom.toPng Options

Source: https://snapdom.dev/docs/options

Configuration options for the snapdom.toPng method, including font management and node filtering.

```APIDOC
## snapdom.toPng Options

### Description
Configuration object passed to snapdom.toPng to control font embedding and node filtering during capture.

### Parameters
- **embedFonts** (boolean) - Optional - When true, embeds non-icon @font-face rules detected in the subtree.
- **localFonts** (Array<Object>) - Optional - Array of font objects {family, src, weight, style} to avoid CSS discovery.
- **iconFonts** (Array<string|RegExp>) - Optional - Custom icon families to be treated as icons.
- **excludeFonts** (Object) - Optional - Configuration {families: string[], subsets: string[]} to skip specific non-icon fonts.
- **exclude** (Array<string>) - Optional - Array of CSS selectors to remove from the capture.
- **excludeMode** (string) - Optional - 'hide' (visibility:hidden) or 'remove' (do not clone).
- **filter** (Function) - Optional - Predicate function (el: Element) => boolean to determine if a node is kept.
- **filterMode** (string) - Optional - 'hide' (visibility:hidden) or 'remove' (do not clone).
```

--------------------------------

### myPlugin(options)

Source: https://snapdom.dev/docs/plugins

A factory function to create a plugin object with lifecycle hooks and custom exporter definitions.

```APIDOC
## myPlugin(options)

### Description
Creates a plugin instance that hooks into the capture and export lifecycle. Plugins can modify the context, manipulate the cloned DOM, or register new export helpers.

### Parameters
- **options** (Object) - Optional - Configuration options for the plugin.

### Plugin Object Structure
- **name** (string) - Unique identifier for the plugin.
- **beforeSnap(context)** (Function) - Async hook for early adjustments.
- **beforeClone(context)** (Function) - Async hook before subtree cloning.
- **afterClone(context)** (Function) - Async hook after subtree cloning.
- **beforeRender(context)** (Function) - Async hook before serialization.
- **afterRender(context)** (Function) - Async hook after serialization.
- **beforeExport(context)** (Function) - Async hook before each export call.
- **afterExport(context, result)** (Function) - Async hook after each export call; returns the result for chaining.
- **defineExports(context)** (Function) - Async hook to return a map of custom exporter functions.
- **afterSnap(context)** (Function) - Async hook for cleanup after the first export finishes.
```

--------------------------------

### snapdom(el, options?)

Source: https://snapdom.dev/docs/api

Initializes a reusable capture object for a DOM element. The capture process (deep clone and asset inlining) runs once, allowing multiple export methods to be called on the result without re-cloning.

```APIDOC
## snapdom(el, options?)

### Description
Returns a reusable object with export methods. The capture runs once, and each method on the returned object reuses the captured state.

### Methods
- **toRaw()**: Returns a string representation.
- **toSvg()**: Returns a Promise resolving to an HTMLImageElement.
- **toCanvas()**: Returns a Promise resolving to an HTMLCanvasElement.
- **toBlob(options?)**: Returns a Promise resolving to a Blob.
- **toPng(options?)**: Returns a Promise resolving to an HTMLImageElement.
- **toJpg(options?)**: Returns a Promise resolving to an HTMLImageElement.
- **toWebp(options?)**: Returns a Promise resolving to an HTMLImageElement.
- **download(options?)**: Triggers a file download.
```

--------------------------------

### Register plugins globally

Source: https://snapdom.dev/docs/plugins

Register plugins to apply to all capture instances. Supports instances, factories, or factory-option pairs.

```javascript
import { snapdom } from '@zumer/snapdom';

// You can register instances, factories, or [factory, options]
snapdom.plugins(
  myPluginInstance,
  [myPluginFactory, { optionA: true }],
  { plugin: anotherFactory, options: { level: 2 } }
);
```

--------------------------------

### preCache()

Source: https://snapdom.dev/docs/cache

The preCache() function preloads external resources such as images, backgrounds, and fonts to avoid performance stalls during the first capture.

```APIDOC
## preCache(options)

### Description
Preloads external resources to avoid first-capture stalls. This is recommended for complex DOM trees.

### Parameters
- **root** (HTMLElement) - Optional - The root element to scan for resources.
- **embedFonts** (boolean) - Optional - Whether to embed fonts.
- **localFonts** (Array) - Optional - List of local font objects with family, src, and weight.
- **useProxy** (string) - Optional - URL of a proxy to use for fetching resources.

### Usage Example
```javascript
import { preCache } from '@zumer/snapdom';

await preCache({
  root: document.body,
  embedFonts: true,
  localFonts: [{ family: 'Inter', src: '/fonts/Inter.woff2', weight: 400 }],
  useProxy: 'https://proxy.corsfix.com/?'
});
```
```

--------------------------------

### snapdom.toSvg(element, options)

Source: https://snapdom.dev/docs/options

Configures image rendering options including fallback URLs and proxy settings for SVG conversion.

```APIDOC
## snapdom.toSvg(element, options)

### Description
Converts an element to an SVG with optional fallback image handling and proxy configuration.

### Parameters
- **element** (HTMLElement) - The DOM element to convert.
- **options** (Object) - Configuration object.
  - **fallbackURL** (string|function) - Optional. A fixed URL string or a callback function receiving {width, height} that returns a URL string.
  - **useProxy** (string) - Optional. A prefix URL used to fetch assets that are blocked by CORS.

### Example
```javascript
await snapdom.toSvg(element, {
  fallbackURL: '/images/fallback.png',
  useProxy: 'https://proxy.corsfix.com/?'
});
```
```

--------------------------------

### Configure toBlob options

Source: https://snapdom.dev/docs/api

Specify the blob type and quality when using the toBlob method.

```javascript
const blob = await result.toBlob({ type: 'jpeg', quality: 0.92 });
```

--------------------------------

### overlayFilterPlugin(options)

Source: https://snapdom.dev/docs/plugins

A plugin function that returns an object to be registered with SnapDOM, applying a visual overlay to the cloned root element.

```APIDOC
## overlayFilterPlugin(options)

### Description
Adds a translucent overlay or color filter to the captured clone. This is useful for highlighting or dimming sections before export.

### Parameters
- **options** (Object) - Optional - Configuration object for the overlay.
  - **color** (string) - Optional - The overlay color (rgba/hex/hsl). Default: 'rgba(0,0,0,0.25)'.
  - **blur** (number) - Optional - The blur intensity in pixels. Default: 0.

### Usage Example
```javascript
import { snapdom } from '@zumer/snapdom';

// Global registration
snapdom.plugins([overlayFilterPlugin, { color: 'rgba(0,0,0,0.3)', blur: 2 }]);

// Per-capture
const out = await snapdom(document.querySelector('#card'), {
  plugins: [[overlayFilterPlugin, { color: 'rgba(255,200,0,0.15)' }]]
});
```
```

--------------------------------

### Configure local fonts for SnapDOM

Source: https://snapdom.dev/docs/options

Define local font sources to avoid CSS discovery during capture.

```javascript
await snapdom.toPng(el, {
  embedFonts: true,
  localFonts: [
    { family: 'Inter', src: '/fonts/Inter-Variable.woff2', weight: 400, style: 'normal' },
    { family: 'Inter', src: '/fonts/Inter-Italic.woff2', style: 'italic' }
  ]
});
```

--------------------------------

### Register plugins per-capture

Source: https://snapdom.dev/docs/plugins

Apply plugins only to a specific capture call. These run before globally registered plugins.

```javascript
const out = await snapdom(element, {
  plugins: [
    [overlayFilterPlugin, { color: 'rgba(0,0,0,0.25)' }],
    [myFullPlugin, { providePdf: true }]
  ]
});
```

--------------------------------

### Configure Fallback Images

Source: https://snapdom.dev/docs/options

Define fallback behavior for failed image loads using either a static URL or a dynamic callback function. The callback receives the element's dimensions to generate context-aware placeholders.

```javascript
// 1) Fixed URL fallback
await snapdom.toSvg(element, {
  fallbackURL: '/images/fallback.png'
});

// 2) Dynamic placeholder via callback
await snapdom.toSvg(element, {
  fallbackURL: ({ width: 300, height: 150 }) =>
    `https://placehold.co/${width}x${height}`
});

// 3) With proxy (if your fallback host has no CORS)
await snapdom.toSvg(element, {
  fallbackURL: ({ width = 300, height = 150 }) =>
    `https://dummyimage.com/${width}x${height}/cccccc/666.png&text=img`,
  useProxy: 'https://proxy.corsfix.com/?'
});
```

--------------------------------

### Define a custom plugin template

Source: https://snapdom.dev/docs/plugins

Use this template to implement custom logic or exporters by hooking into the capture lifecycle. All hooks are asynchronous and share a common context.

```javascript
export function myPlugin(options = {}) {
  return {
    /** Unique name used for de-duplication/overrides */
    name: 'my-plugin',

    /** Early adjustments before any clone/style work. */
    async beforeSnap(context) {},

    /** Before subtree cloning (use sparingly if touching the live DOM). */
    async beforeClone(context) {},

    /** After subtree cloning (safe to modify the cloned tree). */
    async afterClone(context) {},

    /** Right before serialization (SVG/dataURL). */
    async beforeRender(context) {},

    /** After serialization; inspect context.svgString/context.dataURL if needed. */
    async afterRender(context) {},

    /** Before EACH export call (toPng/toSvg/toBlob/...). */
    async beforeExport(context) {},

    /**
     * After EACH export call.
     * If you return a value, it becomes the result for the next plugin (chaining).
     */
    async afterExport(context, result) { return result; },

    /**
     * Define custom exporters (auto-added as helpers like out.toPdf()).
     * Return a map { [key: string]: (ctx:any, opts:any) => Promise<any> }.
     */
    async defineExports(context) { return {}; },

    /** Runs ONCE after the FIRST export finishes (cleanup). */
    async afterSnap(context) {}
  };
}
```

--------------------------------

### Exporter-specific Options

Source: https://snapdom.dev/docs/api

Configuration options for specific export methods like download and toBlob.

```APIDOC
## Exporter Options

### download(options)
- **filename** (string) - Optional - Download name (default: 'snapdom').
- **format** (string) - Optional - Output format ('png', 'jpeg', 'jpg', 'webp', 'svg') (default: 'png').

### toBlob(options)
- **type** (string) - Optional - Blob type ('svg', 'png', 'jpeg', 'jpg', 'webp') (default: 'svg').
```

--------------------------------

### Capture DOM element to PNG

Source: https://snapdom.dev/docs

Use the toPng shortcut method for a single-line capture of a DOM element to a PNG image.

```javascript
import { snapdom } from '@zumer/snapdom';

const img = await snapdom.toPng(document.querySelector('#card'));
document.body.appendChild(img);
```

--------------------------------

### Configure outerTransforms and outerShadows

Source: https://snapdom.dev/docs/options

Use these options to control whether external transforms are preserved and if shadow-related visual effects are included in the bounding box.

```javascript
// outerTransforms and remove shadow bleed
await snapdom.toSvg(el, { outerTransforms: true, outerShadows: true });
```

--------------------------------

### Implement overlay filter plugin

Source: https://snapdom.dev/docs/plugins

Defines a plugin that injects a full-size div overlay into the cloned root element.

```javascript
/**
 * Ultra-simple overlay filter for SnapDOM (HTML-only).
 * Inserts a full-size <div> overlay on the cloned root.
 *
 * @param {{ color?: string; blur?: number }} [options]
 *   color: overlay color (rgba/hex/hsl). Default: 'rgba(0,0,0,0.25)'
 *   blur: optional blur in px (default: 0)
 */
export function overlayFilterPlugin(options = {}) {
  const color = options.color ?? 'rgba(0,0,0,0.25)';
  const blur = Math.max(0, options.blur ?? 0);

  return {
    name: 'overlay-filter',

    /**
     * Add a full-coverage overlay to the cloned HTML root.
     * @param {any} context
     */
    async afterClone(context) {
      const root = context.clone;
      if (!(root instanceof HTMLElement)) return; // HTML-only

      // Ensure containing block so absolute overlay anchors to the root
      if (getComputedStyle(root).position === 'static') {
        root.style.position = 'relative';
      }

      const overlay = document.createElement('div');
      overlay.style.position = 'absolute';
      overlay.style.left = '0';
      overlay.style.top = '0';
      overlay.style.right = '0';
      overlay.style.bottom = '0';
      overlay.style.background = color;
      overlay.style.pointerEvents = 'none';
      if (blur) overlay.style.filter = `blur(${blur}px)`;

      root.appendChild(overlay);
    }
  };
}
```

--------------------------------

### reconcile

Source: https://snapdom.dev/docs/options

Enables a secondary layout pass to ensure accurate measurement of elements that may re-wrap.

```APIDOC
## reconcile

### Description
When enabled, SnapDOM mounts the styled clone off-screen to measure nodes against their live counterparts, pinning width and height only on boxes that diverge. This ensures accuracy for elements like inline text or table cells at the cost of increased capture time.

### Options
- **reconcile: true** - Enables measurement-based layout reconciliation.
- **reconcile: false** (default) - Uses heuristic-based layout.
```

--------------------------------

### Configure CORS Proxy

Source: https://snapdom.dev/docs/options

Set a proxy prefix URL to handle assets that are blocked by CORS policies. The proxy is only utilized as a fallback when direct or anonymous access fails.

```javascript
await snapdom.toPng(el, {
  useProxy: 'https://proxy.corsfix.com/?' // Note: Any cors proxy could be used 'https://proxy.corsfix.com/?'
});
```

--------------------------------

### Enable layout reconciliation

Source: https://snapdom.dev/docs/options

Use reconcile to ensure accurate width and height measurements for elements that may re-wrap due to font metric differences, at the cost of a second layout pass.

```javascript
await snapdom.toPng(el, { reconcile: true });
```

--------------------------------

### defineExports(context)

Source: https://snapdom.dev/docs/plugins

Defines custom export methods within a plugin, which are then exposed on the capture result.

```APIDOC
## defineExports(context)

### Description
Allows plugins to add new export formats. For each key returned (e.g., 'pdf'), SnapDOM automatically exposes a corresponding helper method (e.g., 'toPdf()') on the capture result object.

### Parameters
- **context** (Object) - Required - The context object containing capture state and configuration.
```

--------------------------------

### Configure Image Compression

Source: https://snapdom.dev/docs/options

Controls whether oversized raster images are downsampled to their visible resolution to improve performance and reduce output size.

```javascript
// default: images downsampled to visible resolution
await snapdom.toPng(el);

// keep images at full resolution
await snapdom.toPng(el, { compress: false });
```

--------------------------------

### Reusable DOM capture

Source: https://snapdom.dev/docs

Perform a single clone of a DOM element to generate multiple export formats or trigger downloads efficiently.

```javascript
const result = await snapdom(document.querySelector('#card'));
await result.toPng();      // → HTMLImageElement
await result.toSvg();      // → SVG as Image
await result.download({ format: 'jpg', filename: 'card.jpg' });
```

--------------------------------

### Enable burst mode for dashboard polling

Source: https://snapdom.dev/docs/options

Use burst: true to memoize captures during repeated polling. The pipeline is skipped unless the element or document styles are mutated.

```javascript
// Dashboard polling: only the first and the 3rd (mutated) calls do real work.
for (let i = 0; i < 10; i++) {
  if (i === 3) counter.textContent = 'new value';
  const result = await snapdom(el, { burst: true });
  img.src = (await result.toPng()).src;
}
```

--------------------------------

### Define custom icon font families

Source: https://snapdom.dev/docs/options

Register custom icon font names or regex patterns to ensure they are always embedded.

```javascript
await snapdom.toPng(el, {
  iconFonts: ['MyIcons', /^(Remix|Feather) Icons?$/i]
});
```

--------------------------------

### Calling a custom export method

Source: https://snapdom.dev/docs/plugins

Custom exports defined in a plugin are accessible as helper methods on the capture result object, such as toPdf().

```javascript
const out = await snapdom(document.querySelector('#report'));

// because the plugin returns { pdf: async (ctx, opts) => ... }
const pdfBlob = await out.toPdf({
  // exporter-specific options (width, height, quality, filename, etc.)
});
```

--------------------------------

### Enable Debug Mode

Source: https://snapdom.dev/docs/options

Enables logging of suppressed errors to console.warn for troubleshooting capture issues.

```javascript
await snapdom.toPng(el, { debug: true });
```

--------------------------------

### debug

Source: https://snapdom.dev/docs/options

Enables logging of normally suppressed errors to console.warn for troubleshooting purposes.

```APIDOC
## debug

### Description
When `debug: true`, SnapDOM logs normally suppressed errors to `console.warn` (with the `[snapdom]` prefix). Useful for troubleshooting capture issues without noisy output in production.

### Usage
```javascript
await snapdom.toPng(el, { debug: true });
```
```

--------------------------------

### compress

Source: https://snapdom.dev/docs/options

Controls whether oversized raster images are downsampled to their visible resolution to improve performance and reduce output size.

```APIDOC
## compress

### Description
With `compress` (on by default) SnapDOM downsamples each oversized raster to the resolution actually visible, preserving aspect ratio and never upscaling. This improves performance for raster exports and reduces file size for SVG exports.

### Usage
```javascript
// default: images downsampled to visible resolution
await snapdom.toPng(el);

// keep images at full resolution
await snapdom.toPng(el, { compress: false });
```
```

--------------------------------

### outerShadows

Source: https://snapdom.dev/docs/options

Controls the inclusion of shadows, blurs, and outlines in the captured bounding box.

```APIDOC
## outerShadows

### Description
Determines if the bounding box expands for shadows, blur, or outlines. Setting to false strips box-shadow, text-shadow, filters, and outlines.

### Options
- **outerShadows: false** (default) - Prevents expanding the bounding box and strips visual effects.
```

--------------------------------

### Define plugin hook logic

Source: https://snapdom.dev/docs/plugins

Basic structure for a plugin hook function.

```javascript
export function myPlugin() {}
```

--------------------------------

### Exclude specific non-icon fonts

Source: https://snapdom.dev/docs/options

Skip font families or unicode-range subsets to optimize capture performance.

```javascript
await snapdom.toPng(el, {
  embedFonts: true,
  excludeFonts: {
    families: ['Noto Serif', 'SomeHeavyFont'],     // skip by family name
    subsets: ['cyrillic-ext']                      // skip by unicode-range subset tag
  }
});
```

--------------------------------

### SnapDOM result object interface

Source: https://snapdom.dev/docs/api

The interface definition for the object returned by the snapdom(el) function.

```typescript
{
  url: string;
  toRaw(): string;
  toImg(): Promise<HTMLImageElement>; // deprecated
  toSvg(): Promise<HTMLImageElement>;
  toCanvas(): Promise<HTMLCanvasElement>;
  toBlob(options?): Promise<Blob>;
  toPng(options?): Promise<HTMLImageElement>;
  toJpg(options?): Promise<HTMLImageElement>;
  toWebp(options?): Promise<HTMLImageElement>;
  download(options?): Promise<void>;
}
```

--------------------------------

### Filter elements using a predicate function

Source: https://snapdom.dev/docs/options

Use a custom function to determine which elements to keep or drop based on computed styles.

```javascript
/**
 * Example filter: skip elements with display:none
 * @param {Element} el
 * @returns {boolean} true = keep, false = exclude
 */
function filterHidden(el) {
  const cs = window.getComputedStyle(el);
  if (cs.display === 'none') return false;
  return true;
}

await snapdom.toPng(document.body, { filter: filterHidden });
```

--------------------------------

### Exclude elements by CSS selector

Source: https://snapdom.dev/docs/options

Remove specific elements like banners or tooltips from the captured output using selectors.

```javascript
await snapdom.toPng(el, {
  exclude: ['.cookie-banner', '.tooltip', '[data-test="debug"]']
});
```

--------------------------------

### outerTransforms

Source: https://snapdom.dev/docs/options

Controls whether external transforms (rotation, translation) are preserved in the captured output.

```APIDOC
## outerTransforms

### Description
Determines if external transforms applied to elements are kept or stripped. Setting to false results in a flat, upright output.

### Options
- **outerTransforms: true** (default) - Keeps original transforms and rotate.
- **outerTransforms: false** - Eliminates external transforms.
```

--------------------------------

### Force capture invalidation in burst mode

Source: https://snapdom.dev/docs/options

Use invalidate: true to force a fresh capture when changes are made via Canvas or CSSOM that the MutationObserver cannot detect.

```javascript
ctx.fillRect(0, 0, 100, 100); // canvas redraw — invisible to the observer
await snapdom(el, { burst: true, invalidate: true });
```
Tokens:
Raw