Use SnapDOM client-side when you need a user-triggered export of an existing DOM element.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
import { snapdom } from '@zumer/snapdom'
const element = document.querySelector('#shareable')
await snapdom.download(element, {
format: 'png',
filename: 'shareable',
dpr: 2,
})Why this pattern works
No browser process needs to be launched because the page’s existing browser performs the capture. This removes a server round trip and avoids operating a Chromium worker for user-facing exports.
Capture locally: no browser worker
Click capture: the element is processed in this page without sending its DOM to a screenshot server.
Limits and common mistakes
SnapDOM captures an accessible DOM element; it does not launch a browser, navigate to a URL, authenticate or wait for application state. When rendering must happen without a user's browser, let Puppeteer or Playwright own those steps. Use its native screenshot for one direct bitmap, or inject SnapDOM into the loaded page for SVG, plugins, several formats from one capture or output shared with the client application.
Frequently asked questions
Is SnapDOM a replacement for every Puppeteer screenshot?
No. SnapDOM does not replace browser launch, navigation or page-state automation. In a server job, Puppeteer or Playwright can provide those layers and inject SnapDOM into the page when you need SVG, plugins, reusable exports or parity with a client-side capture.
Does it work offline?
The capture can work offline once the page and required assets are locally available; uncached remote fonts or images cannot be fetched without a network.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm