Docs
EN
English Español
Sign up

Elements

Elements are the building blocks of a ShipPDF template. Use layout elements to structure the page, content elements to display information, and form elements to add fields that recipients can fill in.

Add an element

You can add elements in three ways:

  • Drag an element from the dock at the bottom of the editor onto the page.
  • Click Add element inside an empty container and choose an item from the picker.
  • In Outline, open an element’s actions, select Add child, and choose an available item.

The picker only shows elements that are valid for the selected location. After adding an element, select it on the canvas or in Outline to edit its properties in the inspector.

Document structure

Every page follows a Page → Row → Column → content structure. A new page already contains a Row with one full-width Column:

Page
`-- Row
    `-- Column
        |-- Text
        |-- Image
        `-- Table

Rows arrange Columns horizontally. Columns stack their children vertically. When you drop a content or form element directly onto a Page or Row, the editor creates the required Row or Column wrapper for you.

Layout

Layout elements control where content appears and how repeated data flows.

ElementUse it for
RowArrange one or more Columns side by side. Add, resize, or reorder Columns to create the horizontal structure of a page.
ColumnStack layout, content, and form elements vertically. A Column is the usual container for the visible parts of a template.
LoopRepeat its children for every item in a List or Collection field. Display repeated items as a list or grid and choose whether an empty source renders nothing or shows a message.
Page BreakStart the Row after it on a new PDF page. Place it between Rows at the page level.

Loops can contain Rows, content elements, and nested Loops. Select a Loop and use Repeat for each item in to choose its source field. Inside the Loop, data bindings use the current item’s scope.

Elements

Content elements display static values, template data, or generated graphics.

ElementUse it for
TextAdd static text and insert data fields in the same text block. Use it for headings, paragraphs, labels, dates, prices, and other formatted values.
TableRender a Collection as rows. Configure columns, bind values, add summary rows, style the table, and control its pagination.
ImageShow an uploaded image, a template or workspace asset, an image URL, or an image supplied through a data field.
QR CodeEncode text, a URL, or a data field as a QR code.
BarcodeEncode text or a data field using Code 128, GS1-128, Code 39, EAN-13, UPC-A, ITF-14, Data Matrix, or PDF417.

Text, QR Code, and Barcode elements accept static content and data fields. Type {{ in their value editor to insert an available field. Images can instead bind their source directly to a compatible data field.

Forms

Form elements create fillable fields in the generated PDF. Each field needs a unique Field ID, which becomes its identifier in the PDF. Dots are supported, so IDs such as customer.name are valid.

ElementUse it for
Text inputLet the recipient enter text. Set an optional default value and enable Multiline for longer responses.
DropdownLet the recipient choose one value from a list of choices. Configure the label, choices, and optional default choice.
CheckboxLet the recipient toggle a single option. Add an optional label and choose whether it is checked by default.
RadioLet the recipient choose one option from a visible group of choices. Configure the group label, choices, and optional default choice.

All form elements support these settings:

  • Required requires a value before the completed form is submitted.
  • Read only displays the value without allowing the recipient to edit it.
  • Typography, Field background, and Field border control the field’s appearance.

Form elements can be placed in body Rows, but not in header or footer Rows.

Next steps