CTRL+P as a Service: Building Documents with Web Tech

Build the conference badge design system by exploring what it takes to generate documents on the web, from the basics to leveraging browser automation and what you know best - HTML, CSS and JS. We won’t obsess over pixel-perfect typography or perfectly compressed PNGs; instead, we’ll dive into the practical tools, patterns, and hacks that teams use to produce reports, invoices, and social images that actually work outside of demos.

Through light coding exercises and collaborative discussion, we’ll explore the landscape of libraries, automation tools, and templating frameworks, and then roll up our sleeves to build a small document renderer powered by Node.js and Puppeteer. By the end, you’ll have the skills (and a Docker image) to generate PDFs and images from any HTML page, whether for a side project or production-grade system.

Most of the workshop is framework-agnostic, but we’ll use TypeScript, Node.js, and Puppeteer as our shared examples.

This is not an exhaustive masterclass; it’s a conversation starter and a practical launchpad into the world of browser-powered document generation.

---

What we'll cover

Document Use Cases

We’ll look at the diverse (and sometimes weird) reasons teams generate documents with web tech:

• Reports – paginated, branded, data-driven documents for business or compliance.

• Invoices – dynamic templates with currency, totals, and locale-aware formatting.

• OpenGraph / Social Images – fast-rendered images for sharing on social platforms.

• Certificates & Diplomas – personalized, design-heavy documents at scale.

• Labels, Tickets, and Badges – small, precise layouts often generated in bulk.

• Catalogs, Brochures & Marketing PDFs – design-centric, media-rich, sometimes hundreds of pages.

• Legal & Compliance Documents – templated contracts, NDAs, and disclosure forms.

---

Approaches to Document Generation

We’ll compare the common tools and frameworks available:

• jsPDF – lightweight, programmatic PDFs in JavaScript.

• PDFKit – Node.js library for code-driven PDFs with drawing primitives and streams.

• Puppeteer – headless Chromium for HTML → PDF/PNG with full CSS/JS support.

• WeasyPrint – CSS-oriented rendering engine (Python) with strong pagination features.

• Other Options – a quick mention of Paged.js, pdf-lib, and cloud APIs.

Each comes with trade-offs in performance, fidelity, deployment complexity, and ecosystem fit.

---

Building a Document Rendering Engine

• We’ll assemble a TypeScript + Node.js + Puppeteer tool that takes any HTML page and produces a PDF or image.

• Learn how to handle assets, fonts, and print CSS for consistent rendering.

• Support multiple output formats (A4 reports, receipts, OpenGraph images).

• Explore simple error handling and stability tricks (timeouts, retries, “wait until ready”).

---

Adding Templating Support

• Introduce templating engines like Handlebars or Nunjucks.

• Using AI to vibe document templates.

• Break down documents into reusable partials (headers, footers, tables, charts).

• Wire in JSON data to render dynamic invoices and reports.

• Discuss i18n basics (dates, currencies, languages).

---

Deploying with Docker

• Containerize Chromium + Node.js for predictable builds.

• Expose a simple HTTP service: POST /render { html | url, type: pdf|png }.

• Run locally, in CI, or on your own server with one command.

---

You’ll Leave With

• A working document renderer that outputs both PDFs and images.

• A templating setup for structured, data-driven docs.

• A Dockerized service ready to run anywhere.

• A mental model of the trade-offs between the different approaches.

---

Prerequisites & Setup

Bring a laptop with a working terminal, browser and editor. Ideally, you'd also have NodeJS 20+ installed.