Free HTML invoice template

A clean, print-ready invoice template in plain HTML and CSS: no framework, no external assets, and A4 page rules built in. Use it as-is, or as a starting point for your app's invoices.

Download HTML See it as a PDF

The code

<!doctype html><html><head><meta charset="utf-8"><title>Invoice INV-2026-0042</title>
<style>
@page { size: A4; margin: 16mm }
* { box-sizing: border-box }
body { font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif; color: #1f2937; font-size: 13px; margin: 0; padding: 8px }
.top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px }
h1 { font-size: 30px; letter-spacing: 2px; margin: 0 0 6px; color: #4f46e5 }
.meta { color: #6b7280; line-height: 1.7 }
.meta b { color: #111827 }
.logo { max-height: 70px; max-width: 220px }
.parties { display: flex; gap: 40px; margin-bottom: 28px }
.parties div { flex: 1; line-height: 1.55 }
.label { text-transform: uppercase; font-size: 10px; letter-spacing: 1px; color: #6b7280; margin-bottom: 4px; font-weight: 600 }
table { width: 100%; border-collapse: collapse }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: 8px 6px }
td { padding: 10px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: top }
.r { text-align: right; white-space: nowrap }
tr { break-inside: avoid }
.sum { margin-left: auto; width: 280px; margin-top: 16px }
.sum div { display: flex; justify-content: space-between; padding: 5px 6px }
.sum .grand { border-top: 2px solid #4f46e5; margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 700 }
.notes { margin-top: 36px; color: #374151; line-height: 1.55; break-inside: avoid }
</style></head><body>
<div class="top">
  <div>
    <h1>INVOICE</h1>
    <div class="meta">
      <div><b>No.</b> INV-2026-0042</div>
      <div><b>Date:</b> Oct 18, 2026</div>
      <div><b>Due:</b> Nov 1, 2026</div>
    </div>
  </div>
</div>
<div class="parties">
  <div><div class="label">From</div>Acme Studio LLC<br>500 Market St<br>San Francisco, CA</div>
  <div><div class="label">Bill to</div>Globex Corp<br>Accounts Payable<br>billing@globex.com</div>
</div>
<table>
  <thead><tr><th>Description</th><th class="r">Qty</th><th class="r">Unit price</th><th class="r">Amount</th></tr></thead>
  <tbody>
  <tr><td>Website redesign</td><td class="r">1</td><td class="r">$4,800.00</td><td class="r">$4,800.00</td></tr><tr><td>Hosting (monthly)</td><td class="r">12</td><td class="r">$25.00</td><td class="r">$300.00</td></tr>
  </tbody>
</table>
<div class="sum">
  <div><span>Subtotal</span><span>$5,100.00</span></div>
  <div><span>Discount</span><span>−$200.00</span></div>
  <div><span>Tax (8.5%)</span><span>$416.50</span></div>
  <div class="grand"><span>Total due</span><span>$5,316.50</span></div>
</div>
<div class="notes"><div class="label">Notes</div>Pay by bank transfer within 14 days.<br>IBAN: US00 0000 0000 0000</div>
</body></html>

Why it prints well

@page { size: A4; margin: 16mm } sets the paper size and margins in CSS.
Table rows and the notes block use break-inside: avoid, so they never split across pages.
It uses only system fonts and inline CSS, so nothing has to load before printing.
All layout is flexbox and tables, which print the same way in every Chromium-based renderer.

Convert it to PDF from your code

Fill the template with your data (any templating language works: Handlebars, Jinja, Blade, ERB, JSX), then send the HTML to the PDFLoom API:

curl https://pdfloom.dev/v1/pdf \
  -H "Authorization: Bearer $PDFLOOM_KEY" \
  -H "Content-Type: application/json" \
  -d "$(jq -Rs '{html: ., preferCSSPageSize: true}' invoice-template.html)" \
  -o invoice.pdf

If you don't want to maintain a template at all, the invoice API takes JSON line items and returns this same design as a PDF. Prefer a form? Use the free invoice generator.