Core · Plugins · Tools

Start with HTML.
Get the result you need.

SnapDOM captures a rendered interface in your browser. Use the core for images, add a plugin for other outputs, or connect a tool to test and automate the work.

Your sourceA rendered HTML interface

An element, component, report or dashboard with its CSS and resources.

SnapDOM coreCapture its current state

Styles, fonts, images, layout and control values.

Choose your result

Image / canvasCore
PDF documentPlugin
HTML snapshotPlugin
GIF / videoPlugins
Text / element mapPlugins

Four ways in

Choose an output7 topics Prepare the copy3 topics Test & automate2 topics Work with agents2 topics

What comes with the core?

SnapDOM runs inside the page. It captures styles, web fonts, pseudo-elements, SVG, canvas, open Shadow DOM, accessible iframe content and form state. You choose output resolution and reuse the captured result.

core.js

const shot = await snapdom(element);
const file = await shot.toBlob({ format: 'png' });

PNG · JPEG · WebP · canvas · Blob

Images & canvas

Save a chart, dashboard or component as an image. Use canvas output as a WebGL texture.

Provided byCore

How it looks in code

example.js

const png = await snapdom.toPng(el);
const canvas = await snapdom.toCanvas(el);

Read toPng() in Docs

PDF with text, links & pages

PDF documents

Turn an HTML report or invoice into a searchable document. Add page breaks, bookmarks and optional fillable fields.

Provided byPlugin

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { pdf } from '@zumer/snapdom-plugins/pdf';

const result = await snapdom(el, { plugins: [pdf()] });
const file = await result.toPdf({ page: 'a4' });

Open the PDF page

A self-contained HTML file

HTML snapshots

Save the rendered markup with its styles and resources. Reopen the snapshot without rebuilding your application.

Provided byPlugin

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { htmlExport } from '@zumer/snapdom-plugins/html-export';

const result = await snapdom(el, { plugins: [htmlExport()] });
const html = await result.toHtml();

Open the html-export plugin

GIF · MP4 or WebM

GIF & video

Record the live element over time for short animations, demos and review clips.

Provided byPlugins

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { gifExport } from '@zumer/snapdom-plugins/gif-export';

const result = await snapdom(el, { plugins: [gifExport()] });
const gif = await result.toGif({ fps: 8, duration: 1000 });

Open the gif-export plugin

Text · JSON · annotated image

Context for agents

Give an agent the captured text, form state and locations of interactive elements.

Provided byPlugins

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { agentMap } from '@zumer/snapdom-plugins/agent-map';

const result = await snapdom(el, { plugins: [agentMap()] });
const map = await result.toAgentMap({ image: 'annotated' });

Open the agent-map plugin

Plain text · coloured HTML

ASCII art

Represent the captured appearance with a grid of characters.

Provided byPlugin

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { asciiExport } from '@zumer/snapdom-plugins/ascii-export';

const result = await snapdom(el, { plugins: [asciiExport()] });
const text = await result.toAscii({ width: 80 });

Open the ascii-export plugin

SVG shapes · Figma

Vector artwork

Turn captured text and supported shapes into editable SVG artwork or Figma content. Vector is prepared locally in @zumer/snapdom-plugins/vector and has not been published yet.

Provided byPlugin

Open the Vector page

Plugin

Keep private content out

Mask fields, exclude blocks or remove attributes before they reach an image, document or semantic export.

Provided byPlugin

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { redactInputs } from '@zumer/snapdom-plugins/redact-inputs';

const result = await snapdom(el, { plugins: [redactInputs()] });
const png = await result.toPng();

Open the redact-inputs plugin

Plugins

Change text or appearance

Replace text, apply a filter, blend a colour or add a timestamp to the captured copy. The original interface stays in place.

Provided byPlugins

How it looks in code

example.js

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

const result = await snapdom(el, { plugins: [timestampOverlay()] });
const png = await result.toPng();

Open the replace-text plugin

Core

Choose the capture area

Capture a single element or a clipped region. Core options also let you exclude selected nodes.

Provided byCore

How it looks in code

example.js

await snapdom.toPng(el, { exclude: ['.demo-input'] });
await snapdom.toPng(document.body, { clip: 'viewport' });

Read exclude in Docs

Separate project

SnapDIFF

Compare captures against baselines, inspect changed pixels and use the result in a browser test suite or CI.

Provided bySeparate project

See SnapDIFF in Ecosystem

Separate project

SnapEye

Capture, compare and record a local app through a CLI or page API. Give a coding agent artifacts and change regions.

Provided bySeparate project

See SnapEye in Ecosystem

Plugins

Describe a captured interface

Export readable text, state and geometry. An element map can add numbered annotations to an image of the same capture.

Provided byPlugins

How it looks in code

example.js

import { snapdom } from '@zumer/snapdom';
import { contextExport } from '@zumer/snapdom-plugins/context-export';

const result = await snapdom(el, { plugins: [contextExport()] });
const outline = await result.toContext();

Open the context-export plugin

Experimental

Operate a browser

Navigate, locate controls, act and verify what changed. SnapSurf adds browser interaction around capture evidence.

Provided byExperimental

See SnapSurf in Ecosystem