zumerlab/snapdom Mr SnapDOM

SnapDOM

DOM to anything engine — fast, modular, extensible.

Plugins Labs

🧬 toHtml() New

The html-export plugin returns the capture as a self-contained, re-renderable HTML document — markup plus inlined styles and fonts, not pixels. The preview renders it inside a sandboxed <iframe> to prove it stands alone.

Provisioning manifest

A surface with varied controls and a pseudo-element dot.

SHF · 2.4 GHz

🎞️ toGif() New

The gif-export plugin records an animating element frame by frame and encodes an animated GIF (median-cut palette + LZW, no dependencies). The spinner and counter make the motion visible.

00

📹 toMp4() New

The video-export plugin records via the native MediaRecorder. Safari produces MP4 (H.264); Chromium and Firefox typically produce WebM (auto-fallback). The returned Blob.type reflects what was produced.

00

🎬 Video Frame New

<video> pixels are painted by the GPU compositor and don't serialize into <foreignObject>. The pattern: draw the current frame into a <canvas>, then let SnapDOM capture it like any other node. Press play, then capture any frame. The clip is an MDN CC0 sample served with CORS so the canvas isn't tainted.

🏁 Benchmark: snapDOM vs html2canvas

Each library will capture the same DOM element to canvas 5 times. We'll calculate average speed and show the winner.

snapDOM vs html2canvas snapDOM vs dom-to-image

This is the benchmark test element to be captured by both libraries.
snapDOM
Waiting to start...
html2canvas
Waiting to start...

📦 Basic

Hello SnapDOM!

Transforms & Shadows

Transformed + Shadow

Capture it just with outerTransforms / outerShadows.

🚀 Fun Transition

🕺💃

I'm dancing and changing color!

Orbit CSS toolkit - Go to repo

ORBIT

🔤 Google Fonts

Unique Typography!

Google Fonts with embedFonts: true.

🧱 Shadow DOM

🎨 Canvas

📁 Export Formats

📤 Export as
PNG, JPG & WebP.

✨ Pseudo Elements

This element has pseudo-elements.

✂️ Clip-Path Demo

This shape uses clip-path

🌀 Mix Blend Mode

CSS background-blend-mode: multiply — a gradient image (sky + grass) blended with a blue overlay. SnapDOM captures the final rendered result.

Gradient × blue overlay = tinted result

🧩 Iframe (same-origin)

⌨️ Inputs & Textarea

🎭 Masking Effects

CSS radial mask
PNG circle mask
SVG mask
Linear gradient mask

🌐 CORS Proxy (useProxy)

Image preview (background)
CORS proxy by Corsfix

🧾 Full Page Capture

⚡ Powered by snapDOM

SnapDIFF

Visual regression testing that runs in the browser — captures DOM elements with snapDOM, compares them to saved baselines, and shows what changed. Go to repo.