SnapDOMGitHub★ 8K
How-To Guides
zumerlab/snapdom …

SnapDOM recipes

Focused examples for common capture and export tasks. Each page starts with working code and then covers the limits that matter.

Convert DOM output
Recipe

Screenshot a div in JavaScript

The shortest possible answer: pick the element, call SnapDOM, get an image. With a working example.

 Recipe

Convert HTML to PNG

Three patterns: append to the page, download to disk, or serialise to a Blob/Base64 for upload.

 SVG

Convert HTML to SVG

Export a self-contained SVG foreignObject capture and understand when it is native vector artwork and when it is not.

 Canvas

Render HTML to Canvas

Get an HTMLCanvasElement for compositing, pixel access or custom encoding.

 Resolution

Capture in high resolution

Use DPR, scale and output dimensions without changing the live component.
Export real UI
Recipe

Save a Chart.js chart as a PNG

Export the chart with its title, legend and container, not just the bare canvas. Includes the timing gotcha.

 Dashboard

Export a dashboard as an image

Capture charts, KPI cards, legends and surrounding UI in one sharp export.

 React

Export a React component

Use a ref to save a rendered component as PNG, SVG or Canvas.

 Charts

Export a chart as SVG or PNG

Include HTML titles, legends and annotations around canvas or SVG charts.

 Documents

Export an invoice or report

Create a crisp snapshot of an invoice, receipt, certificate or browser report.

 Social

Generate a social card

Design with HTML and CSS, then export a browser-rendered Open Graph image.

 PDF workflow

Capture before creating a PDF

Flatten a visual component before passing it to a single-page PDF workflow.
Capture complex DOM
Client-side

Capture without Puppeteer

Export an existing browser element without operating a Chromium service.

 Web Components

Capture Shadow DOM

Capture accessible open shadow roots and their resolved styles.

 Iframe

Capture an iframe

Include same-origin frame content and account for cross-origin restrictions.

 Full page

Capture a full web page

Snapshot the document layout beyond the visible viewport.

 Testing

Capture for visual regression

Stabilize component state and produce input for a baseline diff workflow.

About these recipes

Each how-to answers exactly one question with the minimum amount of code. They're meant to be skimmed: you find the recipe, copy it, paste it, done. If you want a deeper walkthrough for a specific framework, see the framework guides instead.

Request a recipe

Open an issue on GitHub describing the task and we'll add it.

Request a recipe Open the demo