Template Editor Overview

The template editor is a visual, drag-and-drop interface for designing PDF templates. What you see on the canvas is exactly what your generated PDFs will look like.

Editor Layout

The editor is organized into three main areas:

Left Panel

The left panel contains your template settings and element management:

• Template Info - Set your template name, page format (A4, Letter, etc.), and orientation (Portrait or Landscape)
• Section Toggles - Enable or disable the Header and Footer zones
• Layers - View and manage all elements in your template as a hierarchical list
• Add Element - Button to add new elements to your template

You can collapse this panel by clicking the arrow icon to give more space to the canvas.

Canvas (Center)

The canvas is your main editing area where you design your template:

• Displays a visual representation of your PDF page
• Drag elements to position them
• Click an element to select it
• Drag the corners or edges of selected elements to resize them
• The canvas shows your page at actual proportions

Right Panel

The right panel displays properties for the currently selected element:

• Dimensions - Width, height, and position
• Typography - Font, size, weight, color, and alignment (for text elements)
• Fill - Background color and opacity
• Border - Width, style, color, and corner radius
• Padding - Inner spacing

The options shown change based on what type of element you have selected. You can collapse this panel when not needed.

Basic Workflow

Here’s a typical workflow for creating a template:

1. Set page format - Choose your paper size (A4, Letter, etc.) and orientation in the left panel
2. Add header/footer - Toggle these on if you need repeating content at the top or bottom of each page
3. Add elements - Click “Add element” and choose Text, Image, Table, or Container
4. Position elements - Drag elements to arrange them on the canvas
5. Style elements - Select an element and use the right panel to customize its appearance
6. Add variables - Insert placeholders like {{customer_name}} in text elements for dynamic content
7. Save - Your template is automatically saved as you work

Page Settings

Configure your page dimensions in the Template Info section of the left panel:

Page Format

• A4 (210 × 297 mm) - Standard international
• Letter (8.5 × 11 in) - Standard US
• A3, A5, Legal, and more

Orientation

• Portrait - Taller than wide
• Landscape - Wider than tall

The canvas automatically adjusts to show your selected page size and orientation.

Next Steps

• Components - Learn about the different element types
• Header & Footer - Add repeating content to every page
• Styling - Customize the appearance of your elements