Capture a full web page

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

const page = document.documentElement
const capture = await snapdom(page, {
  embedFonts: true,
  outerShadows: true,
})
await capture.download({ format: 'png', filename: 'full-page' })

Why this pattern works

Capturing the root includes the document’s layout beyond the current viewport. A dedicated content wrapper is often preferable when fixed navigation or overlays should be excluded.

Capture content beyond a viewport

This scrollable preview is intentionally tall; capture exports the complete selected DOM subtree.

Limits and common mistakes

Very large pages create large SVG and bitmap surfaces. If the DOM capture itself is manageable but one bitmap would exceed browser limits, capture once and rasterize it in tiles with result.toCanvas({ crop }). If the DOM itself is the bottleneck, capture logical sections with clip. Virtualized or lazy items still need to be rendered before either approach can include them.

See Tiled rasterization for large DOM captures for the complete tiling loop, exact geometry and a live mosaic.