Showcase: live capture and export demos

SnapDOM vs html2canvas

Capture the same element to canvas five times with each library and compare the average time in this browser.

SnapDOM vs html2canvas · SnapDOM vs dom-to-image

Basic capture

Transforms & shadows

Animated transition

Orbit CSS toolkit - Go to repo

Video frame Core

Capture the current frame of a <video> along with its surrounding interface. Press play, then capture a frame. This demo uses a CORS-enabled sample video.

Web fonts

Shadow DOM

Canvas

Export formats

Pseudo-elements

Clip-path

Background blend mode

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

Iframe (same-origin)

Inputs & textarea

Masking effects

CORS proxy (useProxy)

Full-page capture

Plugins

Plugins add PDF, editable SVG, HTML, ASCII and agent context, change the captured copy, or record new frames as GIF and video. PDF, Vector and Stream install separately; the other plugins ship in @zumer/snapdom-plugins. Each demo links to its plugin reference.

Hide private fields Plugin

redact-inputs masks emails and phone numbers in the capture. The live form keeps its values. Options and docs.

Timestamp Plugin

timestamp-overlay stamps the capture time in a corner, useful for receipts and bug reports. Options and docs.

Replace text Plugin

replace-text swaps strings or regular expressions in the capture only. Here DRAFT becomes APPROVED and the date is hidden. Options and docs.

Filters and tint Plugin

filter applies a CSS filter preset to the capture; color-tint lays a colour over it. The page itself does not change. Options and docs, and the Color tint page.

PDF with selectable text Plugin

pdf adds toPdf(): a paginated PDF with selectable, searchable text and clickable links. Reference.

Editable SVG Plugin

vector adds toVector(): SVG text and shapes for a vector editor. Use the separate toFigma() clipboard export for Figma. Reference.

HTML export Plugin

The html-export plugin returns a self-contained HTML snapshot with styles, fonts and images inlined. The preview opens that document in a sandboxed <iframe>. Options and docs.

ASCII art Plugin

ascii-export adds toAscii(), which redraws the capture as plain text characters: dark areas become dense characters, light areas stay blank. The cube is CSS, spinning; the export freezes whatever angle it has when you click. Options and docs.

GIF recording Plugin

The gif-export plugin records the live element frame by frame and returns an animated GIF. Recording starts when you call toGif(). Options and docs.

Video recording Plugin

The video-export plugin records the live element using MediaRecorder. The browser selects a supported MP4 or WebM format; check Blob.type for the result. Options and docs.

Live stream Plugin

The stream plugin keeps a canvas in step with a live element and repaints only the boxes that changed. The first frame is a full capture. Later updates patch isolated regions when possible; complex changes repaint a wider region or the full frame. Type in the card and watch the canvas follow. Reference.

import { stream } from '@zumer/snapdom-stream'

const live = stream(el, { onFrame: f => console.log(f.full ? 'full' : 'patch', f.rects, f.ms) })
await live.ready
document.body.append(live.canvas)
// later: live.stop()

Text context for LLMs Plugin

context-export adds toContext(): the captured UI as a short text outline with roles, text and state. Options and docs.

Element map for agents Plugin

agent-map numbers every interactive element on the image and returns a JSON map with each one's name, role and position. Options and docs.

Labs

Experiments built on captures, running live below.

Video overlay

News, sports and stream overlays written in HTML and CSS, over live video as liquid glass. More about the video overlay lab

WebRTC overlay

An HTML scorebug composited onto video and sent as a WebRTC track; the viewer gets the graphics inside the video. More about the WebRTC overlay lab

Stop motion

Pose a figure, capture each frame, play it back as a flipbook. More about the stop motion lab

Paint on a capture

Paint on top of a captured image. More about the paint canvas lab

Target range

Shoot at a capture and watch the holes pile up. More about the target range lab

Capture stages

Compare a capture that stops early with a full render, timed side by side. More about the capture stages lab

Live mirror

Type into a card and see it mirrored live on a WebGL surface. More about the WebGL live mirror lab

ASCII mirror

Type in a card and watch it redrawn as ASCII art on every change: the stream plugin feeds each frame to asciiFromCanvas(). More about this lab.

Seamless DOM

Editable text rendered through WebGL without a visible seam. More about the WebGL seamless DOM lab

Shattered capture

Break a capture into pieces with WebGL physics. More about the WebGL shatter lab

Into the dock

A settings panel captured once with the html-in-canvas engine and folded into a dock with a WebGL shader, next to the same frame from the raw API and the SVG engine. More about this lab.

Ecosystem

Tools built on SnapDOM