How-To Recipe

Capture an element without Puppeteer

When the element already exists in the user’s browser, export it locally instead of sending HTML to a headless-browser service.

TL;DR

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.

Client-side captureNo Puppeteer · no Playwright · no upload

The captured result will appear here.

Limits and common mistakes

Use Puppeteer or Playwright when rendering must happen without a user browser, must use a controlled engine, or must capture arbitrary external pages. SnapDOM captures accessible DOM, not remote URLs.

Frequently asked questions

Is SnapDOM a replacement for every Puppeteer screenshot?

No. It replaces client-side element export, not server-side URL rendering or browser automation.

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 demo Install from npm