Build an Invoice Template

What You'll Build

By the end of this guide, you'll have a professional invoice template that can be filled with dynamic data via the API. The invoice will include a header with your company branding, customer details, a line items table, and totals.

Step 1: Set Up the Page

1. Open your project and click New Template
2. Name it "Invoice"
3. In Page Settings, select A4 size with Portrait orientation
4. Set margins to 40px on all sides to give space for content

Step 2: Add the Company Header

1. Add an Image element for your company logo. Position it in the top-left corner.
2. Add a Text element with your company name. Use a large font size (24px) and bold weight.
3. Below that, add more text elements for your company address, phone, and email.

Since company details stay the same across invoices, you can type them directly rather than using data binding.

Step 3: Add Invoice Details

Now add the dynamic fields that will change per invoice:

1. Add a Field element. Set the field key to invoice_number. Position it near the top-right.
2. Add another field for invoice_date below it
3. Add a field for due_date

Add a label text element next to each field (e.g., "Invoice #", "Date:", "Due:").

Step 4: Add Customer Information

1. Add a text element with "Bill To" as a section header
2. Add a Field element with key customer_name
3. Add fields for customer_address, customer_email

Step 5: Create the Line Items Table

This is the most important dynamic part of an invoice:

1. Add a Table element and position it in the middle of the page
2. Set the table's data binding key to line_items
3. Configure columns:
   • Description — field key: description, width: 50%
   • Quantity — field key: quantity, width: 15%, align: center
   • Unit Price — field key: unit_price, width: 15%, align: right
   • Amount — field key: amount, width: 20%, align: right
4. Style the header row with a dark background and white text
5. Add alternating row colors for readability

Step 6: Add Totals

1. Below the table, add field elements for:
   • subtotal
   • tax
   • total — make this larger and bold
2. Position them right-aligned to match the table's Amount column

Step 7: Add a Footer

Add text elements at the bottom for payment terms or notes:

• A field element with key notes for custom per-invoice notes
• Static text for standard payment terms (e.g., "Payment due within 30 days")

Step 8: Preview and Save

1. Click Preview to see your template with placeholder data
2. Adjust spacing, font sizes, and colors until it looks professional
3. Save your template

Generate via API

Now you can generate invoices programmatically:

const pdf = await client.generate({
  templateId: "tmpl_your_invoice_template",
  data: {
    invoice_number: "INV-2026-042",
    invoice_date: "January 15, 2026",
    due_date: "February 14, 2026",
    customer_name: "Acme Corporation",
    customer_address: "123 Business Ave, NY 10001",
    customer_email: "billing@acme.com",
    line_items: [
      {
        description: "Website Design",
        quantity: "1",
        unit_price: "$3,000.00",
        amount: "$3,000.00",
      },
      {
        description: "Development (40 hours)",
        quantity: "40",
        unit_price: "$150.00",
        amount: "$6,000.00",
      },
    ],
    subtotal: "$9,000.00",
    tax: "$720.00",
    total: "$9,720.00",
    notes: "Thank you for your business!",
  },
});