Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Robust text renderer using headless chrome.

NPM Build Status JavaScript Style Guide


This module is also available as a CLI.


ImageMagick is the traditional unix tool to programatically render text, and while it works very well for simple use cases, trying to use it to render rich text or html is very difficult. Pango is another option that's been around for ages, but both suffer from archaic syntax and minimal rich text support.

Puppeteer, on the other hand, allows for robust, headless chrome screenshots with best-in-class support for all modern html / text / font features.

This module makes it easy to use headless chrome to render text + html to images.


  • built-in fontfaceobserver
  • easily load google fonts
  • optional word-wrap
  • main content is just html
  • styling is done via css
  • handles multiple fonts
  • thoroughly tested
  • includes a CLI


npm install --save puppeteer-render-text


const renderText = require('puppeteer-render-text')

// render text with built-in font and no word-wrap
await renderText({
  text: 'hello world',
  output: 'out0.png',
  style: {
    fontFamily: 'segue ui',
    fontSize: 64

// render text with custom google font and word-wrap at 400px
await renderText({
  text: 'headless chrome is awesome',
  output: 'out1.png',
  loadGoogleFont: true,
  width: 400,
  style: {
    fontFamily: 'Roboto',
    fontSize: 32,
    padding: 16

// render html with custom google font and custom word-wrap at 100px
await renderText({
  text: 'headless <b>chrome</b> is <span style="color: red: font-style: italic;">awesome</span>',
  output: 'out1.png',
  loadGoogleFont: true,
  width: 100,
  style: {
    fontFamily: 'Roboto',
    overflowWrap: 'break-word'

Note that all CSS styles are specified via the JS CSS syntax, which uses camelCase instead of hyphens. This is, for instance, what React uses for its inline styles.



Renders the given text / html via puppeteer.

Asynchronously returns the generated html page as a string for debugging purposes.

If you want to load multiple google fonts, juse specify their font-families in separated by commas as you normally would for CSS fonts.

Type: function (opts): Promise

  • opts object Configuration options
    • opts.text string HTML content to render
    • opts.output string Path of image file to output result
    • opts.width number? Optional max width for word-wrap
    • opts.height number? Optional max height to clip overflow
    • opts.loadFontFamily string? Optional font family to load with fontfaceobserver
    • opts.loadGoogleFont boolean Whether or not to load and wait for as one or more google fonts (optional, default false)
    • object JS CSS styles to apply to the text's container div (optional, default {})
    • opts.inject object Optionally injects arbitrary string content into the head, style, or body elements. (optional, default {})
      • opts.inject.head string? Optionally injected into the document
      • string? Optionally injected into a <style> tag within the document
      • opts.inject.body string? Optionally injected into the document



MIT © Travis Fischer

Support my OSS work by following me on twitter twitter