2.1k stars · MIT · v4.7.0 (2026-04-16)
Renders a DOM node to PNG, JPEG or SVG in the browser — the maintained successor to html-to-image.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A small library that renders a DOM node to a PNG, JPEG or SVG entirely in the browser, using canvas and SVG foreignObject. It is the actively maintained successor to the widely-linked html-to-image.
Why it matters
Grasppy's output is a picture, and pictures travel — but only if there is a button that produces a file. Someone who maps a 600-message thread and drops the result into their team chat with "this is what that argument was actually about" has just marketed your product to eight colleagues at zero cost to you, and that loop is worth more per hour of work than anything in Layer I. It is also your thumbnail pipeline: a real map exported at 1280×720 is a far better YouTube thumbnail than a stock illustration, and it feeds the same Thumbnails-Maker (Ed. 4 #6) workflow you already have. React Flow's own documentation recommends exactly this approach for exporting a canvas.
- Runs client-side. No headless Chromium on the VPS, no render queue, no server cost per export.
- Actively maintained where the obvious alternative is not — v4.7.0 in April 2026 against
html-to-image's last release in February 2025. - A watermark, a title and a URL are just DOM you add before capture, so every exported map can carry your brand for free.
- Browser DOM-to-image is fundamentally fiddly: web fonts, cross-origin images and CSS filters all have known failure modes and you will spend an afternoon on edge cases.
- WebGL canvases do not capture through this route — it works for React Flow's SVG/DOM rendering, but not for a Reagraph WebGL view.
- Big maps make big images and briefly freeze the tab while rendering. Cap the node count or export a viewport.
It is also your thumbnail pipeline: a real map exported at 1280×720 is a far better YouTube thumbnail than a stock illustration, and it feeds the same Thumbnails-Maker (Ed.
An npm package in the React front end, called on an "Export image" button over the React Flow canvas.