# zumerlab/snapdom

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/zumerlab-snapdom).**

7,902 stars · 286 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/zumerlab/snapdom
- Homepage: https://snapdom.dev
- awesome-repositories: https://awesome-repositories.com/repository/zumerlab-snapdom.md

## Topics

`capture-screen` `clone` `dom` `dom-manipulation` `fidelity` `javascript` `plugin-system` `screenshot`

## Description

Snapdom is a DOM capture engine that serializes live web page elements into images, videos, documents, and other formats. It converts any DOM subtree into PNG, JPG, WebP, SVG, PDF, or self-contained HTML, and can record animating elements as video files or animated GIFs using the browser's MediaRecorder API.

The library distinguishes itself through a plugin-based architecture that allows custom output format handlers and pipeline hooks to extend the capture process without re-cloning the source element. It manages separate caches for images, styles, and fonts with preloading and clearing methods to optimize memory and rendering speed, and resolves cross-origin assets through a configurable proxy to avoid canvas taint. Snapdom also supports visual regression testing by comparing captured subtrees against saved baselines, and can generate annotated screenshots with bounding boxes for use with large language models.

Additional capabilities include CSS effect rendering for transforms, shadows, clip-paths, blend modes, masks, and pseudo-elements, as well as font embedding to preserve original typography. The capture pipeline supports dimension and scale control, node filtering, form value capture, text find-and-replace, and timestamp overlays, with a reusable composable hook pattern for declarative use in component frameworks.

## Tags

### User Interface & Experience

- [DOM Subtree Capture and Exports](https://awesome-repositories.com/f/user-interface-experience/dom-node-capture/dom-subtree-capture-and-exports.md) — Captures any DOM subtree as a self-contained representation and exports it to multiple formats.
- [DOM Element PNG Captures](https://awesome-repositories.com/f/user-interface-experience/dom-node-capture/dom-element-png-captures.md) — Captures any DOM subtree as a PNG image by attaching a ref and calling a single function. ([source](https://snapdom.dev/guides/react/))
- [DOM Subtree Renderers](https://awesome-repositories.com/f/user-interface-experience/dom-subtree-renderers.md) — Clones and serializes a live DOM subtree with styles, images, and fonts for self-contained export. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))
- [DOM Subtree Capture Engines](https://awesome-repositories.com/f/user-interface-experience/dom-subtree-renderers/dom-subtree-capture-engines.md) — Captures, modifies, and exports DOM subtrees as images, videos, or documents.
- [Computed Style Renderers](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/computed-style-renderers.md) — Renders CSS transforms, shadows, clip-paths, blend modes, masks, and pseudo-elements into captured output. ([source](http://zumerlab.github.io/snapdom))
- [CSS Effect Renderers](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/css-effect-renderers.md) — Renders CSS transforms, shadows, clip-paths, blend modes, masks, and pseudo-elements into captured output.
- [DOM Subtree Blob Captures](https://awesome-repositories.com/f/user-interface-experience/dom-subtree-renderers/dom-subtree-blob-captures.md) — Converts a selected DOM element into a Blob object for uploading or further processing. ([source](https://snapdom.dev/guides/nextjs/))
- [PNG Captures](https://awesome-repositories.com/f/user-interface-experience/dom-subtree-renderers/png-captures.md) — Converts DOM elements into PNG images with optional retina resolution support. ([source](https://snapdom.dev/guides/nextjs/))
- [Web-Compatible Font Embedding](https://awesome-repositories.com/f/user-interface-experience/font-configurations/font-overrides/pdf-font-optimizers/web-compatible-font-embedding.md) — Downloads and inlines web fonts into captured output to preserve original typography. ([source](http://zumerlab.github.io/snapdom))
- [DOM Node Filtering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/predicate-based-filtering/dom-node-filtering.md) — Excludes specific DOM elements from capture using CSS selectors or custom filter functions. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))

### Graphics & Multimedia

- [DOM Subtree Animated Recordings](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/animated-image-rendering/animated-recording-exporters/dom-subtree-animated-recordings.md) — Records animating DOM elements as video files or animated GIFs using browser capture APIs.
- [DOM-to-Image Converters](https://awesome-repositories.com/f/graphics-multimedia/dom-to-image-converters.md) — Converts any DOM element into PNG, JPG, WebP, SVG, or PDF formats.
- [Raster Image Exports](https://awesome-repositories.com/f/graphics-multimedia/dom-to-image-converters/raster-image-exports.md) — Renders DOM subtrees to PNG, JPG, or WebP bitmap formats for download or further use. ([source](http://zumerlab.github.io/snapdom))
- [Multi-Format Image Exports](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports/multi-format-image-exports.md) — Converts captured DOM representations into PNG, JPG, WebP, SVG, Canvas, or Blob output. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))
- [DOM Subtree](https://awesome-repositories.com/f/graphics-multimedia/animated-gif-creators/dom-subtree.md) — Captures animating DOM elements frame by frame and encodes them into animated GIFs. ([source](http://zumerlab.github.io/snapdom))
- [Animation Frame Capturers](https://awesome-repositories.com/f/graphics-multimedia/frame-by-frame-stream-processing/animation-frame-capturers.md) — Captures frame-by-frame changes of animating DOM elements and encodes them into animated GIFs or video files.
- [Captured Image Downloads](https://awesome-repositories.com/f/graphics-multimedia/media-processing-analysis/media-downloaders/url-image-downloaders/captured-image-downloads.md) — Downloads the captured image directly as a file with a specified format and filename. ([source](https://snapdom.dev/guides/react/))
- [DOM Subtree SVG Captures](https://awesome-repositories.com/f/graphics-multimedia/svg-element-generators/svg-document-exporters/dom-subtree-svg-captures.md) — Converts DOM subtrees into SVG documents preserving layout, styles, and fonts. ([source](http://zumerlab.github.io/snapdom))
- [DOM Subtree SVG Exports](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports/dom-subtree-svg-exports.md) — Exports DOM subtrees as SVG for scalable vector output. ([source](https://snapdom.dev/guides/))

### Software Engineering & Architecture

- [DOM Export Plugins](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/design-export-plugins/dom-export-plugins.md) — Ships a plugin system for adding custom output formats and pipeline hooks to the DOM capture process.
- [Export Pipeline Plugins](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/export-pipeline-plugins.md) — Provides a plugin system for registering custom output format handlers and pipeline hooks in the capture process.
- [Pipeline Plugins](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/pipeline-plugins.md) — Registers custom hooks that run at each stage of the capture and export process. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))
- [Capture](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/pipeline-plugins/capture.md) — Extends the capture and export process with custom hooks and output format plugins.
- [Composable Capture Hooks](https://awesome-repositories.com/f/software-engineering-architecture/state-capture-patterns/composable-capture-hooks.md) — Ships a reusable composable hook that wraps the DOM capture lifecycle for declarative use in component frameworks.

### Web Development

- [DOM-to-Canvas Renderers](https://awesome-repositories.com/f/web-development/dom-to-canvas-renderers.md) — Provides a DOM-to-canvas rendering pipeline that serializes live DOM subtrees into canvas representations.
- [Screenshot Generators](https://awesome-repositories.com/f/web-development/screenshot-generators.md) — Generates high-fidelity screenshots of DOM elements with embedded styles and fonts.
- [DOM Video Frame Captures](https://awesome-repositories.com/f/web-development/dom-element-manipulators/dom-video-frame-captures.md) — Draws the current frame of a video element so it can be captured like any other DOM node. ([source](http://zumerlab.github.io/snapdom))
- [DOM Subtree Video Recordings](https://awesome-repositories.com/f/web-development/dom-element-manipulators/dom-video-frame-captures/dom-subtree-video-recordings.md) — Records animating DOM subtrees as video files or animated GIFs using the MediaRecorder API.

### Business & Productivity Software

- [Captured Element Downloads](https://awesome-repositories.com/f/business-productivity-software/download-task-captures/captured-element-downloads.md) — Triggers a browser download of the captured element as an image file in a chosen format. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))

### Content Management & Publishing

- [Multi-Format Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/html-exports/multi-format-exports.md) — Routes a single cloned DOM subtree through multiple output converters without re-cloning the source element.
- [Single-Capture](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/html-exports/multi-format-exports/single-capture.md) — Clones the DOM element once and exports it to multiple formats without re-cloning the source. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))
- [DOM Subtree JPG Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/raster-image-exports/dom-subtree-jpg-exports.md) — Exports DOM subtrees as JPEG images for compressed raster output. ([source](https://snapdom.dev/guides/))
- [Font Inlining](https://awesome-repositories.com/f/content-management-publishing/embedded-font-extraction/font-inlining.md) — Inlines font-face rules and icon fonts into captured output to preserve original typography. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))

### Mobile Development

- [DOM Subtree Video Recordings](https://awesome-repositories.com/f/mobile-development/mobile-video-recording/dom-subtree-video-recordings.md) — Captures animating DOM elements to video via the native MediaRecorder API. ([source](https://zumerlab.github.io/snapdom/plugins.html))

### Testing & Quality Assurance

- [Capture Format Plugins](https://awesome-repositories.com/f/testing-quality-assurance/general-testing-utilities/test-reporters/external-result-reporters/tap-result-exporters/test-report-exporters/plugin-based-output-formats/capture-format-plugins.md) — Defines new output methods that become available on the capture result object via a plugin system. ([source](https://cdn.jsdelivr.net/gh/zumerlab/snapdom@main/README.md))
- [Visual Regression Testing](https://awesome-repositories.com/f/testing-quality-assurance/visual-regression-testing.md) — Compares captured DOM subtrees against saved baselines to detect visual differences in web interfaces. ([source](http://zumerlab.github.io/snapdom))