WYSIWYG Editor

Overview

The WYSIWYG (What You See Is What You Get) editor lets you build PDF templates by placing elements directly on a canvas. The editor is split into three panels:

• Toolbar (top) — tools for adding elements, undo/redo, zoom, and export
• Structure panel (left) — hierarchical view of all elements on the page, useful for selecting and reordering
• Properties panel (right) — settings for the selected element (font, colors, position, borders, etc.)

Creating a template

1. Go to Templates from the main menu
2. Click Create Template
3. Choose WYSIWYG Editor as the template type
4. Pick a starter template or start with a blank canvas
5. Give your template a descriptive name

Available elements

Working with variables

Variables connect your template to the API. When you mark an element as dynamic, you assign it a variable name. When generating a PDF, you pass values for these variables in the data object of the API request.

{
  "data": {
    "customer_name": "Acme Corp",
    "invoice_number": "INV-2026-042",
    "due_date": "2026-04-30",
    "items": [
      { "description": "Web design", "qty": 1, "price": "€3,000" },
      { "description": "Hosting", "qty": 12, "price": "€120" }
    ],
    "total": "€3,120"
  }
}

Naming conventions:

• Use clear, descriptive names: customer_name, invoice_total, due_date
• Variable names are case-sensitive
• Use underscores instead of spaces
• For tables, use array variables (e.g. items) where each entry is an object with the column fields

Properties panel

Select any element on the canvas to open its properties panel. Available settings depend on the element type:

Position & size

Set exact X/Y coordinates and width/height in pixels. Use the alignment tools to center or distribute elements. Drag handles to resize visually.

Typography

Choose from hundreds of Google Fonts. Control font size, weight, color, line height, letter spacing, and text alignment. Apply rich formatting (bold, italic, underline) to portions of text.

Appearance

Set fill colors, border colors, border width and style, corner radius, and opacity. These options are available on most element types.

Structure panel

The left panel shows a tree view of all elements on the current page. You can:

• Reorder — drag elements to change their z-index (stacking order)
• Select — click an element name to select it on the canvas
• Rename — double-click to give elements meaningful names for easier management

Multi-page templates

Templates can have multiple pages. Use the page navigation at the bottom of the canvas to add, remove, or switch between pages. Each page has its own set of elements and optional base PDF.

Version history

On the Pro plan, each save creates a new version (up to 10 versions are kept). You can view and restore any previous version from the template settings.

Preview & export

Use the Preview button in the toolbar to generate a test PDF directly in the editor. You can also export the PDF to download it. Previews don't count toward your API quota.

Keyboard shortcuts

WYSIWYG vs. HTML editor

Choose the WYSIWYG editor when:

• You want to design visually without writing code
• Your template has a fixed layout (invoices, certificates, labels)
• You need to overlay fields on an existing PDF

Consider the HTML editor instead for multi-page documents with dynamic content that can span pages, complex conditional logic, or when you need full CSS control.