Render web content into images 🖼️ or PDFs 📄 with Puppeteer and optional EJS template rendering.
This package provides a thin wrapper around Puppeteer for simple, high-quality output generation with metadata support.
- 🔗 Render from remote URLs or local HTML/EJS templates
- 🖼️ Output to images (PNG, JPEG, WebP)
- 📄 Output to PDFs (configurable format, margins, etc.)
- 🎨 Supports EJS templates with dynamic data injection
- ✏️ Add custom metadata to generated images and PDFs
- ⚡ Simple API, powered by Puppeteer
npm install puppeteer-webshotimport { Renderer } from "puppeteer-webshot";
async function main() {
// Initialize the renderer
const renderer = await Renderer.init();
// Render a remote webpage to an image with metadata
await renderer.image("https://example.com", {
viewport: { width: 1280, height: 720 },
options: { path: "shot.png" },
});
// Render a local webpage to PDF with metadata
await renderer.pdf("./example.html", {
options: { path: "shot.pdf", format: "A4" },
metadata: {
title: "Example Report",
author: "Andrei",
producer: "puppeteer-webshot",
}
});
// Close the renderer when done
await renderer.close();
}
main();Initializes a new Renderer instance and launches a Puppeteer browser.
port(optional, number): Port used internally when serving local files. Default:4732.
Closes the underlying Puppeteer browser instance. Call this when you’re finished with rendering.
Renders a webpage (local or remote) into an image.
Config (ImageRenderConfig):
viewport(optional, Viewport): The viewport dimensions (e.g.{ width: 1280, height: 720 }).options(ScreenshotOptions): Options for the output image (path, format, quality, etc.).data(optional, EJS Data): Values to inject into.ejstemplates.delayMs(optional, number): Wait time (in ms) before capturing.metadata(optional, ImageMetadata): Metadata fields to embed in the image file.
Renders a webpage (local or remote) into a PDF.
Config (PDFRenderConfig):
options(PDFOptions): Options for the output PDF (path, format, margins, etc.).data(optional, EJS Data): Values to inject into.ejstemplates.delayMs(optional, number): Wait time (in ms) before generating the PDF.metadata(optional, PDFMetadata): Metadata fields to embed in the PDF.
Metadata supported for images (PNG, JPEG, WebP):
title(string): Title or description of the image.author(string): Image creator/photographer.copyright(string): Copyright notice.software(string): Name of the software used to generate the file.creationDate(Date): Creation time.keywords(string[]): List of keywords/tags.custom(Record<string, string | number | boolean>): Arbitrary metadata fields.
Metadata supported for PDFs:
title(string): Title of the document.author(string): Author of the document.subject(string): Subject or description.keywords(string[]): List of keywords/tags.creator(string): Original creator software.producer(string): Producer software.creationDate(Date): Document creation date.modDate(Date): Last modification date.language(string): Language of the document (stored in metadata).custom(Record<string, string | number | boolean>): Arbitrary metadata fields.
If you have a file template.ejs:
<html>
<body>
<h1>Hello <%= name %>!</h1>
</body>
</html>You can render it with:
const renderer = await Renderer.init();
await renderer.image("./template.ejs", {
viewport: { width: 800, height: 600 },
options: { path: "greeting.png" },
data: { name: "Andrei" },
});
await renderer.close();If you pass a folder path instead of a file, the renderer will look for an index.html or index.ejs inside that folder.
template/
index.ejs
style.css
script.js
You can render it with:
const renderer = await Renderer.init();
await renderer.pdf("./template", {
options: { path: "page.pdf", format: "A4" },
data: { name: "Andrei" },
});
await renderer.close();