> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tipar.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Invoice

> A complete, multi-section invoice — header, two address blocks, a line-item table, totals, and a page-number footer.

A full invoice, broken down. Copy the `template` and `data` below into [`POST /generate`](/api-reference/generate) (or the [playground](https://tipar.dev)) and it renders as-is. Then swap in your own data shape.

It exercises most of the language: a `row` header, side-by-side address `column`s, a `forEach` line-item `table`, a totals block, and a [`richText` page-number footer](/templates/headers-footers#page-numbers).

## Template

```json theme={"dark"}
{
  "page": {
    "size": "A4",
    "margin": 30,
    "defaultTextStyle": { "fontSize": 10 },
    "header": {
      "type": "row",
      "items": [
        { "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
          { "type": "text", "value": "{{brand.name}}", "style": { "fontSize": 18, "bold": true } },
          { "type": "text", "value": "{{brand.tagline}}", "style": { "fontSize": 9, "color": "grey.darken1" } }
        ] } },
        { "size": { "kind": "constant", "width": 180 }, "child": { "type": "column", "items": [
          { "type": "text", "value": "INVOICE", "style": { "fontSize": 20, "bold": true }, "align": "right" },
          { "type": "text", "value": "{{invoice.number}}", "style": { "fontSize": 10, "color": "grey.darken2" }, "align": "right" },
          { "type": "text", "value": "Issued: {{invoice.issuedAt}}", "style": { "fontSize": 9 }, "align": "right" }
        ] } }
      ]
    },
    "content": {
      "type": "column",
      "spacing": 8,
      "items": [
        { "type": "row", "items": [
          { "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
            { "type": "text", "value": "Bill to", "style": { "fontSize": 9, "color": "grey.darken1" } },
            { "type": "text", "value": "{{invoice.billTo.name}}", "style": { "bold": true } },
            { "type": "text", "value": "{{invoice.billTo.address1}}" },
            { "type": "text", "value": "{{invoice.billTo.address2}}" },
            { "type": "text", "value": "{{invoice.billTo.vat}}", "style": { "fontSize": 9 } }
          ] } },
          { "size": { "kind": "relative", "weight": 1 }, "child": { "type": "column", "items": [
            { "type": "text", "value": "Pay to", "style": { "fontSize": 9, "color": "grey.darken1" }, "align": "right" },
            { "type": "text", "value": "{{invoice.payTo.name}}", "style": { "bold": true }, "align": "right" },
            { "type": "text", "value": "{{invoice.payTo.iban}}", "align": "right" },
            { "type": "text", "value": "{{invoice.payTo.stripe}}", "style": { "fontSize": 9 }, "align": "right" }
          ] } }
        ] },
        {
          "type": "table",
          "columns": [
            { "kind": "relative", "weight": 5 },
            { "kind": "relative", "weight": 1 },
            { "kind": "relative", "weight": 2 },
            { "kind": "relative", "weight": 2 }
          ],
          "header": { "row": [
            { "child": { "type": "text", "value": "Description", "style": { "semiBold": true, "fontSize": 9 } }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 4 },
            { "child": { "type": "text", "value": "Qty", "style": { "semiBold": true, "fontSize": 9 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 4 },
            { "child": { "type": "text", "value": "Unit price", "style": { "semiBold": true, "fontSize": 9 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 4 },
            { "child": { "type": "text", "value": "Line total", "style": { "semiBold": true, "fontSize": 9 }, "align": "right" }, "border": { "bottom": 1, "color": "grey.darken1" }, "padding": 4 }
          ] },
          "body": {
            "forEach": "invoice.lines",
            "row": [
              { "child": { "type": "text", "value": "{{item.description}}" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 3 },
              { "child": { "type": "text", "value": "{{item.qty}}", "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 3 },
              { "child": { "type": "text", "value": "{{item.unitPrice}}", "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 3 },
              { "child": { "type": "text", "value": "{{item.lineTotal}}", "align": "right" }, "border": { "bottom": 1, "color": "grey.lighten2" }, "padding": 3 }
            ]
          }
        },
        { "type": "column", "items": [
          { "type": "text", "value": "Subtotal: {{invoice.subtotal}} EUR", "align": "right" },
          { "type": "text", "value": "VAT ({{invoice.vatRate}}): {{invoice.vat}} EUR", "align": "right" },
          { "type": "text", "value": "Total: {{invoice.total}} EUR", "style": { "bold": true, "fontSize": 12 }, "align": "right" }
        ] }
      ]
    },
    "footer": {
      "type": "richText",
      "align": "center",
      "spans": [
        { "value": "Page ", "style": { "fontSize": 9, "color": "grey.darken1" } },
        { "pageNumber": true },
        { "value": " of ", "style": { "fontSize": 9, "color": "grey.darken1" } },
        { "totalPages": true }
      ]
    }
  }
}
```

## Data

```json theme={"dark"}
{
  "brand": { "name": "Tipar", "tagline": "api.tipar.dev" },
  "invoice": {
    "number": "INV-001",
    "issuedAt": "2026-05-13",
    "vatRate": "19%",
    "subtotal": "116.91",
    "vat": "22.21",
    "total": "139.12",
    "billTo": {
      "name": "Acme Widgets SRL",
      "address1": "Str. Exemplu 12, Bl. A1",
      "address2": "Cluj-Napoca, 400000, Romania",
      "vat": "VAT: RO12345678"
    },
    "payTo": {
      "name": "Tipar SRL",
      "iban": "IBAN: RO00 TIPAR 0000 0000 0000",
      "stripe": "Stripe: cs_test_xxx"
    },
    "lines": [
      { "description": "API access — Pro plan, May 2026", "qty": 1, "unitPrice": "19.00", "lineTotal": "19.00" },
      { "description": "Overage: additional 250 documents", "qty": 1, "unitPrice": "4.75", "lineTotal": "4.75" },
      { "description": "Premium template pack — Invoices EU", "qty": 1, "unitPrice": "29.00", "lineTotal": "29.00" },
      { "description": "Priority support add-on (monthly)", "qty": 1, "unitPrice": "15.00", "lineTotal": "15.00" },
      { "description": "Discount: founding-customer credit", "qty": 1, "unitPrice": "-10.00", "lineTotal": "-10.00" }
    ]
  }
}
```

## How it's built

<Steps>
  <Step title="Header — a two-cell row">
    A [`row`](/templates/layout#row) splits into a flexible left cell (brand) and a fixed 180 pt right cell (invoice metadata, right-aligned). Because `header` sits on `page`, it repeats if the invoice runs to a second page.
  </Step>

  <Step title="Addresses — two columns side by side">
    Another `row` of two equal `relative` cells, each a [`column`](/templates/layout#column) of text. The right one is right-aligned so the two blocks frame the page.
  </Step>

  <Step title="Line items — a forEach table">
    The [`table`](/templates/tables) has four columns. Its `body.forEach` is `"invoice.lines"`, so it renders one row per line item, with `{{item.…}}` pulling each line's fields. A heavier rule under the header, a hairline under each row.
  </Step>

  <Step title="Totals — plain text, pre-computed">
    Subtotal, VAT, and total are ordinary right-aligned `text` nodes. Tipar does no arithmetic — `subtotal`, `vat`, and `total` arrive already computed and formatted in `data`. See [why](/templates/overview#two-rules).
  </Step>

  <Step title="Footer — page numbers">
    A [`richText`](/templates/text#richtext) footer prints `Page X of Y` using the `pageNumber` and `totalPages` spans, centered.
  </Step>
</Steps>

<Tip>
  Add more entries to `invoice.lines` and the table grows; overflow onto a second page paginates automatically, re-drawing the header row and incrementing the footer's page count.
</Tip>

<Card title="More templates" icon="grip" href="/examples/gallery">
  Receipt, certificate, contract, and a multi-page report.
</Card>