Plugin Ecosystem
zumerlab/snapdom …

Extend SnapDOM

Transform your captures with a wide range of plugins, or build and share your own in minutes.

Playground Quick Start Browse Plugins Build a Plugin
Playground

Source element

Hello SnapDOM

Captured with plugins in real time

🚀✨🧠🖼️🎛️🧪 💡🧩📦🧭⚙️🛡️
Live content

Plugins (combine freely)

filter
timestamp-overlay
replace-text
ascii-export
pdf-image

Captured output

Select plugins and click Capture

Generated code

// Select plugins to see the code
Back to top
Install
Install core
npm i @zumer/snapdom
Install plugins
npm i @zumer/snapdom-plugins
CDN (no install)
<script type="module">   import { snapdom } from     'https://esm.sh/@zumer/snapdom';   import { filter } from     'https://esm.sh/@zumer/snapdom-plugins/filter'; </script>
Usage Example
import { snapdom } from '@zumer/snapdom';
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();
Back to top
Official — @zumer/snapdom-plugins
P
capture

picture-resolver

Resolves lazy-loaded <picture> placeholders. Detects base64 stubs and fetches the real image before capture.

beforeCloneafterClone
officialSourcedetails
T
transform

timestamp-overlay

Adds a configurable timestamp label on the captured clone. Supports multiple date formats and positions.

afterClone
officialSourcedetails
F
transform

filter

Applies CSS filter effects to captures. Ships with presets: grayscale, sepia, blur, vintage, dramatic.

afterClone
officialSourcedetails
R
transform

replace-text

Find-and-replace text in the captured clone. Supports strings and regex patterns.

afterClone
officialSourcedetails
C
transform

color-tint

Tints the entire capture to a specified color using an overlay with mix-blend-mode.

afterClone
officialSourcedetails
A
export

ascii-export

Adds a toAscii() method that converts captures to ASCII art. Configurable width, charset, and luminance.

defineExports
officialSourcedetails
D
export

pdf-image

Exports the capture as a PNG embedded in a downloadable PDF. Supports portrait and landscape orientations.

defineExports
officialdetails
H
export

html-in-canvas

Uses the experimental WICG drawElementImage API for direct DOM-to-canvas rendering where supported.

beforeRenderafterRenderdefineExports
officialSourcedetails
Back to top
Community Plugins
+
yours here

Your Plugin

Build a plugin and add it here. Just open a PR adding one line to community-plugins.md.

How to submit

Build a Plugin in 5 Minutes

SnapDOM's hook system gives you full control over every stage of the capture pipeline.

01
npx degit zumerlab/snapdom/packages/plugin-template my-plugin
Clone the template
02
export function myPlugin() {}
Write your hook logic
03
Add a line to community-plugins.md
Open a PR to get listed
Read the Plugin Spec Contribution Guide