Examples

Real document templates, rendered by vellora. Each picture is page 1 of a PDF made by the published vellora@0.3.0 package. The HTML and data for every one are in the repository's fixtures/ folder.

• Simple invoiceThe open-source Sparksuite template, one page
• Multi-page invoiceThree pages, header row repeated on each (Portuguese)
• ReceiptTwo-page point-of-sale receipt with a logo (Portuguese)
• Email receiptThe open-source Postmark receipt as published, placeholders included, printed on A4
• BoletoBrazilian bank payment slip, one page
• LetterFormal notification letter, one page (Portuguese)

A full recipe: the receipt

Every example follows the same pattern: read the template and its data, pass any images as bytes, and call renderPdf. To run it, copy the repository's fixtures/ folder into a project that has vellora installed, and run the script from that project's root:

import { readFileSync, writeFileSync } from "node:fs";
import { renderPdf } from "vellora";

const dir = "fixtures/receipt";
const html = readFileSync(`${dir}/index.html`, "utf8");
const data = JSON.parse(readFileSync(`${dir}/data.json`, "utf8"));

const pdf = await renderPdf(html, data, {
  images: { "./logo.png": readFileSync(`${dir}/logo.png`) },
  metadata: { title: "Receipt" },
});

writeFileSync("receipt.pdf", pdf);

The template prints {{ merchant.name }}, loops over the items with {% for row in items %}, and its @page rule adds "Página 1 de 2" ("Page 1 of 2") at the bottom of each page. The images key is the src the template uses for the logo.

The other examples differ only in the folder and the images they pass.

Simple invoice

sparksuite/simple-html-invoice-template, an open-source HTML invoice template. Its sample text moved into data.json; the brand logo is replaced by a neutral placeholder.

const dir = "fixtures/oss-sparksuite-invoice";
const pdf = await renderPdf(html, data, {
  images: { "assets/logo.png": readFileSync(`${dir}/assets/logo.png`) },
});

Email receipt

The receipt from ActiveCampaign/postmark-templates, an email template printed to A4. Its Google Fonts @import is removed, because vellora loads nothing from the network; the text falls back to the bundled sans-serif font.

const dir = "fixtures/oss-postmark-receipt";
const pdf = await renderPdf(html, data);

Chromevellora

Drag to compare. Left: Chrome’s print-to-PDF. Right: vellora 0.3.0. Same HTML file, with the template’s own [Product Name] placeholders.

Multi-page invoice

A Portuguese invoice with enough line items for three pages. The table's header row repeats at the top of each page, and the footer counts the pages. The Invoices guide walks through it.

const dir = "fixtures/invoice";
const pdf = await renderPdf(html, data, {
  images: { "assets/logo.png": readFileSync(`${dir}/assets/logo.png`) },
  metadata: { title: "Invoice" },
});

From a clone of the repository, after npm install && npm run build, npm run example renders it.

Boleto

A boleto is a Brazilian bank payment slip: a fixed grid of boxes, the typeable payment line, and the barcode digits printed as text.

const dir = "fixtures/boleto";
const pdf = await renderPdf(html, data, {
  images: { "./assets/banco-fake-logo.png": readFileSync(`${dir}/assets/banco-fake-logo.png`) },
  metadata: { title: "Boleto" },
});

Letter

A formal notification letter in Portuguese: long-form text, no images.

const dir = "fixtures/notification";
const pdf = await renderPdf(html, data, { metadata: { title: "Notification" } });

From a clone of the repository, after the same build, npm run render-notification renders it.

More from the repository

These scripts live in examples/:

• Render many documents with a concurrency cap, npm run batch-concurrency. Guide: Bulk rendering.
• Stream a PDF to an HTTP response with renderPdfToStream. Guide: Serve PDFs over HTTP.
• Custom fonts: pass TTF/OTF bytes in fonts. Guide: Fonts.
• PDF/A output: request PDF/A-2b and handle conformance errors. Guide: PDF/A archiving.

fixtures/invoice-broken/ is a template with mistakes on purpose, to show the errors vellora gives.

Licences

The Simple invoice is adapted from sparksuite/simple-html-invoice-template, MIT licence, Copyright (c) 2021 Sparksuite. The Email receipt is adapted from ActiveCampaign/postmark-templates, MIT licence, Copyright (c) 2015 Wildbit. Each folder has the licence text and a NOTICE.md listing every change.

Next: Your first PDF in three steps →