whatisgithub

What is html-to-image?

bubkoo/html-to-image — explained in plain English

Analysis updated 2026-06-24

7,134TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A JavaScript library that converts any visible element on a web page into a PNG, JPEG, SVG, or canvas image, no screenshot tool or browser extension required, just a function call from your code.

Mindmap

mindmap
  root((repo))
    What it does
      Capture DOM elements
      Export as image
      No extension needed
    Output formats
      PNG and JPEG
      SVG
      Canvas and pixel data
    Tech Stack
      TypeScript
      npm
    Use Cases
      Download page sections
      Export charts as images
      Capture styled reports
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a Download as PNG button that lets users save a chart or dashboard widget as an image file

USE CASE 2

Capture a styled HTML invoice or report as a JPEG to attach to an email

USE CASE 3

Export a specific section of a page as an SVG for use in a design tool

USE CASE 4

Snapshot part of a React component as a canvas element to display or upload elsewhere

What is it built with?

TypeScriptJavaScriptnpm

How does it compare?

bubkoo/html-to-imagewix/react-native-ui-libyinxin630/fiora
Stars7,1347,1337,133
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

This is a JavaScript library that takes any visible element on a web page and converts it into an image, without requiring the user to take a screenshot or install any browser extension. You point it at a specific part of the page, call one of its functions, and it hands back an image file you can download or display elsewhere. The library offers several output formats: PNG, JPEG, SVG, a raw HTML canvas element, and raw pixel data as a numeric array. Each format is exposed as its own function, such as toPng or toJpeg, so you pick whichever format your use case needs. All of them return a promise, meaning they work asynchronously and you handle the result once it is ready. The README includes short code examples for each format, including one for use inside a React component. You can control several aspects of the output through an options object. A filter function lets you exclude specific elements or entire branches of the page, which is useful for hiding buttons or private sections before capturing. Other options let you set a background color, override width and height, scale the output to a different resolution, adjust JPEG quality, and control how web fonts are embedded into the image so the text renders correctly even without a live internet connection. The library is installed through npm and works in any modern browser environment. It was forked from an older project called dom-to-image and continues to be maintained as a TypeScript package. The README does not describe a server-side or command-line mode, it is intended for use inside a running web page.

Copy-paste prompts

Prompt 1
Using html-to-image, show me how to add a Download PNG button to my webpage that captures a specific div with id chart and saves it as a file.
Prompt 2
I have a React dashboard and I want to let users export a specific widget as a JPEG. Show me how to use the toJpeg function from html-to-image inside a React component.
Prompt 3
How do I use html-to-image to exclude certain child elements from the captured image, for example, hiding action buttons before the screenshot?
Prompt 4
I want to capture an HTML element as a PNG at twice the screen resolution for a high-DPI display. How do I set the pixel ratio option in html-to-image?
Prompt 5
How do I use html-to-image to capture a section of the page that includes custom web fonts and make sure the text renders correctly in the output image?

Frequently asked questions

What is html-to-image?

A JavaScript library that converts any visible element on a web page into a PNG, JPEG, SVG, or canvas image, no screenshot tool or browser extension required, just a function call from your code.

What language is html-to-image written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, npm.

How hard is html-to-image to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is html-to-image for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.