thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Client invoice template HTML

This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.

Sign in to copyTry it
A white invoice with blue totals and a short line-item table
client-invoice/template.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 794px 1123px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 4px 10px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" style="width:794px;height:1123px;background:white">
<div data-thirds="text" style="left:56px;top:54px;width:370px;height:28px;font-size:20px;color:#0a46ff;font-weight:700;line-height:1.25">{{ business_name }}</div>
<div data-thirds="text" style="left:56px;top:108px;width:440px;height:66px;font-size:52px;color:#0b0b0b;font-weight:700;line-height:1.25">Invoice</div>
<div data-thirds="text" style="left:564px;top:114px;width:180px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Invoice number</div>
<div data-thirds="text" style="left:564px;top:140px;width:180px;height:30px;font-size:18px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ invoice_number }}</div>
<div data-thirds="text" style="left:564px;top:176px;width:180px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Issued</div>
<div data-thirds="text" style="left:564px;top:198px;width:180px;height:30px;font-size:16px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ issued_on|date }}</div>
<div data-thirds="box" style="left:56px;top:247px;width:682px;height:3px;background:#0a46ff"></div>
<div data-thirds="text" style="left:56px;top:283px;width:300px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">From</div>
<div data-thirds="text" style="left:56px;top:309px;width:315px;height:62px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25"><strong>{{ business_name }}</strong><br>{{ business_email }}</div>
<div data-thirds="text" style="left:416px;top:283px;width:300px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Bill to</div>
<div data-thirds="text" style="left:416px;top:309px;width:322px;height:62px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25"><strong>{{ client_name }}</strong><br>{{ client_email }}</div>
<table data-thirds="table" style="left:56px;top:415px;width:682px;font-size:16px;--head:#eaf0ff"><thead><tr><th>Description</th><th>Amount</th></tr></thead><tbody>{% for item in items %}<tr><td>{{ item.description }}</td><td>{{ item.amount|currency }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" style="left:426px;top:817px;width:170px;height:24px;font-size:17px;color:#575f6d;font-weight:400;line-height:1.25">Subtotal</div>
<div data-thirds="text" style="left:590px;top:817px;width:148px;height:24px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25;text-align:right">{{ subtotal|currency }}</div>
<div data-thirds="text" style="left:426px;top:855px;width:170px;height:24px;font-size:17px;color:#575f6d;font-weight:400;line-height:1.25">Tax</div>
<div data-thirds="text" style="left:590px;top:855px;width:148px;height:24px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25;text-align:right">{{ tax|currency }}</div>
<div data-thirds="box" style="left:426px;top:899px;width:312px;height:2px;background:#0b0b0b"></div>
<div data-thirds="text" style="left:426px;top:919px;width:100px;height:40px;font-size:25px;color:#0b0b0b;font-weight:700;line-height:1.25">Total</div>
<div data-thirds="text" style="left:536px;top:919px;width:202px;height:40px;font-size:25px;color:#0b0b0b;font-weight:700;line-height:1.25;text-align:right">{{ total|currency }}</div>
<div data-thirds="text" style="left:56px;top:935px;width:300px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Payment terms</div>
<div data-thirds="text" style="left:56px;top:961px;width:338px;height:48px;font-size:15px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ payment_terms }}</div>
<div data-thirds="text" style="left:56px;top:1063px;width:682px;height:20px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.25">{{ payment_note }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

Change any of them, and the same HTML makes a new file.

Sample data
{
  "business_name": "Northline Studio",
  "business_email": "hello@northline.example",
  "client_name": "Fieldnote Labs",
  "client_email": "accounts@fieldnote.example",
  "invoice_number": "NS-1042",
  "issued_on": "2026-09-03",
  "items": [
    {
      "description": "Product launch design",
      "amount": 2400
    },
    {
      "description": "Campaign image set",
      "amount": 850
    }
  ],
  "subtotal": 3250,
  "tax": 650,
  "total": 3900,
  "payment_terms": "Due within 14 days",
  "payment_note": "Please use NS-1042 as the payment reference."
}