PDF Designer elements

The PDF Designer uses two categories of components to build a PDF template: Document components and Elements components. These are combined in the Document tree to define the structure and content of your PDF.

Where available, each component includes a link to the corresponding pdfmake documentation, accessible via the information icon in the Properties pane.

PDF document element

The PDF Document element is the root of your template. All Document components are placed directly inside it.

Document components

Background

Shell for the background layer of your PDF template. Insert any Elements component here to display it behind the page content.

Content

Shell for the main body content of your PDF template. Insert Elements components here.

Default Style

Sets a baseline style for the entire PDF template, such as the default font family and font size. Individual Style elements can override these defaults at the component level.

Footer

Shell for the footer area. Insert Elements components here. Supports formula expressions for dynamic text, for example to display page numbers:

{= `Page ${currentPage} of ${pageCount} `}
Header

Shell for the header area. Behaves the same as Footer.

Settings

Configures document-level settings such as page size, page margins, and optional download name and password protection.

Styles

Container for Style elements. All Style components must be placed here.

Watermark

Adds a watermark that appears on every page of the PDF.

Element components

Canvas

Adds a canvas shape to the template. Key attributes:

  • color: Fill color.

  • h: Height.

  • linecolor: Border color.

  • r: Border radius.

  • w: Width.

  • x: Horizontal position offset.

  • y: Vertical position offset.

Columns

Divides a section of the template into side-by-side columns. Insert Elements components into each column.

Image

Inserts an image from the Media Library using the src attribute.

Images can also function as machine-readable barcodes. Use the isBarcode property to configure an image as a barcode.

The resizeEmpty property is set to true by default. When enabled, if the referenced image cannot be found, its placeholder space automatically collapses to 1×1 pixel to avoid disrupting the surrounding layout.

ListBulleted

Inserts a bulleted list.

ListNumbered

Inserts a numbered list.

QR code

Inserts a QR code. Enter the target URL or value in the qr attribute. Use the fit attribute to set the QR code size in pixels as a square.

Stack

Groups components and renders them stacked. Useful for building multi-paragraph text blocks or layered content areas without combining everything into a single component.

Style

Defines a named style that can be referenced by other components using their style attribute. Style elements must be placed inside the Styles document component.

Table

Inserts a table. Add TableRow elements to define rows.

TableRow

Adds a row to a Table. Can only be placed inside a Table element.

Text

Inserts a text block. Can be placed in Content, Footer, Header, Watermark, Columns, ListBulleted, ListNumbered, Stack, and TableRow elements. Enter static text in the text attribute in the Properties pane, or bind the text attribute to an interface value.

The Text element supports the following additional properties:

  • verticalAlignment: Controls whether text is rendered normally, as subscript, or as superscript. Options are normal (default), subscript, and superscript. Useful for notation such as chemical formulas or footnote markers.

  • font / Font Family: In addition to built-in fonts, any custom fonts enabled in the Fonts tool in the Cockpit are available here. See PDF Designer settings for more on custom fonts.

TextWrapper

Groups multiple Text elements that have different formatting, displaying them inline on the same line. Useful for combining text runs with different font sizes or styles without a line break between them.

Can be placed in the following document components:

  • Background

  • Content

  • Footer

  • Header

    Can be placed in the following element components:

  • Stack

  • TableRow

Related topics