Generate Invoices from an HTML Template and JSON

The same HTML template that produces one invoice can produce a thousand. Write the structure once with Mustache {{placeholders}}, then pass a different data object per document. One API call renders each output as a PDF or image. No template engine to install, no intermediate HTML files, no Chromium to manage.

This approach works for any document that changes only the data, not the layout: invoices, certificates, order confirmations, payroll stubs, or monthly reports. The free template renderer on the Rendex site lets you paste a template and data JSON to see the rendered output before writing any code.

What you need

A Rendex API key from rendex.dev/login (100 free calls/month, no credit card required)
curl, Python 3.8+, or Node.js 18+

Step 1: Write the HTML template

The html field in the POST /v1/screenshot endpoint accepts a Mustache template. Variables use double curly braces: {{customer}} outputs the HTML-escaped value of customer from your data object. The {{#items}}...{{/items}} section syntax iterates over a JSON array, repeating the block once per item.

invoice-template.html

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: -apple-system, sans-serif; color: #1c1917; padding: 40px 52px; }
  .header { display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 36px; }
  h1 { font-size: 30px; font-weight: 800; letter-spacing: 3px; margin: 0; }
  .number { font-size: 12px; color: #78716c; margin-top: 6px; }
  .company { font-size: 18px; font-weight: 700; }
  .sub { font-size: 12px; color: #78716c; }
  table { width: 100%; border-collapse: collapse; margin-top: 24px; }
  th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
       color: #78716c; padding: 10px 12px; border-bottom: 2px solid #e7e5e4; }
  td { padding: 12px; border-bottom: 1px solid #e7e5e4; font-size: 14px; }
  .r { text-align: right; }
  .total { text-align: right; font-size: 20px; font-weight: 800;
           color: #ea580c; margin-top: 20px; }
</style>
</head>
<body>
  <div class="header">
    <div>
      <div class="company">{{company}}</div>
      <div class="sub">{{company_address}}</div>
    </div>
    <div style="text-align:right">
      <h1>INVOICE</h1>
      <div class="number">No. {{number}} &middot; Due {{due_date}}</div>
    </div>
  </div>
  <p><strong>Billed to:</strong> {{customer}}</p>
  <table>
    <thead>
      <tr><th>Description</th><th class="r">Amount</th></tr>
    </thead>
    <tbody>
      {{#items}}
      <tr>
        <td>{{description}}</td>
        <td class="r">{{amount}}</td>
      </tr>
      {{/items}}
    </tbody>
  </table>
  <div class="total">Total due: {{total}}</div>
</body>
</html>

Save this file as invoice-template.html. You will pass its contents as the html field at render time.

Step 2: Render the first document

Pass the template as html and your data values as data in a single POST. The API applies the Mustache substitution server-side before capture, so what the browser sees is fully rendered HTML with no raw {{vars}} visible:

render-invoice.sh

# Replace rdx_YOUR_KEY — get your key at rendex.dev/login
curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer rdx_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<h1>Invoice {{number}}</h1><p>Billed to: {{customer}}</p><p>Total: {{total}}</p>",
    "data": {
      "number": "INV-2026-042",
      "customer": "Meridian Software, Inc.",
      "total": "$77.64"
    },
    "format": "pdf",
    "pdfFormat": "A4",
    "pdfPrintBackground": true
  }' --output INV-2026-042.pdf

In practice you store the template in a file and read it at runtime. Here is the same call using the Python SDK:

render_invoice.py

# pip install rendex
from rendex import Rendex
from pathlib import Path

client = Rendex("rdx_YOUR_KEY")  # Get your key at rendex.dev/login

with open("invoice-template.html") as f:
    template = f.read()

data = {
    "company": "Clearwater Design",
    "company_address": "42 Harbour Street, Portland OR 97201",
    "number": "INV-2026-042",
    "due_date": "Jun 27, 2026",
    "customer": "Meridian Software, Inc.",
    "items": [
        {"description": "Pro plan subscription", "amount": "$49.00"},
        {"description": "Plan upgrade (prorated)", "amount": "$2.56"},
        {"description": "Priority support add-on", "amount": "$20.00"},
    ],
    "total": "$77.64",
}

result = client.screenshot(
    html=template,
    data=data,
    format="pdf",
    pdf_format="A4",
    pdf_print_background=True,
)
Path("INV-2026-042.pdf").write_bytes(result.image)
print(f"Saved {result.metadata.bytes_size} bytes")

Step 3: Generate many documents from one template

The template stays constant. Only the data changes. Loop over your records and call the API once per document. This is the core of the generate PDF from template pattern: one layout definition, N rendered outputs without duplicating HTML:

batch_invoices.py

from rendex import Rendex
from pathlib import Path

client = Rendex("rdx_YOUR_KEY")

with open("invoice-template.html") as f:
    template = f.read()

invoice_records = [
    {
        "company": "Clearwater Design",
        "company_address": "42 Harbour Street, Portland OR 97201",
        "number": "INV-2026-042",
        "due_date": "Jun 27, 2026",
        "customer": "Meridian Software, Inc.",
        "items": [
            {"description": "Pro plan subscription", "amount": "$49.00"},
            {"description": "Plan upgrade (prorated)", "amount": "$2.56"},
            {"description": "Priority support add-on", "amount": "$20.00"},
        ],
        "total": "$77.64",
    },
    {
        "company": "Clearwater Design",
        "company_address": "42 Harbour Street, Portland OR 97201",
        "number": "INV-2026-043",
        "due_date": "Jun 27, 2026",
        "customer": "Orbis Analytics",
        "items": [
            {"description": "Starter plan subscription", "amount": "$19.00"},
        ],
        "total": "$19.00",
    },
]

for record in invoice_records:
    result = client.screenshot(
        html=template,
        data=record,
        format="pdf",
        pdf_format="A4",
        pdf_print_background=True,
    )
    Path(f"{record['number']}.pdf").write_bytes(result.image)
    print(f"Saved {record['number']}.pdf")

For large batches, add async_=True and a webhook_url. The API queues each render and POSTs the result to your endpoint as it completes, so your script returns immediately instead of blocking on each PDF.

Branded PDF invoice rendered from HTML template and JSON data using the Rendex generate pdf from template API — A Clearwater Design invoice rendered by Rendex from an HTML Mustache template and a JSON data object

TypeScript / Node.js

The JS/TS SDK accepts the same data field:

render-invoices.ts

// npm install @copperline/rendex
import { Rendex } from "@copperline/rendex"
import { readFileSync, writeFileSync } from "fs"

const rendex = new Rendex("rdx_YOUR_KEY")  // Get your key at rendex.dev/login

const template = readFileSync("invoice-template.html", "utf-8")

const records = [
  {
    company: "Clearwater Design",
    company_address: "42 Harbour Street, Portland OR 97201",
    number: "INV-2026-042",
    due_date: "Jun 27, 2026",
    customer: "Meridian Software, Inc.",
    items: [
      { description: "Pro plan subscription", amount: "$49.00" },
      { description: "Plan upgrade (prorated)", amount: "$2.56" },
      { description: "Priority support add-on", amount: "$20.00" },
    ],
    total: "$77.64",
  },
]

for (const record of records) {
  const { image } = await rendex.screenshot({
    html: template,
    data: record,
    format: "pdf",
    pdfFormat: "A4",
    pdfPrintBackground: true,
  })
  writeFileSync(`${record.number}.pdf`, Buffer.from(image))
  console.log(`Saved ${record.number}.pdf`)
}

Troubleshooting

Placeholders appear in the output ({{customer}} shows as-is): The field name in the template does not match the key in your data object. Keys are case-sensitive. Check for typos on both sides.

Array section renders no rows: The items value must be a JSON array, not a string. An empty array renders no rows but does not error. A non-array value causes the section to be skipped.

HTML characters appearing escaped in output: Double-brace syntax {{var}} HTML-escapes the value, so & in a company name renders safely as text. If you are injecting a fragment of HTML markup that you control, use triple braces: {{{trusted_html}}}.

422 validation error on the data field: The data parameter is only valid with html or markdown sources. Passing data alongside a url is not supported.

Next steps

The HTML-to-PDF invoice pipeline post extends this pattern with a full Stripe webhook integration: trigger a PDF render on payment, store the file in R2, and email the signed URL to the customer.

To generate PDF from template without code, use the free template renderer: paste your HTML with Mustache placeholders, add a JSON data object, and download the rendered PDF. When you are ready to automate it, get a free API key (100 calls/month) and swap in the API call from the examples above.