template + data pair renders as-is. The invoice has the fully annotated walk-through; these are here to copy and adapt.
Receipt
A compact point-of-sale receipt onLetter: centered store header, a small forEach item table, a total, and an italic thank-you footer.
{
"page": {
"size": "Letter",
"margin": 24,
"defaultTextStyle": { "fontSize": 11 },
"header": {
"type": "column",
"items": [
{ "type": "text", "value": "{{store.name}}", "style": { "fontSize": 16, "bold": true }, "align": "center" },
{ "type": "text", "value": "{{store.address}}", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "center" }
]
},
"content": {
"type": "column",
"spacing": 6,
"items": [
{ "type": "spacer", "size": 6 },
{ "type": "text", "value": "Receipt #{{receipt.number}} · {{receipt.issuedAt}}", "style": { "fontSize": 9, "color": "grey.darken1" } },
{
"type": "table",
"columns": [
{ "kind": "relative", "weight": 4 },
{ "kind": "relative", "weight": 1 },
{ "kind": "relative", "weight": 1 }
],
"header": { "row": [
{ "child": { "type": "text", "value": "Item", "style": { "semiBold": true, "fontSize": 9 } }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Qty", "style": { "semiBold": true, "fontSize": 9 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Price", "style": { "semiBold": true, "fontSize": 9 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 }
] },
"body": {
"forEach": "receipt.items",
"row": [
{ "child": { "type": "text", "value": "{{item.name}}" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.qty}}", "align": "right" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.price}}", "align": "right" }, "padding": 2 }
]
}
},
{ "type": "spacer", "size": 6 },
{ "type": "text", "value": "Total: {{receipt.total}} USD", "style": { "bold": true, "fontSize": 13 }, "align": "right" },
{ "type": "text", "value": "Payment: {{receipt.payment}}", "style": { "fontSize": 9, "color": "grey.darken2" }, "align": "right" }
]
},
"footer": {
"type": "text",
"value": "Thank you for your business.",
"style": { "fontSize": 9, "italic": true, "color": "grey.darken1" },
"align": "center"
}
}
}
Certificate
A centered, ceremonial layout — no table at all. It’s acolumn whose rhythm comes entirely from spacer nodes, with a three-cell row of signature blocks at the bottom. Note color: "indigo.darken3" (a palette token) on the title.
{
"page": {
"size": "Letter",
"margin": 64,
"defaultTextStyle": { "fontSize": 12 },
"content": {
"type": "column",
"items": [
{ "type": "spacer", "size": 40 },
{ "type": "text", "value": "{{issuer.name}}", "style": { "fontSize": 10, "color": "grey.darken1" }, "align": "center" },
{ "type": "spacer", "size": 12 },
{ "type": "text", "value": "CERTIFICATE OF COMPLETION", "style": { "fontSize": 28, "bold": true, "color": "indigo.darken3" }, "align": "center" },
{ "type": "spacer", "size": 30 },
{ "type": "text", "value": "This certifies that", "style": { "fontSize": 12, "italic": true, "color": "grey.darken2" }, "align": "center" },
{ "type": "spacer", "size": 16 },
{ "type": "text", "value": "{{recipient.name}}", "style": { "fontSize": 32, "bold": true }, "align": "center" },
{ "type": "spacer", "size": 16 },
{ "type": "text", "value": "has successfully completed", "style": { "fontSize": 12, "italic": true, "color": "grey.darken2" }, "align": "center" },
{ "type": "spacer", "size": 10 },
{ "type": "text", "value": "{{course.name}}", "style": { "fontSize": 18, "semiBold": true }, "align": "center" },
{ "type": "text", "value": "{{course.credits}} continuing-education credits", "style": { "fontSize": 10, "color": "grey.darken1" }, "align": "center" },
{ "type": "spacer", "size": 40 },
{
"type": "row",
"items": [
{ "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
{ "type": "text", "value": "Issued", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "center" },
{ "type": "text", "value": "{{issuedAt}}", "style": { "fontSize": 11 }, "align": "center" }
] } },
{ "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
{ "type": "text", "value": "Certificate ID", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "center" },
{ "type": "text", "value": "{{certificateId}}", "style": { "fontSize": 11 }, "align": "center" }
] } },
{ "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
{ "type": "text", "value": "Authorized signatory", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "center" },
{ "type": "text", "value": "{{signatory.name}}", "style": { "fontSize": 11, "italic": true }, "align": "center" }
] } }
]
}
]
}
}
}
Contract
A multi-clause legal document. Each clause is arichText node with a bold lead-in span ("3. Fees and payment. ") followed by a regular-weight body span — two styles in one paragraph. The footer carries party names and page numbers, and the whole thing paginates across several pages.
This is the structure (abbreviated to three clauses — the real document has fourteen; add more richText items the same way):
template
{
"page": {
"size": "A4",
"margin": 36,
"defaultTextStyle": { "fontSize": 10 },
"header": {
"type": "column",
"items": [
{ "type": "text", "value": "SERVICE AGREEMENT", "style": { "fontSize": 14, "bold": true }, "align": "center" },
{ "type": "text", "value": "Between {{contract.partyA.name}} and {{contract.partyB.name}}", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "center" },
{ "type": "spacer", "size": 6 }
]
},
"content": {
"type": "column",
"spacing": 8,
"items": [
{ "type": "text", "value": "This Service Agreement is entered into on {{contract.effectiveDate}} by and between {{contract.partyA.name}} (\"Provider\") and {{contract.partyB.name}} (\"Customer\")." },
{ "type": "richText", "spans": [
{ "value": "1. Term. ", "style": { "bold": true } },
{ "value": "This Agreement begins on {{contract.effectiveDate}} and continues for an initial term of {{contract.termMonths}} months unless earlier terminated, renewing automatically for successive terms of equal length." }
] },
{ "type": "richText", "spans": [
{ "value": "2. Fees and payment. ", "style": { "bold": true } },
{ "value": "Customer shall pay the fees set forth in the order form. All fees are non-refundable and exclusive of taxes." }
] },
{ "type": "richText", "spans": [
{ "value": "3. Governing law. ", "style": { "bold": true } },
{ "value": "This Agreement is governed by the laws of {{contract.governingLaw}}. Any dispute is subject to the exclusive jurisdiction of the courts in {{contract.venue}}." }
] },
{ "type": "spacer", "size": 18 },
{ "type": "text", "value": "Provider: {{contract.partyA.name}} · Signature: ____________________", "style": { "fontSize": 9 } },
{ "type": "text", "value": "Customer: {{contract.partyB.name}} · Signature: ____________________", "style": { "fontSize": 9 } }
]
},
"footer": {
"type": "richText",
"align": "center",
"spans": [
{ "value": "{{contract.partyA.name}} ↔ {{contract.partyB.name}} · Page ", "style": { "fontSize": 8, "color": "grey.darken1" } },
{ "pageNumber": true },
{ "value": " of ", "style": { "fontSize": 8, "color": "grey.darken1" } },
{ "totalPages": true }
]
}
}
}
data
{
"contract": {
"partyA": { "name": "Tipar SRL" },
"partyB": { "name": "Acme Widgets SRL" },
"effectiveDate": "2026-05-13",
"termMonths": 12,
"governingLaw": "Romania",
"venue": "Cluj-Napoca, Romania"
}
}
Multi-page report
A transaction statement with a six-column table. The point of this one is pagination: feed it enoughreport.entries and the table flows across pages, re-drawing its header row at the top of each, while the footer counts pages. You write the table once; Tipar handles the page breaks.
template
{
"page": {
"size": "A4",
"margin": 24,
"defaultTextStyle": { "fontSize": 9 },
"header": {
"type": "row",
"items": [
{ "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
{ "type": "text", "value": "{{report.title}}", "style": { "fontSize": 14, "bold": true } },
{ "type": "text", "value": "{{report.period}}", "style": { "fontSize": 9, "color": "grey.darken1" } }
] } },
{ "size": { "kind": "constant", "width": 160 }, "child": { "type": "column", "items": [
{ "type": "text", "value": "Account {{account.number}}", "style": { "fontSize": 9 }, "align": "right" },
{ "type": "text", "value": "{{account.name}}", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "right" },
{ "type": "text", "value": "Generated {{report.generatedAt}}", "style": { "fontSize": 8, "color": "grey.darken1" }, "align": "right" }
] } }
]
},
"content": {
"type": "column",
"spacing": 4,
"items": [
{ "type": "spacer", "size": 4 },
{
"type": "table",
"columns": [
{ "kind": "constant", "width": 64 },
{ "kind": "relative", "weight": 2 },
{ "kind": "relative", "weight": 5 },
{ "kind": "relative", "weight": 2 },
{ "kind": "relative", "weight": 2 },
{ "kind": "relative", "weight": 2 }
],
"header": { "row": [
{ "child": { "type": "text", "value": "Date", "style": { "semiBold": true, "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Reference", "style": { "semiBold": true, "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Description", "style": { "semiBold": true, "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Debit", "style": { "semiBold": true, "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Credit", "style": { "semiBold": true, "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 },
{ "child": { "type": "text", "value": "Balance", "style": { "semiBold": true, "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 3 }
] },
"body": {
"forEach": "report.entries",
"row": [
{ "child": { "type": "text", "value": "{{item.date}}", "style": { "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.reference}}", "style": { "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.description}}", "style": { "fontSize": 8 } }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.debit}}", "style": { "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.credit}}", "style": { "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 },
{ "child": { "type": "text", "value": "{{item.balance}}", "style": { "fontSize": 8 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 2 }
]
}
},
{ "type": "spacer", "size": 8 },
{ "type": "text", "value": "Closing balance: {{report.closingBalance}} EUR", "style": { "fontSize": 11, "bold": true }, "align": "right" }
]
},
"footer": {
"type": "richText",
"align": "center",
"spans": [
{ "value": "{{report.title}} · ", "style": { "fontSize": 8, "color": "grey.darken1" } },
{ "pageNumber": true },
{ "value": " / ", "style": { "fontSize": 8, "color": "grey.darken1" } },
{ "totalPages": true }
]
}
}
}
data
{
"report": {
"title": "Account statement",
"period": "1–31 May 2026",
"generatedAt": "2026-06-01",
"closingBalance": "4,512.80",
"entries": [
{ "date": "2026-05-02", "reference": "TX-1001", "description": "Opening balance", "debit": "", "credit": "", "balance": "3,900.00" },
{ "date": "2026-05-04", "reference": "TX-1002", "description": "Stripe payout", "debit": "", "credit": "612.80", "balance": "4,512.80" },
{ "date": "2026-05-09", "reference": "TX-1003", "description": "Refund — order 5521", "debit": "48.00", "credit": "", "balance": "4,464.80" },
{ "date": "2026-05-21", "reference": "TX-1004", "description": "Stripe payout", "debit": "", "credit": "48.00", "balance": "4,512.80" }
]
},
"account": { "number": "RO-00471", "name": "Tipar SRL" }
}
Add as many
entries as you like — the table flows onto new pages automatically. Request bodies must be strict JSON (no comments or trailing commas).Annotated invoice
The fully explained walk-through.
Template schema
Every field these examples use.