# Create your first PDF Render a PDF from an existing HTML/CSS template: test data, publish, and download the output. ## Before you start To help you get familiar with Tembuilder, we’ll walk you through creating your first PDF from an existing invoice template. You’ll try editing the content, changing the data, and previewing the result before generating a PDF, all within the app. Before you begin, sign in and go to the **Templates** dashboard. You can add a template to your project using either method below. ## 1. Choose and open a template Use an existing ZIP file or choose a template from Gallery. ### Method 1: Import a ZIP file [Download the invoice template (.zip)](/docs/examples/invoice-template.zip), click **Import** in **Templates**, and select the downloaded file. Enter a name and slug for the template, then wait for the import to finish.
TemplatesTEMBUILDER
Templates
↥   Import＋   New template
▤
My first invoicemy-first-invoice
Draft↗
Templates · Import
### Method 2: Choose a template from Gallery Open **Gallery**, select an invoice template, and preview the design. Add it to your project, enter a name and slug, and wait for completion.
Monochrome Service InvoiceGallery · Invoice
Tembuilder
INVOICE TB-2026-0042
BILL TOTembuilder
TOTAL DUE$597.20
A4 · 1 pageUse template
Gallery → Use template
### Open the template in the editor After adding a template using either method, open it in **Templates** to start editing. In the editor, select a section in **Structure**. Available HTML, CSS, Props and Config tabs depend on your selection. Try changing a label in Props if the template provides that field, then check the preview.
Editor / Structure → PropsTEMBUILDER
▦   STRUCTURE ＋
⌄   Global
▤   Footer
⌄   01 Invoice 5
▤   Invoice Masthead
▤   Billing Parties 4p
▤   Invoice Items
HTMLCSS{} PropsConfig
SECTIONBilling Parties
fromLabelText
VALUEFROM TEMBUILDER
{{ props.fromLabel }}
Structure → Props
## 2. Try data and preview Open **Parameters → Schema** to inspect field names and defaults. Keep names unchanged. **Layout** shows your current design edits. **Save** the template before opening **PDF**. PDF preview uses saved template content and the editor’s parameter values, initially populated from Defaults. After saving another change, regenerate the PDF to see it; the previous preview does not update automatically. Preview does not consume render quota. The inputs in **Run** are separate from PDF preview. To test new Run values, render and inspect that job’s result in steps 3–4.
Editor / Parameters → PDF previewTEMBUILDER
Parameters 11
⚙ Schema{} Payload
invoiceNumberText
TB-2026-0042
customerObject
companyTembuilder
lineItemsArray
LayoutPDF
Tembuilder
INVOICE TB-2026-0042
BILL TOTembuilder
TOTAL DUE$597.20
Parameters · Schema → PDF
The [sample JSON](/docs/examples/invoice-data.json) uses `invoiceNumber`, `seller`, `customer` and `lineItems`, matching the ZIP above. For other templates, check their own Parameters. When calling the API, put the data object inside `parameters`. ## 3. Save, publish and generate 1. **Save** your changes, select the correct version and **publish** it. 2. Create a project API key with `template:render` permission if needed. 3. Open **Run**, select the key, version and variant, and enter data. 4. Click **Render** and wait for completion.
Editor / Publish → RunTEMBUILDER
My first invoicev1
SavePublish
ϟ   RUN
API KEYMy project key
VERSIONv1
VARIANTStandard
{ "invoiceNumber": "TB-2026-0042", "customer": { "company": "Tembuilder" }, …}
● Publishedϟ   Render
Publish → Run → Render
> Real renders require a published version. Each successful render consumes quota; a working preview alone does not mean a template is ready to render. ## 4. Download and check After success, open the result and download the PDF. You can also find the job in **Renders**. Check the first page, last page and data rows in the downloaded file.
Run / History · RendersTEMBUILDER
✓
My first invoicev1 · Standard
Completed
PDF
invoice.pdfapplication/pdf
↓   Download
Renders → Download
If it fails, read the error details before retrying. Each Render click can create a new job. See [common errors](/docs/help/common-errors/) if you cannot identify the cause.