Skip to content

SnapDOMTry SnapStudio GitHub★ 8K

How-To Guides

How to capture the DOM

Recipes for image exports, charts, documents, complex DOM and framework lifecycle timing.

Convert DOM output

Screenshot a div in JavaScript

Select a rendered element, capture a PNG and use it in a preview, download or upload.

Convert HTML to PNG

Three patterns: append to the page, download to disk, or create a PNG Blob or data URL.

Convert HTML to SVG

Export a self-contained SVG foreignObject capture and when to use the Vector plugin for editable paths instead.

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

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

Capture before creating a PDF

Flatten a component to an image, or export a real PDF with the PDF plugin.

Export a PDF with cross-origin images

The page shows the image, the PDF shows a grey box: result.warnings, connect-src in your CSP, CORS headers and your own proxy.

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.

CORS

Capture images without CORS

Map tiles and CDN images whose server sends no CORS headers: placeholders, fallbackURL and a small proxy.

Capture with html-in-canvas

Chrome's native drawElementImage as SnapDOM's second engine: how to turn it on, when it is the better engine, and what SnapDOM still does around it.

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.

Migrate from another library

Migrate from html2canvas

The option map (scale, useCORS, ignoreElements, onclone), the return value change and the four mistakes people make after switching.

Frameworks

SnapDOM in React

useRef + a click handler. Capture a rendered component to PNG without ejecting from the React tree.

SnapDOM in Vue

Use a template ref and nextTick(), then download a PNG or display a preview.

SnapDOM in Next.js

Load capture code from a client event handler after hydration.

SnapDOM in Svelte

Use bind:this and tick() to capture a component after its DOM update settles.

SnapDOM in Angular

Capture an ElementRef from a component method using Angular's viewChild API.

Lit 3

SnapDOM in Lit

Wait for updateComplete and capture content rendered inside an open shadow root.

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 in React, Vue, Next.js, Svelte, Angular and Lit.

Need a recipe that's not here?

Suggest a recipe on GitHub with the element you want to capture and the output you need.

Request a recipe Open the demo