HTML-to-Image JavaScript Libraries

Last updated: September 2026 · maintained by the SnapDOM team.

Three ways to turn HTML into an image

These tools capture rendered HTML, but they run in different environments. Choose the environment first, then compare output and performance:

• Client-side libraries (SnapDOM, html2canvas, html-to-image, dom-to-image, modern-screenshot) run in the user's browser. They suit download and share features without sending the DOM to a screenshot server. Fonts and images may still require network requests.
• Server-side browser automation (Puppeteer, Playwright) runs a controlled browser in your infrastructure. It suits automated navigation, testing and rendering jobs.
• Hosted APIs (HCTI, Urlbox, and similar) accept HTML or a URL and return an image. The provider manages the browser; pricing and limits depend on the service.

The rest of this page focuses on the client-side libraries, because that's where most projects start and where the differences are subtle.

Run the benchmark yourself Real-world scenes, eight libraries, measured in your own browser — plus pixel checks for specific capability fixtures.

Feature matrix

Support varies by fixture and rendering mode; test your own UI. The live benchmark reports results for its specific pixel fixtures and loaded versions.

The libraries, reviewed

SnapDOM

Browser capture with extensible outputs. SnapDOM clones styled DOM and renders it inside an SVG <foreignObject>. It supports pseudo-elements, CSS variables, transforms, counters, open Shadow DOM and accessible web fonts. Core exports include SVG, PNG, JPG, WebP, Canvas and Blob; official plugins add HTML, structured context and maps, PDF images, GIF and video. Browser security still blocks inaccessible resources and tainted canvas pixels.

html2canvas

Canvas rendering from the DOM. html2canvas implements a CSS painter in JavaScript by default. Check its supported properties, captured output and repository when assessing it for your page.

html-to-image

A dom-to-image fork. html-to-image uses SVG foreignObject and provides image data URLs, Canvas and Blob exports. Its font options and return types differ from SnapDOM's; compare the migration notes and your target components.

modern-screenshot

A TypeScript capture library. modern-screenshot uses SVG foreignObject and shares SnapDOM's core image, Canvas and Blob formats. SnapDOM's plugin lifecycle adds other outputs and transformations; use real captures to assess browser-specific differences.

dom-to-image

The original API behind several forks. dom-to-image captures a node through SVG foreignObject. If you migrate, account for return types, font handling and inclusion predicates rather than assuming a drop-in replacement.

Server-side & hosted options

Use browser automation or a hosted service for captures that must run independently of the user's browser, navigation workflows or scheduled rendering. A controlled browser version helps make output repeatable; it does not make different engines byte-identical.

Which should you use?

• Browser-side exports with custom outputs evaluate SnapDOM and its optional plugins.
• Existing capture bugs compare the affected component before migrating, then adapt return types and options.
• Bundle size matters inspect the build you import. SnapDOM has zero runtime dependencies and separate plugin imports.
• Existing dom-to-image integration review the migration table and test captured output.
• Controlled server rendering evaluate Puppeteer, Playwright or a hosted service.

FAQ

What is the best HTML-to-image library in 2026?

Choose by execution environment, output type and the content you capture. SnapDOM supports browser-side capture with optional plugin exports. Browser automation suits server jobs and controlled test environments. Compare representative output and timing before choosing.

Is there a maintained html2canvas alternative?

SnapDOM, html-to-image and modern-screenshot provide alternatives based on SVG foreignObject. Check their release histories and test the layout or asset that is failing in your current integration.

Why does my capture miss web fonts or Shadow DOM?

Check font readiness and resource access, then verify how the capture library handles shadow roots. SnapDOM embeds used web fonts by default in v3 and walks open roots. Closed roots and inaccessible font files remain limitations.

Can I convert HTML to an image without a server?

Yes. Client-side capture can create images without a screenshot server. Fonts and images may still be fetched. Server automation is useful when capture must run independently of a user session.