Editor Overview
A tour of the visual template editor — everything you see when you open a template.
Opening the Editor
To open the Studio Editor, go to your project dashboard, find the template you want to edit (or create a new one), and click on it. The editor opens in a full-screen workspace.
Editor Layout
The editor is divided into four areas:
| Area | Location | What You Do Here |
|---|---|---|
| Toolbar | Top | Add elements, undo/redo, zoom, preview, save |
| Canvas | Center | Your document preview — drag, place, and resize elements |
| Layers Panel | Left | See all elements in order, reorder them, toggle visibility |
| Inspector | Right | Style and configure the currently selected element |
Adding Your First Element
- Click an element type in the Toolbar (e.g., Text, Image, Field)
- It appears on the canvas at a default position
- Drag it to where you want it
- Use the corner/edge handles to resize
- Configure it in the Inspector panel on the right
Selecting & Editing
- Click any element to select it — the inspector shows its properties
- Double-click a text element to start typing directly
- Drag a selected element to reposition it
- Press Delete or Backspace to remove the selected element
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
⌘/Ctrl + Z | Undo |
⌘/Ctrl + Shift + Z | Redo |
⌘/Ctrl + C | Copy element |
⌘/Ctrl + V | Paste element |
⌘/Ctrl + D | Duplicate element |
Delete | Delete selected element |
⌘/Ctrl + + | Zoom in |
⌘/Ctrl + - | Zoom out |
Saving Your Template
Click the Save button in the toolbar (or press ⌘/Ctrl + S). Your template is saved instantly and is immediately available for PDF generation via the API or SDKs.
Previewing Your Document
Click Preview in the toolbar to see exactly how your generated PDF will look. If your template has data-bound fields, you can enter sample data in the preview dialog to see them filled in.
Always preview before integrating with your API — it shows you the exact PDF output including font rendering, spacing, and data binding.