Extend SnapDOM
Add HTML, context for agents, PDF and recordings to SnapDOM. Transform captures with filters, timestamps and input redaction, or build your own plugin.
PDF & Vector plugins.
PDF adds selectable, searchable text and pagination. Vector exports editable shapes and text for SVG and Figma. Both plugins live in the SnapDOM monorepo under the MIT license.
PDF and Vector are available on npm in @zumer/snapdom-plugins 4.x and require SnapDOM 3.x.
Playground
Try presets, editable samples, PDF, Vector and real plugin outputs in the capture playground.
npm i @zumer/snapdom@latest
npm i @zumer/snapdom-plugins@latest
<script type="importmap">
{ "imports": {
"@zumer/snapdom":
"https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs"
} }
</script>
<script type="module">
import { snapdom } from '@zumer/snapdom';
import { filter } from
'https://esm.sh/@zumer/snapdom-plugins@latest/filter?external=@zumer/snapdom';
</script>
Use matching core and plugin versions. The import map lets recording plugins share the same core runtime.
import { filter } from '@zumer/snapdom-plugins/filter';
import { timestampOverlay } from '@zumer/snapdom-plugins/timestamp-overlay';
const result = await snapdom(element, {
plugins: [filter({ preset: 'grayscale' }), timestampOverlay()]
});
const png = await result.toPng();
timestamp-overlay
Adds a timestamp to the capture, with configurable date formats and positions.
filter
Applies CSS filters to the capture, using presets or a custom filter string.
replace-text
Replaces text in the capture using strings or regular expressions.
color-tint
Tints the capture with a color overlay. Set the color and opacity.
ascii-export
Converts the capture to ASCII art with toAscii(). Set the width, character set and contrast direction.
Exports searchable, paginated PDFs with selectable text and links. Available in @zumer/snapdom-plugins 4.x for SnapDOM 3.x.
vector
Exports editable SVG text and shapes, or copies a capture into Figma. Available in @zumer/snapdom-plugins 4.x for SnapDOM 3.x.
agent-map
Returns an annotated image and a map of interactive elements, with names, roles and bounding boxes.
context-export
Exports a text outline or JSON tree with text, roles, states and optional bounding boxes.
redact-inputs
Masks fields, hides private blocks and removes named attributes from images, HTML and structured exports.
html-export
Exports a self-contained HTML snapshot with styles, fonts and images inlined.
gif-export
Records the live element frame by frame and returns an animated GIF with toGif().
video-export
Records the live element with toMp4(). The browser selects a supported MP4 or WebM format.
Built something with SnapDOM? Tag your repo with the snapdom-plugin GitHub topic to make it discoverable, then open a PR to list it here.
Your Plugin
Build a plugin and add it here. Just open a PR adding one line to community-plugins.md.
Build a plugin
Use lifecycle hooks to transform captures and register custom exporters. Start with the template and the plugin specification.
npx degit zumerlab/snapdom/packages/plugin-template my-pluginexport function myPlugin() {}Add a line to community-plugins.md