Layout
Components
Each block in the blocks array maps to one of these components. Header and footer are top-level fields on data; the header can also be placed as a block.
Header
Company info rendered at the top of every page. Passed as data.header. Optional — when omitted, no header is rendered.
Preview
1234567890 — 01.01.2025 David Salodinidavidesalodini@gmail.com +32 485 40 26 71 Frankrijklei 67  |
{
"header": {
"headerInfo": "1234567890 — 01.01.2025",
"name": "David Salodini",
"email": "davidesalodini@gmail.com",
"phone": "+32 485 40 26 71",
"address": {
"street": "Frankrijklei",
"number": "67",
"postalCode": "2000",
"city": "Antwerpen",
"country": "Belgium"
},
"logo": "/flux.svg"
}
}As a block
The header can also be added to the blocks array with type: "header". Unlike the top-level header, which repeats at the top of every printed page, a header block renders once, in flow with the other blocks.
Preview
1234567890 — 01.01.2025
David Salodini
davidesalodini@gmail.com
+32 485 40 26 71
Frankrijklei 67
2000 Antwerpen
Belgium
{
"type": "header",
"data": {
"headerInfo": "1234567890 — 01.01.2025",
"name": "David Salodini",
"email": "davidesalodini@gmail.com",
"phone": "+32 485 40 26 71",
"address": {
"street": "Frankrijklei",
"number": "67",
"postalCode": "2000",
"city": "Antwerpen",
"country": "Belgium"
},
"logo": "/flux.svg"
}
}Page break
Inserts a CSS page break. Everything after continues on the next page.
{
"type": "page-break"
}Blocks
Table
Structured data with header row, body rows, and an optional footer row.
Preview
Items
These are the items that you have purchased
{
"type": "table",
"data": {
"title": "Items",
"description": "These are the items that you have purchased",
"header": [
"Description",
"Quantity",
"Price",
"Total"
],
"items": [
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
],
[
"Website Design",
1,
500,
500
]
],
"footer": [
"",
"",
"total",
7000
]
}
}List
Multi-column list, useful for specifications or key-value data.
Preview
Specifications
These are the specifications of the product
{
"type": "list",
"props": {
"orientation": "landscape"
},
"data": {
"title": "Specifications",
"description": "These are the specifications of the product",
"header": [
"Model",
"Materiaal",
"Afmetingen"
],
"items": [
[
"Afmetingen zijkast rechts (HxBxD)",
"The memory we used to share",
"2750x1250x650 (in mm)"
],
[
"Afmetingen zijkast rechts (HxBxD)",
"",
"2750x1250x650 (in mm)"
],
[
"Afmetingen zijkast rechts (HxBxD)",
"The memory",
"2750x1250x650 (in mm)"
]
],
"footer": [
"",
"Totaal",
"€30000"
]
}
}Item cards
Card grid with image, title, optional description, and optional key list per item.
Preview
Item Cards
accumulation
- Tamarindo kd
- 21 x 145 mm
- Prijs per stuk
marathon
After coating myself in vegetable oil I found my success rate skyrocketed.
determine
Flying fish flew by the space station.
- SoortGladiolen
- Aantal60 stuks
- Prijs€10,00
trail
- SoortGladiolen
- Aantal60 stuks
{
"type": "item-cards",
"data": {
"title": "Item Cards",
"items": [
{
"image": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
"title": "accumulation",
"list": [
{
"key": "Tamarindo kd "
},
{
"key": "21 x 145 mm "
},
{
"key": "Prijs per stuk"
}
]
},
{
"image": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
"title": "marathon",
"description": "After coating myself in vegetable oil I found my success rate skyrocketed."
},
{
"image": "https://images.unsplash.com/photo-1760549901908-766a6f80d8d3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
"title": "determine",
"description": "Flying fish flew by the space station.",
"list": [
{
"key": "Soort",
"value": "Gladiolen"
},
{
"key": "Aantal",
"value": "60 stuks"
},
{
"key": "Prijs",
"value": "€10,00"
}
]
},
{
"image": "https://images.unsplash.com/photo-1760389003430-603f6dfb9bac?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=818",
"title": "trail",
"list": [
{
"key": "Soort",
"value": "Gladiolen"
},
{
"key": "Aantal",
"value": "60 stuks"
}
]
}
]
}
}Images
Flexible image gallery. Stack multiple image blocks to build multi-row layouts.
Preview
Product Images
You'll see the rainbow bridge after it rains cats and dogs.
{
"type": "images",
"data": {
"title": "Product Images",
"aspectRatio": "4/3",
"items": [
{
"url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
"description": "You'll see the rainbow bridge after it rains cats and dogs.",
"watermark": {
"url": "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
"scale": 0.4,
"opacity": 0.5
}
},
{
"url": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774"
}
]
}
}Highlight text
Two prominent values side by side. Useful for totals or key figures.
Preview
{
"type": "highlight-text",
"data": {
"text1": "Greetings from the real universe.",
"text2": "€2.120,47"
}
}