Repolode
Submit
zumerlab

zumerlab/snapdom

A browser-side JavaScript engine that captures DOM elements and exports them as SVG, PNG, JPG, WebP, canvas or Blob, with plugins for HTML, PDF, vector, GIF and video.

Open-source alternative to:html2canvas

View on GitHubWebsite
Stars
8,197
Forks
307
Open issues
5
Last commit
12 hours ago

What is it?

SnapDOM captures a DOM element in the page and converts it into images such as SVG, PNG, JPG, WebP, canvas or Blob. A capture can be reused for several outputs, and the result keeps the captured state even if the source element changes afterward.

Official plugins extend the same capture into self-contained HTML, searchable paginated PDF, editable SVG vectors with a Figma clipboard payload, text or JSON context for agents, animated GIF, and browser-encoded video. Custom exporters can be written against the documented plugin hooks. The core has no dependencies and runs entirely in the browser; it needs a DOM environment and does not run in plain Node.js.

The library includes options for output size, DPR, background color, excluding or hiding elements, embedding web fonts, and clipping. PNG file exports handle captures beyond canvas size limits, and a separate crop option lets large pages be rasterized in pieces.

Key features

  • 01Captures DOM elements to SVG, PNG, JPG, WebP, canvas or Blob from one capture.
  • 02Reuses unchanged captures and rebuilds only affected subtrees on small changes.
  • 03Official plugins export HTML, PDF, editable vectors, GIF and video.
  • 04Plugin hooks let developers write custom exporters.
  • 05Options control size, scale, background, excluded elements and font embedding.
  • 06Works in the browser with an ES module, script tag or TypeScript declarations.

Use cases

  • Sharing a dashboard, chart or invoice as an image from a web app.
  • Generating PDF reports or printable pages from rendered page content.
  • Exporting editable vector artwork or pasting designs into Figma.
  • Giving AI agents a text or image view of what is on the page.

Quick start

  1. 1

    Install the core package with npm

    npm i @zumer/snapdom
  2. 2

    Import snapdom and export an element to PNG

Things to know

  • SnapDOM needs a browser DOM, so server-side Node.js requires a browser environment.
  • Cross-origin images, fonts and stylesheets need readable resources or a proxy, and cross-origin iframes use placeholders.
  • SVG output relies on foreignObject, so support varies outside browsers.

Topics

#dom-to-image#screenshot#html-to-image#svg#pdf-export#canvas#browser#javascript#capture#dom

FAQ

What is snapdom?
A browser-side JavaScript engine that captures DOM elements and exports them as SVG, PNG, JPG, WebP, canvas or Blob, with plugins for HTML, PDF, vector, GIF and video. SnapDOM captures a DOM element in the page and converts it into images such as SVG, PNG, JPG, WebP, canvas or Blob. A capture can be reused for several outputs, and the result keeps the captured state even if the source element changes afterward.
Is snapdom free to use? What license does it have?
snapdom is open source under the MIT license. Check the license terms before using it in commercial products.
Is snapdom still maintained?
Actively maintained. The last commit to snapdom was on Oct 20, 2026.
What can I use snapdom for?
Sharing a dashboard, chart or invoice as an image from a web app. Generating PDF reports or printable pages from rendered page content. Exporting editable vector artwork or pasting designs into Figma. Giving AI agents a text or image view of what is on the page.
How do I install snapdom?
Install the core package with npm: npm i @zumer/snapdom Import snapdom and export an element to PNG
Where can I get snapdom?
The source code and installation instructions are on GitHub: https://github.com/zumerlab/snapdom

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects