SnapDOMGitHub★ 8K

How-To Guides

How to capture the DOM

Short, focused recipes that show one task each — copy the snippet, drop it into your project, ship.

Convert DOM output

Screenshot a div in JavaScript

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

Convert HTML to PNG

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

Convert HTML to SVG

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

Canvas

Render HTML to Canvas

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

Capture in high resolution

Use DPR, scale and output dimensions without changing the live component.

Export real UI

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.

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.

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.

Capture before creating a PDF

Flatten a visual component before passing it to a single-page PDF workflow.

Capture complex DOM

Capture without Puppeteer

Export an existing browser element without operating a Chromium service.

Capture Shadow DOM

Capture accessible open shadow roots and their resolved styles.

Iframe

Capture an iframe

Include same-origin frame content and handle cross-origin boundaries honestly.

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.

What's a how-to?

Each how-to covers a capture or export task. Core recipes use images, SVG, Canvas and Blob; the PDF workflow uses an optional plugin. For portable HTML, structured context and maps, GIF or video, see the plugins. The framework guides cover refs and lifecycle timing.

Need a recipe that's not here?

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

Request a recipe Open the demo