Modern Invoice
Editorial layout with coral accent, generous whitespace, right-aligned totals column and highlighted balance-due card.
DSL source
The whole template. Learn the language in the template DSL guide.
const accent = "#0EA5E9";
const cols = [
["Description", "1fr"],
["Qty", "auto", "right"],
["Unit", "auto"],
["Unit Price", "auto", "right"],
["Amount", "auto", "right"],
];
const template = doc(
{
size: "A4",
title: "Invoice {{invoiceNumber}}",
padding: [28, 32, 28, 32],
styles: {
".brand-bar": { "background-color": accent, height: 6, margin: [0, 0, 14, 0] },
".invoice-title": { "font-size": 22, "font-weight": 700, color: "#0F172A" },
".vendor-name": { "font-size": 12, "font-weight": 700, color: "#0F172A" },
".meta-label": { "font-size": 8, color: "#64748B", "font-weight": 600 },
".meta-value": { "font-size": 10, color: "#0F172A", "font-weight": 600 },
".party-label": {
"font-size": 8,
color: "#64748B",
"font-weight": 700,
margin: [0, 0, 3, 0],
},
".party-name": { "font-size": 10.5, "font-weight": 700, color: "#0F172A" },
".party-text": { "font-size": 9, color: "#334155", "line-height": 1.35 },
".balance-box": {
"background-color": "#0F172A",
padding: [10, 14, 10, 14],
"border-radius": 4,
},
".balance-label": { "font-size": 8, color: "#94A3B8", "font-weight": 600 },
".balance-value": { "font-size": 16, color: "#FFFFFF", "font-weight": 700 },
".section-title": {
"font-size": 9,
"font-weight": 700,
color: accent,
margin: [0, 0, 4, 0],
},
".notes-text": { "font-size": 8.5, color: "#475569", "line-height": 1.4 },
".pay-text": {
"font-size": 8.5,
color: "#334155",
"line-height": 1.4,
"font-family": "Cousine",
},
},
},
// Top brand bar
r(".brand-bar"),
// Header row: Vendor identity + Invoice title/meta
r(
col(
"58%",
s(".invoice-title", "INVOICE"),
gap(4),
s(".vendor-name", "{{vendor.name}}"),
s(".party-text", "{{vendor.address}}"),
gap(2),
s(".party-text", "{{vendor.phone}} • {{vendor.email}}"),
s(".party-text", "{{vendor.website}} • {{vendor.taxId}}"),
),
col(
"42%",
r(
col("50%", s(".meta-label", "INVOICE #")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{invoiceNumber}}")),
),
gap(3),
r(
col("50%", s(".meta-label", "PO NUMBER")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{poNumber}}")),
),
gap(3),
r(
col("50%", s(".meta-label", "ISSUE DATE")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{date}}")),
),
gap(3),
r(
col("50%", s(".meta-label", "DUE DATE")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{dueDate}}")),
),
gap(3),
r(
col("50%", s(".meta-label", "TERMS")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{paymentTerms}}")),
),
gap(3),
r(
col("50%", s(".meta-label", "CURRENCY")),
col({ width: "50%", align: "right" }, s(".meta-value", "{{currency}}")),
),
),
),
gap(12),
hr(0, "#E2E8F0"),
gap(10),
// Bill To + Balance Due highlight
r(
col(
"60%",
s(".party-label", "BILL TO"),
s(".party-name", "{{customer.name}}"),
gap(2),
s(".party-text", "{{customer.address}}"),
gap(2),
s(".party-text", "Attn: {{customer.contactName}} • {{customer.email}}"),
s(".party-text", "Account: {{customer.accountNumber}}"),
),
col("3%"),
col(
"37%",
col(
".balance-box",
s(".balance-label", "BALANCE DUE"),
gap(2),
s(".balance-value", "${{balanceDue}} {{currency}}"),
gap(3),
s({ "font-size": 8, color: "#94A3B8" }, "Due by {{dueDate}}"),
),
),
),
gap(12),
// Line items
table(cols, "item in items", [
["{{item.description}}", "1fr"],
["{{item.qty}}", "auto", "right"],
["{{item.unit}}", "auto"],
["${{item.unitPrice}}", "auto", "right"],
["${{item.total}}", "auto", "right"],
]),
gap(6),
// Totals
totals(
[
["Subtotal", "${{subtotal}}"],
["{{discountLabel}}", "-${{discountAmount}}"],
["Taxable amount", "${{taxableAmount}}"],
["{{taxLabel}}", "${{taxAmount}}"],
["Total", "${{total}}", true],
["Amount paid", "-${{amountPaid}}"],
["Balance due ({{currency}})", "${{balanceDue}}", true],
],
cols,
),
gap(12),
hr(0, "#E2E8F0"),
gap(8),
// Payment instructions + notes + scan-to-pay QR
r(
col(
"42%",
s(".section-title", "PAYMENT INSTRUCTIONS"),
s(".pay-text", "{{paymentInstructions}}"),
),
col("4%"),
col(
"38%",
s(".section-title", "NOTES"),
s(".notes-text", "{{notes}}"),
),
col("4%"),
col(
"12%",
{ align: "right" },
qr("{{payment.url}}", { ecc: "M", size: 70, alt: "Scan to pay invoice {{invoiceNumber}}" }),
s({ "font-family": "NotoSans", "font-size": 7, "color": "#64748B", "margin": [2, 0, 0, 0] }, "Scan to pay"),
),
),
ftrPages("{{vendor.name}} • {{vendor.email}} • Invoice {{invoiceNumber}}"),
);
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-modern"}' \
-o output.pdf