Builder · 3 min read
By Murtaza Aziz
How to Build a PDF Template in 10 Minutes: Blocks, Fields, and Example Data
Click a block, type some text, bind a field from Example data, then download a PDF. The same layout can later fill from a webhook, form, or API call.
A PDF template is a layout you design once and fill many times. In Docuplate that layout is a stack of blocks on a page: a header, an info grid, a table of line items, totals, notes. You are not drawing rectangles on a blank canvas. You add a block, change its text, and optionally point a field at JSON in the Example data panel.
This walkthrough uses an invoice because most people start there. The same clicks work for a quote, a packing slip, or a certificate. Start free if you want to follow along in the builder.
Start from a blank page or a starter
After signup, Documents lists 18 starters. Open Clean Invoice if you want something already structured. Click Start blank if you would rather add every block yourself. Either way you land in the builder: Blocks on the left, the page in the middle, the inspector on the right.
On a first visit a three-step strip sits above the canvas: add a block, change some text, download a PDF. Secondary controls (history, focus mode, page size) stay hidden until those steps are done. Skip the strip if you already know the layout.
Add the seven common blocks
The Blocks panel lists seven common types first: Header, Info grid, Table, Totals, Notes, Image, Signature. Click one to drop it at the bottom of the page, or drag it between existing blocks. More blocks (Status, Divider, QR, Repeater, and the rest) sit behind a disclosure so the list is not a wall of 15 types.
For an invoice, a usable first pass is Header, Info grid (seller and buyer), Table (line items), Totals, Notes. That is five clicks. The hint under the Blocks heading tells you the same thing: click to add, or drag into place.
Change text, then optionally bind a field
Click the Header. The inspector opens with Title, subtitle, and document number. Type "Invoice" in Title if it is always the same word. To fill the number from data, use Fill title from data (optional) and pick a path from Example data, for example invoice.number.
The empty path control says "Choose a field from Example data" so the JSON panel is not a mystery. Open Example data in the bottom drawer if it is collapsed. Add a customer object and an items array that match what you will send later from a form or API. Table columns map to fields on each row: description, qty, unitPrice. Missing values render empty. They do not explode the layout.
Download a PDF, then reuse the template
Click Download PDF. The renderer uses the current Example data. If a field is unbound, you get a blank on the page and a preflight warning, not a crash. Fix the warning, download again.
That file is the same PDF you will get from a webhook, a public form, CSV batch on Starter, or POST /api/public/templates/{templateId}/generate on Pro. The PDF invoice templates landing page is the marketing version of this layout. The Guides page covers field paths, API keys, and no-code HTTP modules once the template exists.
What to leave for later
Style, Layout, and Conditional visibility fold away in the inspector until you need them. Page size and orientation come back after the first-run strip. You do not need a REST key to prove the layout works. Free includes 5 templates and 5 PDF downloads a month, which is enough to finish this walkthrough and send a few real invoices.
If the document you already send is close to what you want, skip Start blank and import that PDF instead. The next article covers that path.