SnapDOMGitHub8K
zumerlab/snapdom Mr SnapDOM pointing up

SnapDOM Labs

Plugin-powered demos, playable instruments, and experimental browser APIs, each one a working example of what a SnapDOM plugin can actually do.

Plugin demos
afterClone · afterRender

The PNG is the canvas

No <canvas> element anywhere: a plugin accumulates every brush stroke onto the last captured clone.

afterClone · afterRender

Target Range

Every shot is a fresh SnapDOM capture layered on top of the last one, so the bullet holes live in the clone, not the DOM.

afterRender

Stop Motion

Pose an actor, capture the frame, repeat: a tiny plugin collects the dataURLs into a flipbook you play back.

defineExports

A capture, shattered

A custom export slices a SnapDOM canvas into a grid and hands the pieces to a WebGL physics sim, plus four more shaders on the same texture.

defineExports

DOM, live on the GPU

Type into a contenteditable card and watch a plugin push each capture into a live WebGL texture.

defineExports

The text you see isn't text

A transparent proxy owns the caret; a hidden element gets captured; a double-buffered WebGL crossfade hides every update.

New option

burst: true watches the element with a scoped MutationObserver and memoizes the last result, so unchanged polls skip the pipeline entirely. Numbers below are timed live, in your browser, right now.

Pikachu
Pikachu 35 HP

⚡ Electric · caught × 0

full pipeline run memoized: instant

Pikachu artwork via PokeAPI. Pokémon © Nintendo / Game Freak.

Experimental browser APIs

Uses drawElementImage() to render the clone directly into canvas, bypassing SVG/foreignObject. Requires Chrome with chrome://flags/#canvas-draw-element enabled.

Target for html-in-canvas

This box is captured via both PNG and drawElementImage.