WYSIWYG Template Editor

This page will guide you through the process of creating a PDF template using our drag-and-drop WYSIWYG editor. After reading this documentation, you'll be able to design a template with custom styles and fonts as well as dynamic content.

Create a New Template

To create a new template, log in to your account and go to the "Templates" page. Here you can create a new template or edit an existing one. Click on the "Create template" and select "Blank Template" to start from scratch.

Overview

Here's a quick overview of the WYSIWYG editor:

The editor is divided into four main sections:

1. Toolbar (at the top): The toolbar contains the main actions to manage the template, such as the cursor mode, preview, and save buttons. Depending on the selected element, the toolbar will display different options to edit the element's properties.
2. Canvas (in the center): The canvas is the main area where you can design the template. This is where you can drag and drop elements, resize them, and move them around. You can select multiple elements clicking and dragging the mouse over them.
3. Layers (on the left): The layers panel shows the hierarchy of the pages and elements on the canvas. You can select an element by clicking on it in the layers panel, and you can also change the order of the elements by dragging them up or down. Hovering over an element in the layers panel will highlight the element on the canvas.
4. Properties (on the right): The properties panel shows the properties of the selected element. You can change the element's properties, such as the text, font, color, and size.

Cursor Mode

The cursor mode is the default mode to interact with the canvas. You can select elements, move them around, and resize them. You can also select multiple elements by clicking and dragging the mouse over them. There are 3 cursor modes:

• Select: This is the default mode to interact with the canvas. This mode allows you to select one or multiple elements. Some elements, such as table cells or text, can be edited directly on the canvas.
• Move: This mode allows you to move elements around the canvas. Click and drag an element to move it to a new position.
• Resize: This mode allows you to resize elements. Click and drag the handles of an element to resize it.

Pages

To add a new page to the template, click on the "Add page" button in the "Layers panel". You can add as many pages as you need. Each page can have different sizes and orientations. In the properties panel, you can set a name for the page, edit its size and orientation (portrait or landscape), and set the margins. You can delete a page by hovering over it in the layers panel and clicking on the "Trash" button.

Import your own PDF files

You can import your own PDF files and use them as a starting point for your templates. Click on the "Import PDF" button in the "Layers panel" and select the PDF file you want to import. Every page in the PDF will be imported as a new page in the template.

Elements

You can add elements to the template by clicking on the "Add item" button in the "Layers panel." Select the element type you want to add, such as text, image, or table. Once added, you can resize, move, and rotate the element on the canvas, with the flexibility to adjust the page size to suit your layout needs. You can also change the element's properties in the properties panel. There are several types of elements you can add to the template:

• Text: This element allows you to add a text block to the template. You can edit the text directly on the canvas. You can customize the font, size, color, and alignment in the properties panel. A text element can have a background color and borders.
• Table: This element allows you to add a table to the template. You can edit the table directly on the canvas. You can customize the number of rows and columns, the width of the columns, and the alignment of the cells in the properties panel. You can also add borders to the table and cells. You can define repeating rows and columns to create a dynamic table.
• Image: This element allows you to add an image to the template. You can upload an image from your computer or use a dynamic image variable. The image size modes are:
  • Stretch to Fit: The image will be stretched to fill the specified dimensions
  • Contain: The image will be scaled to fit within the dimensions while maintaining its aspect ratio
  • Cover: The image will be scaled to cover the entire area while maintaining its aspect ratio
• Rectangle: This element allows you to add a rectangle to the template. You can customize the background color, borders, and size in the properties panel.
• Horizontal Line: This element allows you to add a horizontal line to the template. You can customize the color, width, and alignment in the properties panel.
• Vertical Line: This element allows you to add a vertical line to the template. You can customize the color, width, and alignment in the properties panel.
• Barcode / QR Code: This element allows you to add a barcode or QR code to the template. You can customize the type, value, and size in the properties panel. We support several barcode types, such as Code 128, Code 39, and QR code.
• Text field: This element allows you to add a text field to the template. Text fields can be used to create fillable PDF forms.
• Checkbox: This element allows you to add a checkbox to the template. Checkboxes can be used to create fillable PDF forms.
• Radio button: This element allows you to add a radio button to the template. Radio buttons can be used to create fillable PDF forms.

Dynamic Content

When designing a template, you can add dynamic content to the template using placeholders. Placeholders are variables that will be replaced with real data when generating the PDF. A placeholder is a string enclosed in curly braces, such as {name}. You can add placeholders to text elements, table cells, and images in the template.

For dynamic images, you specify a variable name instead of uploading an image to the template, for example, {test}. When calling the API, the "test" variable will contain the URL of the image, which will then be embedded in the generated PDF.

If you want to make a table row repeat for each item in a list, you must click on any cell in the row and select "Repeatable row" in the properties panel. Repeatable rows must have a "repeatable key" that will be used to match the data when generating the PDF. For example, if you have a list of items with "name" and "price" properties, you can add a table with two columns and add placeholders {name} and {price} to the cells. Then, you can click on any cell in the row and enable "Repeatable row" in the properties panel. You can set the "repeatable key" to "items", and when generating the PDF, a JSON object with the relevant data will replace the placeholders automatically.

{
    "items": [
        { "name": "Item 1", "price": 100 },
        { "name": "Item 2", "price": 200 }
    ]
}

You can read more about dynamic content in the Render a PDF from a template documentation.