Editor Guide

The ComposeIt visual editor is a powerful drag-and-drop template designer built specifically for creating structured, dynamic documents. This guide details each editor panel and how to leverage them.

1. Canvas & Device Controls

The central workspace is where your document is built and previewed.

Layout Mode: Toggle between Edit (canvas tools enabled) and Preview (renders with static or mock data).
Device Selector: Test responsiveness by switching views:
- Desktop: Full-width editing screen.
- Tablet: Medium width view.
- Mobile: Compact width view.
Zoom Options: Fit-to-screen, 50%, 75%, 100%, or custom zoom factors.
Document Settings: Define page sizing (e.g., A4, Letter) and set base page margins (top, bottom, left, right). Set margins to 0 for borderless background designs.

2. Block Manager (Elements Panel)

Blocks are the building blocks of your document. Drag them from the right sidebar onto the canvas:

Rows and Columns: Create grids to arrange elements horizontally. You can drag borders between columns to adjust their width percentage.
Text Block: Add headings, paragraphs, labels, or variable fields.
Image: Embed static images or logos.
Table: Construct multi-column tabular sections designed for repeatable data items (such as product lists or invoice lines).
Variables: Insert dynamic placeholders that get resolved during PDF compilation.

3. Style Manager

The Style Manager allows you to customize the typography, spacing, dimensions, borders, and backgrounds of selected elements.

Global Classes & Utility Classes

Add classes like bg-primary-color and primary-color to apply a unified design scheme across your layout.
Style custom states, fonts, colors, and margins directly.

Layout & Padding

Row Spacing: Standardize spacing across all page rows by adding padding values (e.g. 2cm left/right margin) directly in the Row settings.
Margin Adjustments: Set top/bottom paddings to 0 or negative values on specific elements to eliminate spacing between adjacent rows (like tables and summary panels).

4. Rich Text Editor (RTE) & Variable Selector

Double-clicking any text component activates the inline Rich Text Editor:

Formatting Options: Bold, italic, underline, alignments, font size, and text color.
Variables Selector (/ trigger):
- Type / anywhere inside a text component to bring up the Variables Path Selector.
- Browse the nested JSON schema of your linked data sources.
- Select a path (e.g. invoice.number or invoice.date) to embed it directly.
- Supported variable filters include formatting numbers as currency, uppercase transformations, and parsing Markdown to HTML (great for rich notes).

5. Asset Manager & Image Properties

Manage visual resources easily:

Uploads: Double-click any image block to open the Asset Manager upload dialog.
Resizing: Adjust size percentages or specify pixel values.
Filters:
- Adjust brightness, saturation, and contrast.
- Use brightness: 0% and invert: 100% to convert colored logos to solid white headers.

6. Dynamic Table Controls

ComposeIt tables are optimized for rendering lists of varying lengths dynamically.

Column Manipulation: Select a cell, click the more menu (...) on the floating toolbar, and choose Columns > Insert after or Insert before to add grid segments.
Grid Formatting:
- Toggle off horizontal and vertical borders for a clean borderless design.
- Define alternate striping using Zebra Backgrounds (e.g., #ffffff for standard rows and #f0f0f0 for alternate rows).
Data Context Binding:
- Select the table row or container.
- Bind the element to a list data source (e.g. invoice.products).
- In cells, use relative context paths (e.g. product.name instead of the full path) to loop through and print all items automatically.

7. AI Assistant

The AI Assistant is integrated directly into the editor interface. Use the sidebar to chat with the model to:

Automatically generate layouts or sections based on text prompts.
Apply complex styling, color palettes, or margin changes.
Troubleshoot variable alignments or binding paths.

Editor Guide

On this page