The document collection / Invoice

Business Invoice Template

A clean studio invoice with warm orange accents, a four-column item table, tax, and payment details. Use it for professional services, agency projects, and everyday business billing.

Paper format: A4
Included: HTML layout + sample JSON
Customization: Content, colors, typography
Rendering: Handlebars + Chromium

Use this template Download HTML

Preview the sample document, then make it yours. Change the layout in your editor or clone it into your RelayPDF dashboard to create an editable draft.

Open full-size preview

RELAYPDF / DOCUMENT COLLECTION

A4 HTML → PDF

Make it work for you

From a sample to
your next document.

This layout uses standard HTML and CSS with Handlebars fields. The preview is rendered from the downloadable source and sample data shown below.

Use the sample as a starting point. Your application supplies dates, labels, and calculated amounts; the template handles their presentation.

Personalize the design
Update the organization name, typography, and CSS accent colors. Replace the sample wording with content appropriate to your business.
Connect your data
Keep the field structure in the sample JSON and replace its values. Repeating arrays create the document’s rows or sections.
Preview, publish, generate
Test with your longest content. Publish the draft, then generate PDFs using its templateId and fresh templateData.

What you can customize

Field	Purpose
`number`	Your document reference; use a stable, unique identifier.
`issuedOn`	Date supplied by your application; ISO dates work with the template’s date formatter.
`dueOn`	Date supplied by your application; ISO dates work with the template’s date formatter.
`currency`	ISO currency code used by the money formatter, such as USD.
`taxRate`	Editable document content. Replace the sample value with your own data.
`subtotal`	Pre-tax amount calculated by your application.
`tax`	Tax amount supplied by your billing system.
`total`	Final amount calculated by your application, including applicable adjustments.
`company`	Your business identity and contact details.
`customer`	The recipient’s billing identity and address.
`items`	Repeatable line items; each object becomes a row.
`payment`	Payment terms, bank information, and optional payment link or QR image.
`notes`	Additional context or instructions shown with the document.

Start with real sample data

Download sample JSON ↓

Inspect sample JSON

templateData / JSON

{
  "number": "BI-8042",
  "issuedOn": "2026-08-21",
  "dueOn": "2026-09-20",
  "currency": "USD",
  "taxRate": "8%",
  "subtotal": 3870,
  "tax": 309.6,
  "total": 4179.6,
  "company": {
    "name": "Northline Atelier",
    "address": "14 Pier Street, Suite 3, Portland, ME 04101",
    "email": "studio@northline.studio",
    "phone": "+1 207 555 0148",
    "taxId": "81-4291763"
  },
  "customer": {
    "name": "Harbor & Co.",
    "address": "88 Commercial Street, Portland, ME 04101",
    "email": "accounts@harborandco.com"
  },
  "items": [
    {
      "description": "Spatial identity system",
      "quantity": 1,
      "unitPrice": 2400,
      "amount": 2400
    },
    {
      "description": "Wayfinding drawings",
      "quantity": 8,
      "unitPrice": 115,
      "amount": 920
    },
    {
      "description": "Material board schedule",
      "quantity": 1,
      "unitPrice": 550,
      "amount": 550
    }
  ],
  "payment": {
    "terms": "Net 30",
    "bank": "First Atlantic Trust",
    "account": "004821-991",
    "routing": "011200450",
    "url": "https://pay.northline.studio/BI-8042",
    "qrImage": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='white'/%3E%3Cg fill='black'%3E%3Crect x='6' y='6' width='34' height='34'/%3E%3Crect x='14' y='14' width='18' height='18' fill='white'/%3E%3Crect x='80' y='6' width='34' height='34'/%3E%3Crect x='88' y='14' width='18' height='18' fill='white'/%3E%3Crect x='6' y='80' width='34' height='34'/%3E%3Crect x='14' y='88' width='18' height='18' fill='white'/%3E%3Crect x='48' y='52' width='8' height='8'/%3E%3Crect x='62' y='52' width='8' height='8'/%3E%3Crect x='76' y='52' width='8' height='8'/%3E%3Crect x='48' y='66' width='8' height='8'/%3E%3Crect x='62' y='66' width='8' height='8'/%3E%3Crect x='76' y='66' width='8' height='8'/%3E%3Crect x='48' y='80' width='8' height='8'/%3E%3Crect x='62' y='80' width='8' height='8'/%3E%3Crect x='76' y='80' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E"
  },
  "notes": "Please include invoice number on transfer remittance."
}

Clone through the API

POST /v1/templates

curl https://api.relaypdf.com/v1/templates \
  -H "Authorization: Bearer $RELAYPDF_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name":"Business Invoice Template","galleryId":"business-invoice"}'

This creates an account-owned draft. Publish it before using its slug or UUID as templateId with templateData on POST /v1/pdf. Follow the complete template workflow →

Will the PDF match this preview?

The preview uses the same HTML and sample data included with this template. RelayPDF renders HTML using Chromium. Use the document’s intended A4 paper size and enable print backgrounds. Review page breaks when you add longer content or more rows.

Can I use my own branding and data?

Yes. Edit the HTML and CSS, replace the sample values, and keep the field names your template expects. Save your customized draft in the dashboard and publish a version when it is ready for your application.