Skip to content

GST invoice template, HTML and Handlebars

An A4 tax invoice with GSTIN, HSN codes, line items and the CGST and SGST split. Render it from JSON with one API call.

Free to copy. Send it from your app with POST /v1/pdfs/render and the slug gst-invoice.

Template source

<div class="page">
  <div class="head">
    <div><h1>TAX INVOICE</h1><p class="muted">{{invoice.number}} · {{formatDate invoice.date "DD MMM YYYY"}}</p></div>
    <div style="text-align:right"><strong>{{company.name}}</strong><br><span class="muted">{{company.city}}<br>GSTIN {{company.gstin}}</span></div>
  </div>
  <p>Bill to <strong>{{customer.name}}</strong><br><span class="muted">GSTIN {{customer.gstin}}</span></p>
  <table class="items">
    <thead><tr><th>Item</th><th>HSN</th><th class="num">Qty</th><th class="num">Rate</th><th class="num">Amount</th></tr></thead>
    <tbody>
      {{#each items}}
      <tr><td>{{name}}</td><td>{{hsn}}</td><td class="num">{{qty}}</td><td class="num">{{formatCurrency rate "INR"}}</td><td class="num">{{formatCurrency amount "INR"}}</td></tr>
      {{/each}}
    </tbody>
  </table>
  <p class="num">Subtotal {{formatCurrency invoice.subtotal "INR"}}<br>CGST 2.5% {{formatCurrency invoice.cgst "INR"}}<br>SGST 2.5% {{formatCurrency invoice.sgst "INR"}}</p>
  <p class="total">Total {{formatCurrency invoice.total "INR"}}</p>
</div>

<style>
  @page { size: A4; margin: 18mm; }
  body { font-family: Arial, Helvetica, sans-serif; color: #17181c; font-size: 12px; }
  h1 { font-size: 22px; letter-spacing: 2px; margin: 0; }
  .muted { color: #5a5c63; }
  .head { display: flex; justify-content: space-between; margin-bottom: 24px; }
  table.items { width: 100%; border-collapse: collapse; margin-top: 16px; }
  table.items th { text-align: left; font-weight: normal; color: #5a5c63; border-bottom: 1.5px solid #17181c; padding: 6px 0; }
  table.items td { padding: 8px 0; border-bottom: 1px solid #ece9e2; }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  .total { margin-top: 12px; text-align: right; font-size: 15px; font-weight: bold; }

</style>

Sample data (JSON)

{
  "company": {
    "name": "Kestrel Foods Pvt Ltd",
    "city": "Bengaluru, Karnataka",
    "gstin": "29ABCDE1234F1Z5"
  },
  "customer": {
    "name": "Priya Menon",
    "gstin": "29PQRSX5678K1Z2"
  },
  "invoice": {
    "number": "INV-2026-0142",
    "date": "2026-09-28",
    "subtotal": 47050,
    "cgst": 1176.25,
    "sgst": 1176.25,
    "total": 49402.5
  },
  "items": [
    {
      "name": "Basmati Rice 5 kg",
      "hsn": "1006",
      "qty": 40,
      "rate": 742,
      "amount": 29680
    },
    {
      "name": "Toor Dal 1 kg",
      "hsn": "0713",
      "qty": 60,
      "rate": 168,
      "amount": 10080
    },
    {
      "name": "Groundnut Oil 1 L",
      "hsn": "1508",
      "qty": 30,
      "rate": 243,
      "amount": 7290
    }
  ]
}

More templates like this