An independent guide to DOM transformation

Replace html2canvas.
Use SnapDOM.

SnapDOM captures a DOM subtree once and returns a reusable result. Export it as PNG, JPG, WebP, SVG, Canvas or Blob—or add a custom format with a plugin.

See the differences →Read the source ↗
↓ Comparison and migration guide
DOM → ANYTHING
Mr. SnapDOM, the official SnapDOM mascot
OFFICIAL MASCOT

Meet Mr. SnapDOM

Official mascot. Guardian of faster, sharper DOM captures.

01 / RETHINK

Why replace html2canvas?

html2canvas reads the page and redraws supported CSS on a canvas. SnapDOM produces a self-contained DOM representation that can be exported more than once.

HTML2CANVAS MODELlegacy toolsSNAPDOM MODELSnapDOM
Core ideaRecreate pixels on a canvasSelf-contained DOM representation
Reusable resultCapture again for another outputOne clone, many exports
Web fidelityCSS support varies by libraryStyles, fonts, pseudo-elements & Shadow DOM
OutputsMostly raster or SVGPNG, JPG, WebP, SVG, Canvas, Blob + custom
ArchitectureFixed capture pipelineModular, extensible, plugin-ready
02 / BENCHMARK

Measured on the same DOM

Chromium benchmark speedup of SnapDOM current versus each competitor. Higher is better. Results are from the project’s public Vitest benchmark suite.

Simple node

Scenariovs html2canvasvs html-to-imagevs modern-screenshot
Small · 200×100443.97×4.76×13.27×
Modal · 400×300474.08×4.89×23.09×
Page view · 1200×800546.28×4.94×92.60×
Large scroll · 2000×1500661.06×4.95×209.84×
Very large · 4000×20001102.78×4.97×621.62×

Complex node

Scenariovs html2canvasvs html-to-imagevs modern-screenshot
Small · 200×100219.07×7.17×19.28×
Modal · 400×300100.18×12.42×14.50×
Page view · 1200×80020.66×15.67×11.42×
Large scroll · 2000×150010.61×16.14×10.99×
Very large · 4000×20007.35×15.88×10.66×
VIEWPORT CLIP24.6×

faster than full-page toCanvas on a long page

IMAGE GALLERY1.97×

faster than html2canvas for rasterized PNG at scale 2

COMPRESSION1.17×

faster on a background-image gallery

Reproduce the benchmark
TERMINAL
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run test:benchmark
View benchmark source ↗
03 / MIGRATE

Migrate in three minutes

Keep your UI. Upgrade the capture engine.

01

Install

Add the @zumer/snapdom package.

NPM / BUNDLER
TERMINAL
npm install @zumer/snapdom
CDN / NO BUILD STEP
HTML
<script type="module">
  import { snapdom } from
    "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
02

Swap the call

Pass the same target element to snapdom.toPng().

- const canvas = await html2canvas(node)+ const image = await snapdom.toPng(node)
03

Reuse the DOM

Capture once, then export repeatedly without re-cloning.

PNGJPGWEBPSVGBLOB
03 / LANDSCAPE

Compare the alternatives

The libraries solve similar tasks, but they do not share the same architecture, maintenance history or extension model.

01

html2canvas

Canvas re-renderer

Popular and familiar, but it interprets the page and redraws supported CSS onto a canvas.

02

html-to-image

Maintained fork

A more maintainable dom-to-image fork with useful output helpers, built on the same SVG foreignObject lineage.

03

dom-to-image

Influential original

The project that inspired many successors. Simple and important, but its architecture now shows its age.

04

dom-to-image-more

Patched successor

Adds valuable fixes and iframe support while keeping the original architecture and API shape.

For new client-side DOM capture work, SnapDOM offers the broadest path beyond a fixed image-export API.

04 / EXTEND

Plugins are part of the architecture

Plugins can participate in capture, transform the result and register custom export formats.

01 / CAPTURE

Control what enters

Filter nodes, replace content and prepare the DOM before export.

＋
02 / TRANSFORM

Change the result

Compose filters, overlays and post-processing without forking the core.

＋
03 / EXPORT

Invent a format

Go beyond images: community examples include ASCII, PDF and prompt-oriented exports.

＋
04 / INTEGRATE

Build your workflow

Register plugins globally or per capture and combine them freely.

＋
Explore the official plugin system ↗
05 / RECIPES

Everyday recipes

The few patterns you’ll use in almost every product.

JAVASCRIPT
import { snapdom } from 'snapdom'

const card = document.querySelector('#card')
const image = await snapdom.toPng(card)
await image.download({ filename: 'card.png' })
WHY IT WORKS

Capture the browser’s resolved DOM

At capture time, layout, fonts and styles have already been resolved. SnapDOM preserves that state in a portable representation instead of implementing a second CSS renderer.

01✓Pseudo-elements
02✓Web fonts
03✓CSS transforms
04✓Shadow DOM
05✓Background images
06✓SVG content
06 / FAQ

Questions before you switch

01Is SnapDOM only a screenshot library?+

No. It is a DOM Capture Engine: snapdom() creates a reusable representation that can be transformed and exported repeatedly.

02Can I create a custom format?+

Yes. The plugin system lets you add exporters and hook into the capture pipeline.

03Can I still get a canvas?+

Yes. Use snapdom.toCanvas(element), or choose PNG, JPG, WebP, SVG and Blob.

04What about cross-origin images?+

Browser security still applies. SnapDOM supports a useProxy option for CORS-denied resources.

READY TO MIGRATE

Migrate one capture first.

Compare the output in your supported browsers, then remove the old dependency.