Series: Building PdfWord — a free, no-backend PDF tools site (Part 7)
Static template downloads are everywhere. You grab a "free invoice template," open it, and then… you need Word or Acrobat to actually fill it in. The template was never the hard part — using it is.
So I built the opposite: a Template Studio where you fill in a form, pick from 19 designs, and download a finished PDF with your data already in it. No Word, no Acrobat, no signup. Everything runs in the browser.
Try it: Template Studio
The problem with template sites
I already had 18 static PDF templates on the site — invoice, resume, and certificate designs you can download directly. They pull search traffic (people google "free invoice template" constantly), but a static PDF is a dead end for most users. They download it, realize they can't easily edit a PDF, and leave.
The insight: the value isn't the template file. It's the filled document. So instead of 18 downloads, I built one studio that generates any of 19 designs from a form.
How it's built: parameterized pdf-lib generators
I already had pdf-lib generation code for every design — but with hardcoded sample data baked in. The refactor was mechanical and deeply satisfying: every hardcoded string became a function parameter.
// Before: hardcoded sample data
T('Sample Company Ltd.', M, 766, { s: 12 });
// After: data-driven generator
function genInvoiceModern(data) {
T(data.businessName || 'Your Business', M, 766, { s: 12 });
T(data.clientName || '', 300, yB, { s: 12, b: 1 });
// ... every field flows from `data`
}
19 generators, roughly 1,400 lines. Each one is a pure function: data in, PDF bytes out. That purity made testing almost pleasant — I ran all 19 in Node with sample data and verified every single one produced a valid PDF before I touched the UI.
The form problem (and the boring solution)
Six categories need six different forms. Invoices need line items with add/remove rows. Resumes need experience entries with bullet points. Certificates just need a name, a title, and a date. I wrote six small form builders in vanilla JS — no framework, no dependencies.
The boring solution was the right one: each builder returns HTML, a collectData() function scrapes it into a clean object, and that same object feeds both the live preview and the PDF generator. One data shape, two renderers.
The live preview is an HTML approximation of the chosen design, themed with each design's accent color. It doesn't need to be pixel-perfect — it needs to answer "did I fill this in right?" The PDF is the source of truth.
The design picker
This was the fun part. During development I render PNG thumbnails from every PDF with pdftoppm (it also proves the PDF rasterizes correctly). The design picker is just a grid of those thumbnails — what you see is literally what the PDF looks like. No mockups, no surprises.
There's also a "Fill sample data" button, which sounds trivial but changed how I QA: one click gives me a realistic filled invoice, and I can flip through all 6 invoice designs in seconds to check the layout holds.
What I'd do differently
19 designs was ambitious. Honestly, I should have shipped 6 — one per category — and added designs based on which ones people actually use. The marginal cost of each new design is low now that the framework exists, but the upfront work was real.
Still, the studio is the most "product" thing I've built for PdfWord. It's not a tool you use once — it's somewhere you go to get work done. And every PDF it generates carries a small "Generated with PdfWord" footer. Marketing that ships itself.
Try it: Template Studio — 19 designs, 6 categories, zero signup.
What template category should I add next? Industry-specific cover letters? Lease agreements? Tell me in the comments.
Top comments (0)