Visual Template Editor

The visual editor lets you design PDF and image templates by dragging and dropping elements onto a canvas — no HTML or CSS required. Bind data fields to elements, preview with sample data, and generate documents via the API or directly from the editor.

Getting Started

Creating a Template

1. Go to Templates → New Template
2. Choose output type: PDF or Image
3. Choose creation mode:
   • Blank — Start with an empty canvas
   • AI Generate — Describe what you want in plain text (e.g., “A professional invoice with line items, subtotals, and company logo”) and the AI generates a starting template you can refine

Editor Layout

The editor has three main areas:

• Left Panel — Layers, insertable elements, and data field management
• Center Canvas — Your template. Drag, resize, and position elements here.
• Right Panel — Property inspector for the selected element or page settings

All panels are resizable and collapsible. Your layout preferences are saved automatically.

Elements

Insert elements from the toolbar or the left panel’s Elements tab.

Basic Elements

Data-Driven Elements

Template Blocks

Template blocks add logic to your design — loops, conditionals, and reusable sections.

Blocks appear as colored containers on the canvas. Drag elements inside them to make them part of the block.

Working with Elements

Selecting & Moving

• Click an element to select it
• Drag to reposition
• Resize using corner and edge handles (hold Shift for aspect ratio lock)
• Ctrl+Click to select multiple elements
• Ctrl+A to select all
• Right-click for context menu (duplicate, copy, cut, delete, reorder layers, lock, hide, group/ungroup)

Alignment & Snapping

• Snap guides appear automatically when elements align with each other
• Distance labels show spacing between elements
• Toggle snapping on/off from the toolbar
• Enable grid snap to lock positioning to a pixel grid (configurable grid size: 2–100px)

Grouping

Select multiple elements → right-click → Group. Groups act as containers — move or resize the group and all children follow. Ungroup with Ctrl+Shift+G.

Layers Panel

The left panel’s Layers tab shows all elements in z-order. From here you can:

• Reorder elements (drag up/down to change layering)
• Rename elements for clarity
• Show/hide elements (eye icon)
• Lock/unlock elements to prevent accidental edits (lock icon)

Styling Elements

Select any element and use the right panel’s Property Inspector to style it.

Text Properties

• Font — Choose from web-safe fonts or search Google Fonts
• Size — 1 to 999px
• Weight — Thin (100) through Black (900)
• Style — Normal, italic
• Decoration — Underline, strikethrough
• Transform — Uppercase, lowercase, capitalize
• Alignment — Left, center, right, justify (horizontal); top, middle, bottom (vertical)
• Spacing — Line height, letter spacing, word spacing
• Color — Full color picker
• Padding — Internal spacing
• Text Fitting — None (default), shrink to fit, or grow to fit

Shape & Common Properties

• Fill — Background color with toggle
• Border — Color, width (0–20px), style (solid, dashed, dotted), corner radius
• Shadow — X/Y offset, blur, spread, color
• Opacity — 0–100%
• Position — X, Y coordinates (absolute)
• Size — Width, height
• Rotation — Angle in degrees

Image Properties

• Source — Image URL, file upload, or data variable binding
• Fit Mode — Cover (fill, crop if needed), contain (fit within bounds), fill (stretch)
• Alt Text — Accessibility description
• Filters — Brightness, contrast, saturation, blur

Data Binding

The visual editor supports dynamic data — connect your template elements to data fields that get populated when you generate documents via the API.

Defining Data Fields

1. Open the Data tab in the left panel
2. Click Configure Data to open the field builder
3. Add fields with a name and type (text, number, date, image URL, boolean, list)
4. Set default values for preview
5. Save — sample data is generated automatically

Binding Data to Elements

• Drag a data field from the left panel onto an element
• Or select an element and pick a field from the Data Source section in the property inspector
• Text elements use Nunjucks syntax: {{ customerName }}, {{ invoice.total | formatCurrency }}

Variable Preview Mode

Toggle Preview Data in the toolbar to see actual sample data values rendered in place of variable placeholders. This shows exactly how your document will look with real data.

Template Syntax

The editor uses Nunjucks template syntax:

• Variables: {{ variableName }}
• Filters: {{ price | formatCurrency }}, {{ date | formatDateTime }}
• Loops: {% for item in items %}...{% endfor %}
• Conditionals: {% if showSection %}...{% endif %}

See the Templating Guide for full syntax reference and available helpers.

Page Settings

Click the page dimensions in the toolbar to configure:

• Paper Size — Letter, A4, A3, Legal, Tabloid, and more
• Image Presets — Open Graph (1200×630), Instagram (1080×1080), Twitter (1200×675), Facebook, Pinterest, YouTube Thumbnail, LinkedIn, Story
• Custom Size — Set any width and height
• Orientation — Portrait or landscape (toggle available for non-square sizes)
• Background Color — Set via the property inspector when no element is selected
• Margins — Top, right, bottom, left (0–500px)

Preview & Generation

Live Preview

The editor shows a live preview of your template rendered with sample data. In split view, the preview updates as you make changes.

Generating Documents

Click Generate in the editor header to render your template as a PDF or image. The result opens in a new tab for download.

To generate via the API, use the API Code button to see the exact endpoint and request body for your template. Copy it into your application code.

Using Templates via API

Once saved, use your template’s ID with the conversion endpoints:

POST /v2/template/pdf
{
  "templateId": "your-template-id",
  "data": {
    "customerName": "Acme Corp",
    "items": [...]
  }
}

See Template to PDF and Template to Image for full API reference.

Code Editor

The editor also includes a full code editor for users who prefer writing HTML directly:

• HTML Tab — Monaco code editor with Nunjucks syntax highlighting, autocomplete for template variables, and diagnostics for undefined variables
• Data Tab — JSON editor for sample data with validation
• Options Tab — PDF/image generation settings (format, viewport, etc.)

Switch between Visual and HTML tabs at any time. Both modes work with the same template.

Keyboard Shortcuts

Press Ctrl+Shift+/ to see the full shortcut reference.

Tips

• Use snap guides for pixel-perfect alignment — they appear automatically as you drag elements near each other
• Name your layers — Double-click a layer name to rename it. Makes complex templates much easier to manage.
• Lock finished elements — Click the lock icon to prevent accidental changes while you work on other parts
• Preview with real data — Toggle Preview Data mode to catch layout issues with actual content lengths
• Start with AI — Use AI Generate to get a starting template, then refine in the visual editor