SnapDOM Labs
Plugin demos, playable instruments and rendering engines. Explore capture and export hooks, then try SVG alongside SnapDOM's experimental html-in-canvas engine.
The PNG is the canvas
An image forms the drawing surface; a plugin accumulates brush strokes on its saved clone.
afterClone · afterRenderTarget Range
Every shot is a fresh SnapDOM capture layered on top of the last one — the bullet holes live in the clone, not the DOM.
afterRenderStop Motion
Pose an actor, capture the frame, repeat — a tiny plugin collects the dataURLs into a flipbook you play back.
defineExportsA 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.
defineExportsDOM, live on the GPU
Type into a contenteditable card and watch a plugin push each capture into a live WebGL texture.
needsCapture stages
A plugin declares how far the pipeline has to run. Compare capture stopping at the clone with the full render stage, timed side by side.
defineExportsThe 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.
SnapDOM v3.x.x automatically reuses eligible captures of an unchanged element and checks for changes before reuse. This demo compares forced full captures with memoization enabled. The numbers are measured in your browser.
⚡ Electric · caught × 0
Pikachu artwork via PokeAPI. Pokémon © Nintendo / Game Freak.
SnapDOM has two rendering engines. SVG is the default; engine: 'html-in-canvas' paints the captured clone through the browser's native canvas API. Both exports below are PNG images.
The second engine is experimental and still needs a compatible browser with its canvas drawing flag enabled. For local development, run SNAPDOM_CANVAS_ENGINE=1 npm run site to include it in the build. Unsupported captures fall back to SVG.
One target, two SnapDOM rendering engines.