Components

Component Showcase

Available Components

Explore the available PDF template components with live examples and data structures.

API Payload Properties

Properties for the API payload.

API Payload Structure:

{3 items"appID":string"1234567890"
"theme":string"string"
"data":{3 items"header":{}0 items
"blocks":[1 item0:{3 items"type":string"item-cards"
"props":{1 item"orientation":string"landscape"
}
"data":{2 items"title":string"Item Cards"
"items":[4 items0:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"accumulation"
"list":[3 items0:{1 item"key":string"Tamarindo kd "
}
1:{1 item"key":string"21 x 145 mm "
}
2:{1 item"key":string"Prijs per stuk"
}
]
}
1:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"marathon"
"description":string"After coating myself in vegeta..."
}
2:{4 items"image":string"https://images.unsplash.com/ph..."
"title":string"determine"
"description":string"Flying fish flew by the space ..."
"list":[3 items0:{2 items"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items"key":string"Aantal"
"value":string"60 stuks"
}
2:{2 items"key":string"Prijs"
"value":string"€10,00"
}
]
}
3:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"trail"
"list":[2 items0:{2 items"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items"key":string"Aantal"
"value":string"60 stuks"
}
]
}
]
}
}
]
"footer":{}0 items
}
}

Header Component

Displays company information with logo and contact details.

Live Example:

1234567890 — 01.01.2025 David Salodini davidesalodini@gmail.com +32 485 40 26 71 Frankrijklei 67 2000 Antwerpen Belgium

API Payload Structure:

{1 item"header":{6 items"headerInfo":string"1234567890 — 01.01.2025"
"name":string"David Salodini"
"email":string"davidesalodini@gmail.com"
"phone":string"+32 485 40 26 71"
"address":{5 items"street":string"Frankrijklei"
"number":string"67"
"postalCode":string"2000"
"city":string"Antwerpen"
"country":string"Belgium"
}
"logo":string"/flux.svg"
}
}

Table Component

Renders structured data in a table format with headers, rows, and footer.

Live Example:

Items

These are the items that you have purchased

Description

Quantity

Price

Total

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

API Payload Structure:

{2 items"type":string"table"
"data":{5 items"title":string"Items"
"description":string"These are the items that you h..."
"header":[4 items0:string"Description"
1:string"Quantity"
2:string"Price"
3:string"Total"
]
"items":[10 items0:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
1:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
2:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
3:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
4:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
5:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
6:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
7:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
8:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
9:[4 items0:string"Website Design"
1:int1
2:int500
3:int500
]
]
"footer":[4 items0:string""
1:string""
2:string"total"
3:int7000
]
}
}

Item Cards Component

Displays a list of items in a card format.

Live Example:

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

API Payload Structure:

{2 items"type":string"item-cards"
"data":{2 items"title":string"Item Cards"
"items":[4 items0:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"accumulation"
"list":[3 items0:{1 item"key":string"Tamarindo kd "
}
1:{1 item"key":string"21 x 145 mm "
}
2:{1 item"key":string"Prijs per stuk"
}
]
}
1:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"marathon"
"description":string"After coating myself in vegeta..."
}
2:{4 items"image":string"https://images.unsplash.com/ph..."
"title":string"determine"
"description":string"Flying fish flew by the space ..."
"list":[3 items0:{2 items"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items"key":string"Aantal"
"value":string"60 stuks"
}
2:{2 items"key":string"Prijs"
"value":string"€10,00"
}
]
}
3:{3 items"image":string"https://images.unsplash.com/ph..."
"title":string"trail"
"list":[2 items0:{2 items"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items"key":string"Aantal"
"value":string"60 stuks"
}
]
}
]
}
}

List Component

Displays structured information in a list format with multiple columns.

Live Example:

Model

Materiaal

Afmetingen

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)

API Payload Structure:

{2 items"type":string"list"
"data":{5 items"title":string"Specifications"
"description":string"These are the specifications o..."
"header":[3 items0:string"Model"
1:string"Materiaal"
2:string"Afmetingen"
]
"items":[3 items0:[3 items0:string"Afmetingen zijkast rechts (HxB..."
1:string"The memory we used to share"
2:string"2750x1250x650 (in mm)"
]
1:[3 items0:string"Afmetingen zijkast rechts (HxB..."
1:string""
2:string"2750x1250x650 (in mm)"
]
2:[3 items0:string"Afmetingen zijkast rechts (HxB..."
1:string"The memory"
2:string"2750x1250x650 (in mm)"
]
]
"footer":[3 items0:string""
1:string"Totaal"
2:string"€30000"
]
}
}

Images Component

Displays a gallery of images in a flexible layout. Combine one or more image Components to create a gallery.

Live Example:

Product Images

You'll see the rainbow bridge after it rains cats and dogs.

API Payload Structure:

{2 items"type":string"images"
"data":{3 items"title":string"Product Images"
"aspectRatio":string"4/3"
"items":[2 items0:{2 items"url":string"https://images.unsplash.com/ph..."
"description":string"You'll see the rainbow bridge ..."
}
1:{1 item"url":string"https://images.unsplash.com/ph..."
}
]
}
}

Highlight Text Component

Displays prominent text with two values, often used for totals or important information.

Live Example:

Greetings from the real universe.€2.120,47

API Payload Structure:

{2 items"type":string"highlight-text"
"data":{2 items"text1":string"Greetings from the real univer..."
"text2":string"€2.120,47"
}
}

Page Break

Inserts a page break into the PDF. Rest of the page will be empty. Components after the page break will be on the next page.

API Payload Structure:

{2 items"type":string"page-break"
"data":{}0 items
}

Components

Component Showcase

Available Components

API Payload Properties

API Payload Structure:

Header Component

Live Example:

David Salodini

API Payload Structure:

Table Component

Live Example:

Items

API Payload Structure:

Item Cards Component

Live Example:

Item Cards

API Payload Structure:

List Component

Live Example:

Specifications

API Payload Structure:

Images Component

Live Example:

Product Images

API Payload Structure:

Highlight Text Component

Live Example:

API Payload Structure:

Footer Component

Live Example:

API Payload Structure:

Page Break

API Payload Structure: