Skip to Content
EditorEditor Components

Editor Components

Components are the building blocks of your template. You can add text, images, tables, and containers to create your PDF layout.

Adding Elements

To add a new element to your template:

  1. Click the Add element button in the left panel
  2. Select the element type you want to add
  3. The element appears on the canvas
  4. Drag it to position it where you want

Element Types

Text

Use text elements for labels, headings, paragraphs, and any written content.

Characteristics:

  • Default size: 120 × 40 pixels
  • Fully resizable
  • Supports font customization (family, size, weight, color)
  • Text alignment options (left, center, right, justify)

Dynamic Content: Insert variables to display dynamic data in your PDFs:

Hello {{customer_name}},

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

When you generate a PDF, these placeholders are replaced with actual values from your data.

Image

Use image elements for logos, photos, signatures, and graphics.

Characteristics:

  • Default size: 200 × 150 pixels
  • Maintains aspect ratio when resizing
  • Supports JPG, PNG, GIF, and SVG formats

Adding Images:

  • Upload an image file from your computer
  • Or paste a URL to an external image

Dynamic Images: You can use a variable for the image source to display different images per PDF:

{{company_logo}}

Table

Use tables for structured data like line items, lists, and grids.

Characteristics:

  • Default: 2 columns × 2 rows
  • Includes a header row
  • Add or remove rows and columns as needed
  • Style cells individually or all at once

Use Cases:

  • Invoice line items
  • Product lists
  • Schedules and timetables
  • Comparison charts

See the Tables guide for detailed instructions on working with tables.

Container

Use containers to group elements and create layout sections.

Characteristics:

  • Full width (100% of page width)
  • Only height is adjustable (not width)
  • Can hold other elements inside
  • Stack vertically on the page

Use Cases:

  • Create distinct sections in your document
  • Group related elements together
  • Add visual separation with background colors

Selecting Elements

Click on any element on the canvas to select it:

  • A selected element shows resize handles at its corners and edges
  • The right panel updates to show that element’s properties
  • Click elsewhere on the canvas to deselect

Element Actions

Once an element is selected, you can:

Move

  • Drag the element to reposition it on the canvas

Resize

  • Drag the corner handles to resize proportionally
  • Drag the edge handles to resize in one direction

Duplicate

  • In the Layers panel (left), hover over the element and click the duplicate icon
  • A copy appears with “(copy)” added to its name

Delete

  • In the Layers panel, hover over the element and click the delete icon
  • Or select the element and press Delete/Backspace on your keyboard

Layers Panel

The Layers panel in the left sidebar shows all elements in your template:

  • Elements are listed in visual order (top to bottom)
  • Click an element name to select it
  • Drag containers to reorder them
  • Double-click a name to rename the element
  • Hover to reveal duplicate and delete icons

Next Steps

Last updated on
API ReferenceContainers