Editor Documentation

Comprehensive user guide for the Document Builder Editor interface, tools, canvas, and inspector panel from A to Z

Welcome to the Document Builder Editor. This guide covers the complete layout, tools, navigation, and features available within the editor interface.

Workspace Overview

The editor workspace is structured into four main functional zones designed to streamline document layout, data integration, and styling:

Topbar Navigation: High-level actions including document renaming, status indicators, zoom controls, design modes, printing, and publishing.
Left Sidebar: Primary tools for adding elements, managing layer hierarchy, binding data sources, customizing themes, managing assets, and AI assistance.
Center Canvas: Interactive document workspace featuring dynamic slash commands (/) and a contextual Rich Text Editor toolbar.
Right Inspector Panel: Contextual panel for customizing component classes, functional settings, and detailed CSS styles.

The top navigation bar contains controls for file-level settings, revision history, viewing modes, and publishing workflows.

Document Name: Click directly on the document name in the top-left corner to edit and rename your file inline.
Document Status:
- Draft: Displays a watermark on render. Editing and previewing in draft mode are free and do not count against generation quota limits.
- Published: Removes the preview watermark. Published document generations consume API rendering quota.
Undo & Redo: Quickly revert or reapply recent editing actions.
Zoom Controls: Adjust canvas scaling using the percentage dropdown or the + / - buttons.

Dark / Light Mode: Switch the UI color theme.
Show Outlines: Toggle visible bounding boxes around layout elements to help debug structure and alignment.
Design Mode: Enables free-dragging and absolute positioning of components on the canvas surface.

Browser Print: Click the Print icon to render a PDF using your browser's native print engine. It is free, unlimited, and watermark-free, but does not support dynamic engine features (such as dynamic headers/footers, fillable PDF form fields, conditional logic, or runtime variables).
Preview: Click the Play icon to render a PDF using our print engine. It is free and unlimited but with the watermark.
Publish Button: Releases the latest version of your document template to production.

The left sidebar provides your core creation and management tools, arranged vertically from top to bottom.

Block Manager (+): Drag building blocks (text, images, containers, tables) directly onto the canvas.
Layer Manager: View and reorder the visual hierarchy and nested tree structure of document elements.
Sections: Manage page structures, headers, footers, and structural breaks.
Datasources: Bind JSON schemas and dynamic variables to document fields.
Theme: Define global baseline typography, color palettes, spacing defaults, and brand styles.
Assets: Store, upload, and manage media files, vector logos, and background images.
AI Assistant: Leverage generative tools to craft copy, auto-structure page layouts, or generate variable expressions.

Docs: Direct link to platform documentation and developer reference guides.
Integrations: Access API keys, and third-party workflow connections.
Settings: Configure document-level parameters, PDF engine output rules, and page setup options.
Profile: Access user account details, team permissions, and workspace preferences.

The central area acts as your primary interactive workspace, rendering a real-time preview of your document output.

Slash Commands: Type / anywhere inside an active text block to trigger quick insertion menus for dynamic variables, layout blocks, and components.
Contextual Selection: Clicking on any component selects it and opens its controls in the Right Inspector Panel.

When a text element is highlighted or focused on the canvas, the RTE bar activates automatically at the top of the workspace:

Font family, size, weight, and line height settings.
Text color, background highlights, and alignment options (left, center, right, justify).
Font styling (bold, italic, underline, strikethrough).
Bulleted and numbered lists.
Fast variable mapping and dynamic field insertion.

The Right Inspector Panel provides fine-grained properties for whatever component is currently selected on the canvas.

Component Classes: Apply custom utility classes or reusable design tokens for consistent styling across template instances.
Settings: Manage element properties including data binding paths, conditional visibility rules (show/hide based on logic), link targets, and custom attributes.
Styles: Precision layout and design controls:
- Dimensions: Width, height, margin, and padding values.
- Typography: Custom fonts, colors, line heights, and letter spacing.
- Borders & Backgrounds: Fill colors, stroke thickness and radius.