Components

Components are the elements you place inside sections to build your document. Each one serves a different purpose — displaying text, showing images, rendering tables, or generating barcodes and QR codes.

Adding a component

1. Select the section where you want to add the component in the Layers panel
2. Click + New Element in the left panel
3. Choose the component type
4. The component appears inside the selected section
5. Drag it to position it, or set exact coordinates in the right panel

You can also duplicate any component by hovering over it in the Layers panel and clicking the copy icon.

Text

Text is the most common component. Use it for headings, labels, paragraphs, addresses, or any written content.

Once placed, click on a text element to edit its content directly on the canvas. You can also use the toolbar at the top to change the font, size, weight, color, and alignment.

Text elements support dynamic variables using the {{variable_name}} syntax. For example:

Hello {{customer_name}},

Your order #{{order_number}} has been confirmed.

When the PDF is generated, the placeholders are replaced with actual values from your data.

You can mix static text and variables freely in the same text element. You can also use expressions for computed values like {{items.qty * items.unit_price}}.

Image

Use images for logos, product photos, signatures, or any visual content.

You can add an image in two ways:

• Upload a file from your computer
• Paste a URL pointing to an external image (JPG, PNG, GIF, or SVG)

Images maintain their aspect ratio when you resize them by dragging a corner handle.

Dynamic images — You can use a variable in the image source to display a different image for each PDF. Set {{product_image}} in the Content field of the right panel, then pass the image URL in your API data.

Table

Tables display structured data in rows and columns — line items on an invoice, product lists, schedules, and so on.

When you add a table, it starts with a header row and one data row. You can add or remove columns and rows as needed.

The key feature of tables is automatic row repetition. When you use array variables like {{items.description}} or {{items.qty}} in a data row, the table automatically generates one row for each item in your data. You don’t need to define the number of rows in advance — the table grows with your data.

Tables can also expand across pages. If your data has more rows than fit on one page, the table breaks automatically. For this to work correctly, the table must be the only element inside its section.

See the Tables guide for more on styling and configuring tables.

Barcode

Barcodes generate scannable codes from text or numbers. Use them for tracking numbers, product codes, or any identifier that needs to be machine-readable.

Set the barcode value in the Content field of the right panel. You can use a static value or a variable like {{tracking_number}}.

Supported formats: Code 128, Code 39, EAN-13, EAN-8, and ITF-14. You can customize the line color and size in the right panel.

QR Code

QR codes encode text, URLs, or any data into a square scannable code. Use them for payment links, website URLs, or order tracking pages.

Like barcodes, set the value in the Content field — either a static value or a variable like {{payment_url}}. You can customize the foreground color, background color, and error correction level.

Error correction controls how much of the QR code can be damaged and still scan. Higher levels make the code more resilient but also more dense. Medium (15%) is a good default for most use cases.

See the Barcodes & QR Codes guide for more details.

Shape

Shapes are simple visual elements — rectangles or lines — that you can use as dividers, backgrounds, or decorative accents. Set the fill color, border, and corner radius in the right panel.

Working with components

Selecting and moving

Click a component on the canvas to select it. A selected component shows resize handles at its corners and edges. Drag it to reposition, or use the right panel to set exact X and Y coordinates.

Resizing

Drag a corner handle to resize proportionally, or drag an edge handle to stretch in one direction. You can also type exact width and height values in the right panel.

Renaming

Double-click a component name in the Layers panel to rename it. Clear names like “Company Logo”, “Client Address”, or “Line Items Table” make your template easier to maintain.

Deleting

Hover over a component in the Layers panel and click the trash icon, or select it and press Delete on your keyboard.

Next steps

• Tables — Detailed guide on building and styling tables
• Styling — Customize the appearance of any component
• Expressions — Use computed values in your components