puppeteer-render-text
Advanced tools
Robust text renderer using headless chrome.
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.
npm install puppeteer-render-text
import { renderText } from '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 opts.style.fontFamily
separated by commas as you normally would for CSS fonts.
Type: function (opts): Promise
opts object Configuration options
opts.text string HTML content to renderopts.output string Path of image file to output resultopts.width number? Optional max width for word-wrapopts.height number? Optional max height to clip overflowopts.loadFontFamily string? Optional font family to load with fontfaceobserveropts.loadGoogleFont boolean Whether or not to load and wait for opts.style.fontFamily as one or more google fonts (optional, default false)opts.style 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 {})
MIT © Travis Fischer
If you found this project interesting, please consider sponsoring me or following me on twitter 
FAQs
Robust text renderer using headless chrome.
The npm package puppeteer-render-text receives a total of 59 weekly downloads. As such, puppeteer-render-text popularity was classified as not popular.
We found that puppeteer-render-text demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Elastic’s return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.
Security News
A new "revival hijack" supply chain attack targets deleted Python packages, with an estimated 22K packages at risk. Socket can detect and block hijacked packages that have added malicious code.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.