html-to-image

html-to-image is a zero-dependency TypeScript library that captures a live DOM node and converts it into a PNG, JPEG, SVG, or raw canvas image directly in the browser, with no headless browser, screenshot API, or server round-trip involved. It works by cloning the target node, inlining its computed styles, embedding referenced web fonts and images as data URIs, and serializing the result into an SVG foreignObject that browsers can rasterize onto a canvas.

Originally forked from dom-to-image, it adds pixel-ratio control, cache-busting for cross-origin assets, pluggable node filtering, and a getFontEmbedCSS helper for reusing embedded font CSS across multiple captures. It ships as ESM, CommonJS, and a UMD bundle, and is framework-agnostic, usable from plain JavaScript, React, Vue, or any other DOM-based UI.

What You Get

• Six top-level async functions - toPng, toJpeg, toSvg, toBlob, toCanvas, toPixelData - for exporting a DOM node in the format you need
• Automatic embedding of external images, background images, and @font-face web fonts as inline data URIs so exports are self-contained
• Pixel-ratio, canvas-size, and JPEG-quality controls for producing exports tuned to retina displays or fixed dimensions
• A node filter callback for excluding elements (and their subtrees) from the captured output
• getFontEmbedCSS for pre-computing font embed CSS once and reusing it across repeated captures
• Zero runtime dependencies and dual ESM/CJS/UMD builds with bundled TypeScript types

Common Use Cases

• Exporting a chart, dashboard widget, or report section as a downloadable PNG/JPEG
• Generating shareable “share card” images from user-generated content, such as a completed quiz or profile card
• Capturing an editable canvas or whiteboard as an image for saving or printing
• Client-side screenshotting for bug reports or visual-regression snapshots without a headless browser
• Producing preview thumbnails of live DOM content for social sharing or export

Under The Hood

Architecture

The library exposes a single entrypoint (src/index.ts) with a small set of async functions - toSvg, toCanvas, toPixelData, toPng, toJpeg, toBlob, getFontEmbedCSS - that all stack on top of toSvg in a linear pipeline: clone the node, embed web fonts, embed images, apply style overrides, then serialize to an SVG data URI (optionally rasterized onto a canvas). clone-node.ts is the central abstraction: a recursive cloning routine that special-cases canvas, video, and iframe elements, walks shadow roots and slotted children, reattaches computed styles, recreates pseudo-elements (clone-pseudos.ts), and resurrects SVG <use> symbol definitions. embed-images.ts, embed-resources.ts, dataurl.ts, and embed-webfonts.ts each handle one async fetch-and-inline concern (image URLs, CSS background images, @font-face resources). There is no framework or DI container - it is a modular, single-purpose transform pipeline composed via async/await chains and Array.reduce for sequential async recursion over the DOM tree.

Tech Stack

Written in TypeScript with zero runtime dependencies, built to dual ESM (build:esm) and CommonJS (build:cjs) outputs via tsc plus a UMD bundle via Rollup (@bubkoo/rollup-config). Linting runs through @bubkoo/eslint-config with lint-staged/husky pre-commit hooks, and releases are automated via semantic-release (@bubkoo/semantic-release-config). It targets the browser DOM/Canvas/SVG APIs directly and is framework-agnostic - the README shows plain JS, ES module, and React usage, but it has no dependency on any UI framework.

Code Quality

Tests run under Karma with the Jasmine framework in a real Chrome instance (karma-chrome-launcher, karma-typescript) across roughly a dozen spec files (basic, canvas, embed, options, select, special, svg, video, webfont, image-error-handler), using pixelmatch for pixel-level image comparison and karma-coverage/Codecov for coverage reporting - a rigorous choice given that a DOM-rendering library can’t be meaningfully tested against a non-browser DOM shim. Code is consistently typed (a single Options interface in types.ts drives every function), uses camelCase naming and optional chaining throughout, and is enforced by ESLint/Prettier pre-commit hooks and a GitHub Actions CI workflow. Error handling is deliberately soft in places - cross-origin iframe cloning swallows errors silently and falls back to a shallow clone, and failed image loads are steered through an imagePlaceholder/onImageErrorHandler option rather than a thrown exception. Recent commit activity is low, though the repository is still occasionally maintained.

API Design The public API is deliberately minimal: a handful of top-level async functions that each take just a DOM node and an options object, with no class to instantiate and no provider/context to configure. Naming mirrors familiar browser Canvas API conventions (toDataURL-style methods), so the learning curve for a developer already comfortable with the DOM is close to zero - the README’s React example needs only a ref and one function call. Beyond matching its dom-to-image origins, it adds genuinely useful ergonomic options - pixelRatio, skipAutoScale, cacheBust, and a getFontEmbedCSS helper for caching font-embed work across repeated calls - without adding configuration overhead to the common case.