Detailed Invoice Template HTML and JSON

This guide is based on the Detailed Invoice template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="top-bar">
</div>
<div class="inv-header">
<div>
<div class="inv-title">INVOICE</div>
<p style="color:#777">{{invoice_number}}</p>
</div>
<div style="text-align:right">
<h2 style="font-size:18px">{{company_name}}</h2>
<p style="color:#777;font-size:12px">{{company_email}}</p>
</div>
</div>
<div class="info-grid">
<div class="info-block">
<label>Billed To</label>
<p>
<strong>{{client_name}}</strong>
<br>{{client_company}}<br>{{client_address}}</p>
</div>
<div class="info-block">
<label>Invoice Date</label>
<p>{{date}}</p>
<label style="margin-top:12px">Due Date</label>
<p>{{due_date}}</p>
</div>
<div class="info-block">
<label>Payment Terms</label>
<p>{{payment_terms}}</p>
<label style="margin-top:12px">Currency</label>
<p>{{currency}}</p>
</div>
</div>
<table>
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Qty</th>
<th class="r">Rate</th>
<th class="r">Discount</th>
<th class="r">Amount</th>
</tr>
</thead>
<tbody>{{#each items}}<tr>
<td>{{this.index}}</td>
<td>{{this.description}}</td>
<td>{{this.qty}}</td>
<td class="r">{{this.rate}}</td>
<td class="r">{{this.discount}}</td>
<td class="r">{{this.amount}}</td>
</tr>{{/each}}</tbody>
</table>
<div class="summary">
<div class="notes-box">
<strong>Notes:</strong>
<br>{{notes}}</div>
<div class="summary-box">
<div class="s-row">
<span>Subtotal</span>
<span>{{subtotal}}</span>
</div>
<div class="s-row">
<span>Discount</span>
<span>-{{discount_total}}</span>
</div>
<div class="s-row">
<span>Tax ({{tax_rate}}%)</span>
<span>{{tax_amount}}</span>
</div>
<div class="s-row total">
<span>Total Due</span>
<span>{{total}}</span>
</div>
</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "company_name": "TechFlow Solutions",
  "company_email": "billing@techflow.io",
  "invoice_number": "TF-2026-0312",
  "date": "March 9, 2026",
  "due_date": "March 30, 2026",
  "payment_terms": "Net 21",
  "currency": "USD",
  "client_name": "Emily Johnson",
  "client_company": "StartupXYZ Inc.",
  "client_address": "321 Innovation Blvd, SF, CA",
  "items": [
    {
      "index": 1,
      "description": "Frontend Development - React",
      "qty": "60 hrs",
      "rate": "$175",
      "discount": "5%",
      "amount": "$9,975.00"
    },
    {
      "index": 2,
      "description": "Backend API Development",
      "qty": "40 hrs",
      "rate": "$190",
      "discount": "\u2014",
      "amount": "$7,600.00"
    },
    {
      "index": 3,
      "description": "QA & Testing",
      "qty": "15 hrs",
      "rate": "$120",
      "discount": "10%",
      "amount": "$1,620.00"
    }
  ],
  "subtotal": "$19,195.00",
  "discount_total": "$982.50",
  "tax_rate": "8",
  "tax_amount": "$1,457.00",
  "total": "$19,669.50",
  "notes": "Wire transfer preferred. Late payments subject to 1.5% monthly interest."
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Key mapping checklist

{{company_name}} -> company_name
{{company_email}} -> company_email
{{invoice_number}} -> invoice_number
{{date}} -> date
{{#each items}} -> items[]
{{this.index}} -> items[].index

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<gallery-detailed-invoice-template_id>",
    "payload": {
      "company_name": "TechFlow Solutions",
      "company_email": "billing@techflow.io",
      "invoice_number": "TF-2026-0312",
      "date": "March 9, 2026",
      "due_date": "March 30, 2026",
      "payment_terms": "Net 21",
      "currency": "USD"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Detailed Invoice Template: HTML + JSON Payload