Classic Invoice
Formal navy-boxed invoice with bordered address blocks, itemised table and totals panel. Traditional B2B look.
DSL source
The whole template. Learn the language in the template DSL guide.
const cols = [
["Description", "1fr"],
["Qty", "auto", "right"],
["Unit", "auto", "center"],
["Unit Price", "auto", "right"],
["Amount", "auto", "right"],
];
const template = doc(
{ size: "A4", title: "Invoice {{invoiceNumber}}", padding: [28, 32, 28, 32] },
// Classic header bar
hdr(
r({ "border": [0, 0, 2, 0], "border-color": "#1a1a1a", "padding": [0, 0, 8, 0] },
col("65%",
s({ "font-family": "NotoSans", "font-size": 22, "font-weight": "bold", "color": "#1a1a1a" }, "INVOICE"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#555", "margin": [2, 0, 0, 0] }, "{{vendor.name}}"),
),
col("35%", { align: "right" },
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333" }, "Invoice No."),
s({ "font-family": "NotoSans", "font-size": 13, "font-weight": "bold", "color": "#1a1a1a" }, "{{invoiceNumber}}"),
),
),
),
gap(8),
// Meta grid: invoice details + vendor block
r(
col("58%",
s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555", "margin": [0, 0, 3, 0] }, "REMIT TO"),
s({ "font-family": "NotoSans", "font-size": 10, "font-weight": "bold", "color": "#1a1a1a" }, "{{vendor.name}}"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "line-height": 1.35, "margin": [1, 0, 0, 0] }, "{{vendor.address}}"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "margin": [2, 0, 0, 0] }, "Tel: {{vendor.phone}} • {{vendor.email}}"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333" }, "{{vendor.website}} • {{vendor.taxId}}"),
),
col("42%", { "border": [1, 1, 1, 1], "border-color": "#1a1a1a", "padding": [8, 10, 8, 10] },
r(
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "ISSUE DATE")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "color": "#1a1a1a" }, "{{date}}")),
),
r({ "margin": [3, 0, 0, 0] },
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "DUE DATE")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "font-weight": "bold", "color": "#1a1a1a" }, "{{dueDate}}")),
),
r({ "margin": [3, 0, 0, 0] },
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "TERMS")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "color": "#1a1a1a" }, "{{paymentTerms}}")),
),
r({ "margin": [3, 0, 0, 0] },
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "P.O. NUMBER")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "color": "#1a1a1a" }, "{{poNumber}}")),
),
r({ "margin": [3, 0, 0, 0] },
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "CURRENCY")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "color": "#1a1a1a" }, "{{currency}}")),
),
r({ "margin": [3, 0, 0, 0] },
col("50%", s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555" }, "ACCOUNT")),
col("50%", { align: "right" }, s({ "font-family": "NotoSans", "font-size": 9, "color": "#1a1a1a" }, "{{customer.accountNumber}}")),
),
),
),
gap(10),
// Bill To block
r({ "border": [1, 1, 1, 1], "border-color": "#1a1a1a", "padding": [8, 10, 8, 10] },
col("100%",
s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#555", "margin": [0, 0, 3, 0] }, "BILL TO"),
s({ "font-family": "NotoSans", "font-size": 10, "font-weight": "bold", "color": "#1a1a1a" }, "{{customer.name}}"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "line-height": 1.35, "margin": [1, 0, 0, 0] }, "{{customer.address}}"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "margin": [2, 0, 0, 0] }, "Attn: {{customer.contactName}} • {{customer.email}}"),
),
),
gap(10),
// Line items table
table(
cols,
"item in items",
[
["{{item.description}}", "1fr"],
["{{item.qty}}", "auto", "right"],
["{{item.unit}}", "auto", "center"],
["${{item.unitPrice}}", "auto", "right"],
["${{item.total}}", "auto", "right"],
],
),
// Totals (aligned to table grid)
totals(
[
["Subtotal", "${{subtotal}}"],
["{{discountLabel}}", "−${{discountAmount}}"],
["Taxable amount", "${{taxableAmount}}"],
["{{taxLabel}}", "${{taxAmount}}"],
["TOTAL ({{currency}})", "${{total}}", true],
["Amount paid", "−${{amountPaid}}"],
["BALANCE DUE", "${{balanceDue}}", true],
],
cols,
),
gap(10),
// Payment instructions + scan-to-pay QR
r({ "border": [1, 1, 1, 1], "border-color": "#1a1a1a", "padding": [8, 10, 8, 10] },
col("78%",
s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#1a1a1a", "margin": [0, 0, 3, 0] }, "PAYMENT INSTRUCTIONS"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "line-height": 1.4 }, "{{paymentInstructions}}"),
),
col("22%", { align: "right" },
qr("{{payment.url}}", { ecc: "M", size: 80, alt: "Scan to pay invoice {{invoiceNumber}}" }),
s({ "font-family": "NotoSans", "font-size": 7, "color": "#555", "margin": [2, 0, 0, 0] }, "Scan to pay"),
),
),
gap(8),
// Notes
r({ "padding": [6, 10, 6, 10], "background-color": "#f4f1ea", "border": [1, 1, 1, 1], "border-color": "#cfc9bb" },
col("100%",
s({ "font-family": "NotoSans", "font-size": 8, "font-weight": "bold", "color": "#1a1a1a", "margin": [0, 0, 2, 0] }, "NOTES"),
s({ "font-family": "NotoSans", "font-size": 9, "color": "#333", "line-height": 1.4, "font-style": "italic" }, "{{notes}}"),
),
),
gap(10),
r({ align: "center" },
col("100%", { align: "center" },
s({ "font-family": "NotoSans", "font-size": 9, "font-style": "italic", "color": "#555" }, "Thank you for your business."),
),
),
ftrPages("{{vendor.name}} • {{vendor.website}}"),
);
const sampleData = {
invoiceNumber: "INV-2026-00417",
poNumber: "PO-RIV-88421",
date: "18 April 2026",
dueDate: "18 May 2026",
paymentTerms: "Net 30",
currency: "USD",
vendor: {
name: "TechStar Solutions, Inc.",
address: "500 Innovation Drive, Suite 200\nSan Jose, CA 95110\nUnited States",
phone: "(408) 555-0142",
email: "billing@techstar.example.com",
website: "techstar.example.com",
taxId: "EIN 84-2913557",
},
customer: {
name: "Riverside Manufacturing Holdings, LLC",
address: "1200 Industrial Boulevard, Building C\nPortland, OR 97201\nUnited States",
contactName: "Sarah Chen",
email: "sarah.chen@riverside.example.com",
accountNumber: "CUST-40218",
},
items: [
{
description: "Enterprise License — Annual subscription\nUnlimited seats, SSO included, 99.95% SLA",
qty: 1,
unit: "license",
unitPrice: "12,000.00",
total: "12,000.00",
},
{
description: "Implementation & Setup Services\nOn-site deployment, data migration, integration testing",
qty: 40,
unit: "hours",
unitPrice: "175.00",
total: "7,000.00",
},
{
description: "Staff Training (full-day sessions, up to 20 attendees)",
qty: 6,
unit: "sessions",
unitPrice: "500.00",
total: "3,000.00",
},
{
description: "Priority Support — Annual, 24/7 coverage with 1-hour response",
qty: 1,
unit: "year",
unitPrice: "3,100.00",
total: "3,100.00",
},
{
description: "Custom Report Builder add-on",
qty: 2,
unit: "modules",
unitPrice: "850.00",
total: "1,700.00",
},
{
description: "Data Retention Extension (7-year compliance tier)",
qty: 1,
unit: "year",
unitPrice: "1,250.00",
total: "1,250.00",
},
],
subtotal: "28,050.00",
discountLabel: "Early renewal discount (5%)",
discountAmount: "1,402.50",
taxableAmount: "26,647.50",
taxRate: 0.0875,
taxLabel: "Sales Tax (CA 8.75%)",
taxAmount: "2,331.66",
total: "28,979.16",
amountPaid: "5,000.00",
balanceDue: "23,979.16",
notes: "Payment terms: Net 30. Late payments are subject to a 1.5% monthly interest charge. Please reference invoice number INV-2026-00417 on all remittances. Checks payable to TechStar Solutions, Inc.",
paymentInstructions: "Wire: Pacific Commerce Bank, Routing 121000248, Account 8842-091-337\nACH: Same routing/account (preferred for domestic transfers)\nOnline: https://pay.techstar.example.com/inv/00417",
payment: { url: "https://pay.techstar.example.com/inv/00417" },
};Sample data
{
"invoiceNumber": "INV-2026-00417",
"poNumber": "PO-RIV-88421",
"date": "18 April 2026",
"dueDate": "18 May 2026",
"paymentTerms": "Net 30",
"currency": "USD",
"vendor": {
"name": "TechStar Solutions, Inc.",
"address": "500 Innovation Drive, Suite 200\nSan Jose, CA 95110\nUnited States",
"phone": "(408) 555-0142",
"email": "billing@techstar.example.com",
"website": "techstar.example.com",
"taxId": "EIN 84-2913557"
},
"customer": {
"name": "Riverside Manufacturing Holdings, LLC",
"address": "1200 Industrial Boulevard, Building C\nPortland, OR 97201\nUnited States",
"contactName": "Sarah Chen",
"email": "sarah.chen@riverside.example.com",
"accountNumber": "CUST-40218"
},
"items": [
{
"description": "Enterprise License — Annual subscription\nUnlimited seats, SSO included, 99.95% SLA",
"qty": 1,
"unit": "license",
"unitPrice": "12,000.00",
"total": "12,000.00"
},
{
"description": "Implementation & Setup Services\nOn-site deployment, data migration, integration testing",
"qty": 40,
"unit": "hours",
"unitPrice": "175.00",
"total": "7,000.00"
},
{
"description": "Staff Training (full-day sessions, up to 20 attendees)",
"qty": 6,
"unit": "sessions",
"unitPrice": "500.00",
"total": "3,000.00"
},
{
"description": "Priority Support — Annual, 24/7 coverage with 1-hour response",
"qty": 1,
"unit": "year",
"unitPrice": "3,100.00",
"total": "3,100.00"
},
{
"description": "Custom Report Builder add-on",
"qty": 2,
"unit": "modules",
"unitPrice": "850.00",
"total": "1,700.00"
},
{
"description": "Data Retention Extension (7-year compliance tier)",
"qty": 1,
"unit": "year",
"unitPrice": "1,250.00",
"total": "1,250.00"
}
],
"subtotal": "28,050.00",
"discountLabel": "Early renewal discount (5%)",
"discountAmount": "1,402.50",
"taxableAmount": "26,647.50",
"taxRate": 0.0875,
"taxLabel": "Sales Tax (CA 8.75%)",
"taxAmount": "2,331.66",
"total": "28,979.16",
"amountPaid": "5,000.00",
"balanceDue": "23,979.16",
"notes": "Payment terms: Net 30. Late payments are subject to a 1.5% monthly interest charge. Please reference invoice number INV-2026-00417 on all remittances. Checks payable to TechStar Solutions, Inc.",
"paymentInstructions": "Wire: Pacific Commerce Bank, Routing 121000248, Account 8842-091-337\nACH: Same routing/account (preferred for domestic transfers)\nOnline: https://pay.techstar.example.com/inv/00417",
"payment": {
"url": "https://pay.techstar.example.com/inv/00417"
}
}Render it with your data
Any API key can render this template by its ID. This call uses the sample data; add a data object to use your own. See the API reference.
curl -X POST https://makespdf.com/api/v1/render \
-H "Authorization: Bearer $MAKESPDF_API_KEY" \
-H "Content-Type: application/json" \
-d '{"templateId": "invoice-classic"}' \
-o output.pdf