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.

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.

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 capture

Hello SnapDOM!

Transforms & shadows

Transformed + Shadow

Capture it just with outerTransforms / outerShadows.

outerTransforms (keep external CSS transforms) outerShadows (keep external CSS shadows)

Animated transition

🕺💃

I'm dancing and changing color!

Orbit CSS toolkit - Go to repo

ORBIT

Web fonts

Unique Typography!

Web fonts with embedFonts: true.

Shadow DOM

Canvas

Export formats

Export as
PNG, JPG & WebP.

Pseudo-elements

This element has pseudo-elements.

Clip-path

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.