Component Tour

Every element type in one template, labelled and ready to take apart.

Open it and take it apart

Everything below is generated from the template itself, so it always matches what you get. Start from this template to open an editable copy.

What it teaches

What each of the 15 element types looks like
The two ways to iterate an array: a bound table vs a detail band
Which elements are superseded (table, page-break)
How the five band kinds stack into a document

The data you send

Pass this as your render payload. The field names come from the template's schema — rename them there and the tokens follow.

{
  "customerName": "Acme Corp",
  "issueDate": "2026-08-22",
  "products": [
    {
      "name": "Plan",
      "units": 12,
      "revenue": 1440
    },
    {
      "name": "Plan",
      "units": 12,
      "revenue": 1440
    }
  ],
  "lineItems": [
    {
      "description": "Onboarding",
      "amount": 250
    },
    {
      "description": "Onboarding",
      "amount": 250
    }
  ]
}

About the sample rows

The schema stores one sample value per field, so every generated row looks the same. Trimmed to 2 here; your real array can be any length.

How the array reaches the page

The table's bindingField is products, so its body row repeats once per item in that array. Each cell binds to one property of the item:

Column	Binds to	Width
Product	`name`	56%
Units	`units`	20%
Revenue	`revenue`	24%

A token inside a body cell resolves against that row's item, not the document. That is the single thing people get wrong most often.

Band stack

A Paperwright document is a stack of bands. This template uses:

page-header
report-header
detail
report-footer
page-footer

Properties that matter

Only properties this template changed from their defaults — anything omitted is left as-is.

Band	Element	Property	Value
`page-header`	`text`	`role`	`caption`
`page-header`	`text`	`text`	`Paperwright — Component Tour`
`page-header`	`text`	`fontSize`	`9`
`page-header`	`text`	`color`	`#a3a3a3`
`report-header`	`text`	`role`	`heading`
`report-header`	`text`	`text`	`Component Tour`
`report-header`	`text`	`fontSize`	`26`
`report-header`	`text`	`fontWeight`	`700`
`report-header`	`text`	`text`	`Every element type in one template. Clone it a…`
`report-header`	`text`	`fontSize`	`11`
`report-header`	`text`	`color`	`#525252`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`TEXT`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`text`	`text`	`Plain text. Supports {{customerName}}.`
`report-header`	`text`	`fontSize`	`11`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`FIELD — label + value pair`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`field`	`label`	`Issued`
`report-header`	`field`	`value`	`{{issueDate \| date:"medium"}}`
`report-header`	`field`	`valueFontSize`	`9`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`MARKDOWN`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`markdown`	`source`	`Bold, _italic_ - a list item`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`RECT — box, ellipse or line`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`rect`	`fill`	`#eef2ff`
`report-header`	`rect`	`borderColor`	`#6366f1`
`report-header`	`rect`	`borderWidth`	`1`
`report-header`	`rect`	`radius`	`6`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`ICON`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`icon`	`color`	`#6366f1`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`IMAGE`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`image`	`src`	`data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A…`
`report-header`	`image`	`alt`	`Sample image`
`report-header`	`image`	`fit`	`contain`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`SPACER — reserves space, draws nothing`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`QRCODE — accepts tokens`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`BARCODE`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`barcode`	`value`	`PAPERWRIGHT-001`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`LIST — bullet or numbered`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`list`	`listStyle`	`numbered`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`ITERATING AN ARRAY, WAY 1 — a table bound to t…`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`CHART — same products array, summarised`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`chart`	`bindingField`	`products`
`report-header`	`chart`	`labelKey`	`name`
`report-header`	`chart`	`valueKey`	`units`
`report-header`	`chart`	`title`	`Units by product`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`TABLE — SUPERSEDED, use table-v2`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`report-header`	`table`	`columns`	`2 items`
`report-header`	`table`	`rowHeight`	`26`
`report-header`	`table`	`staticRows`	`2 items`
`report-header`	`text`	`role`	`caption`
`report-header`	`text`	`text`	`PAGE-BREAK — structural; draws nothing`
`report-header`	`text`	`fontSize`	`9`
`report-header`	`text`	`fontWeight`	`600`
`report-header`	`text`	`color`	`#737373`
`detail`	`text`	`text`	`{{description}}`
`detail`	`text`	`fontSize`	`11`
`detail`	`text`	`text`	`{{amount}}`
`detail`	`text`	`fontSize`	`11`
`detail`	`text`	`align`	`right`
`report-footer`	`text`	`role`	`caption`
`report-footer`	`text`	`text`	`SIGNATURE`
`report-footer`	`text`	`fontSize`	`9`
`report-footer`	`text`	`fontWeight`	`600`
`report-footer`	`text`	`color`	`#737373`
`report-footer`	`signature`	`label`	`Authorised signature`
`report-footer`	`signature`	`sublabel`	`Date`
`page-footer`	`text`	`role`	`caption`
`page-footer`	`text`	`text`	`{{$page}} / {{$pages}}`
`page-footer`	`text`	`fontSize`	`9`
`page-footer`	`text`	`color`	`#a3a3a3`
`page-footer`	`text`	`align`	`right`

Start from this template →

What it teaches​

The data you send​

How the array reaches the page​

Band stack​

Properties that matter​

What it teaches

The data you send

How the array reaches the page

Band stack

Properties that matter