Compact Invoice
Dense grid optimised for multi-item B2B billing: smaller type, four-column meta strip, notes + payment instructions side-by-side.
DSL source
The whole template. Learn the language in the template DSL guide.
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: [24, 30, 24, 30] },
// ===== HEADER BAND =====
r({ "background-color": "#0F3D5C", padding: [12, 14, 12, 14], "border-radius": 3 },
col("60%",
s({ "font-size": 18, "font-weight": "bold", color: "#FFFFFF" }, "{{vendor.name}}"),
s({ "font-size": 8.5, color: "#B8D4E6", "line-height": 1.35, margin: [2, 0, 0, 0] }, "{{vendor.address}}"),
s({ "font-size": 8.5, color: "#B8D4E6", margin: [2, 0, 0, 0] }, "{{vendor.phone}} • {{vendor.email}} • {{vendor.website}}"),
s({ "font-size": 8, color: "#8FB4CC", margin: [1, 0, 0, 0] }, "{{vendor.taxId}}"),
),
col("40%", { align: "right" },
s({ "font-size": 22, "font-weight": "bold", color: "#FFFFFF", align: "right" }, "INVOICE"),
s({ "font-size": 9, color: "#B8D4E6", align: "right", margin: [2, 0, 0, 0] }, "{{invoiceNumber}}"),
s({ "font-size": 8.5, color: "#8FB4CC", align: "right", margin: [1, 0, 0, 0] }, "PO: {{poNumber}}"),
),
),
gap(10),
// ===== META + BILL TO =====
r(
col("52%",
s({ "font-size": 7.5, "font-weight": "bold", color: "#7A8A95", margin: [0, 0, 3, 0] }, "BILL TO"),
s({ "font-size": 10, "font-weight": "bold", color: "#1A1A1A" }, "{{customer.name}}"),
s({ "font-size": 8.5, color: "#444", "line-height": 1.35, margin: [2, 0, 0, 0] }, "{{customer.address}}"),
s({ "font-size": 8.5, color: "#444", margin: [3, 0, 0, 0] }, "Attn: {{customer.contactName}}"),
s({ "font-size": 8.5, color: "#444" }, "{{customer.email}}"),
s({ "font-size": 8, color: "#7A8A95", margin: [1, 0, 0, 0] }, "Account: {{customer.accountNumber}}"),
),
col("48%",
r({ "background-color": "#F5F7F9", padding: [8, 10, 8, 10], "border-radius": 2 },
col("100%",
r({ margin: [0, 0, 3, 0] },
col("45%", s({ "font-size": 8, color: "#7A8A95" }, "Invoice Date")),
col("55%", s({ "font-size": 8.5, "font-weight": "bold", color: "#1A1A1A", align: "right" }, "{{date}}")),
),
r({ margin: [0, 0, 3, 0] },
col("45%", s({ "font-size": 8, color: "#7A8A95" }, "Due Date")),
col("55%", s({ "font-size": 8.5, "font-weight": "bold", color: "#C73E1D", align: "right" }, "{{dueDate}}")),
),
r({ margin: [0, 0, 3, 0] },
col("45%", s({ "font-size": 8, color: "#7A8A95" }, "Terms")),
col("55%", s({ "font-size": 8.5, color: "#1A1A1A", align: "right" }, "{{paymentTerms}}")),
),
r(
col("45%", s({ "font-size": 8, color: "#7A8A95" }, "Currency")),
col("55%", s({ "font-size": 8.5, color: "#1A1A1A", align: "right" }, "{{currency}}")),
),
),
),
),
),
gap(10),
// ===== 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"],
],
),
// ===== TOTALS =====
totals([
["Subtotal", "${{subtotal}}"],
["{{discountLabel}}", "-${{discountAmount}}"],
["Taxable amount", "${{taxableAmount}}"],
["{{taxLabel}}", "${{taxAmount}}"],
["Total", "${{total}} {{currency}}", true],
["Amount paid", "-${{amountPaid}}"],
], cols),
// ===== BALANCE DUE BAR =====
gap(4),
r({ "background-color": "#0F3D5C", padding: [10, 14, 10, 14], "border-radius": 3 },
col("55%",
s({ "font-size": 9, color: "#B8D4E6" }, "BALANCE DUE"),
s({ "font-size": 8, color: "#8FB4CC", margin: [1, 0, 0, 0] }, "Payable by {{dueDate}}"),
),
col("45%",
s({ "font-size": 18, "font-weight": "bold", color: "#FFFFFF", align: "right" }, "${{balanceDue}} {{currency}}"),
),
),
gap(10),
// ===== PAYMENT + NOTES + SCAN-TO-PAY QR =====
r(
col("42%", { padding: [0, 8, 0, 0] },
s({ "font-size": 8, "font-weight": "bold", color: "#0F3D5C", margin: [0, 0, 3, 0] }, "PAYMENT INSTRUCTIONS"),
s({ "font-size": 8.5, color: "#333", "line-height": 1.45 }, "{{paymentInstructions}}"),
),
col("42%", { padding: [0, 8, 0, 8] },
s({ "font-size": 8, "font-weight": "bold", color: "#0F3D5C", margin: [0, 0, 3, 0] }, "NOTES"),
s({ "font-size": 8.5, color: "#333", "line-height": 1.45 }, "{{notes}}"),
),
col("16%", { align: "right" },
qr("{{payment.url}}", { ecc: "M", size: 64, alt: "Scan to pay invoice {{invoiceNumber}}" }),
s({ "font-size": 7, color: "#555", margin: [2, 0, 0, 0] }, "Scan to pay"),
),
),
ftrPages("{{vendor.name}} — {{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-compact"}' \
-o output.pdf