Navigation
14.8. Understand the Invoice Designer Workspace
Learn the main areas of the invoice designer: canvas, component palette, field browser, inspector, toolbar, transforms, and preview.
The invoice designer is a visual workspace for building invoice documents. Billing admins can place components on a page, arrange them, bind fields to invoice data, style the layout, and preview the result before saving.
Figure 1: The designer includes the component palette on the left, the invoice canvas in the center, and the inspector on the right.
Main areas
| Area | What it does |
|---|---|
| Template name | Names the layout so billing staff know when to use it. |
| Visual / Code tabs | Most users work in Visual mode. Code mode is for advanced template inspection or support workflows. |
| Design tab | The drag-and-drop canvas where you build the invoice page. |
| Transforms tab | Optional data shaping for filtering, sorting, grouping, or summarizing invoice collections. |
| Preview tab | Renders the invoice using sample data or an existing invoice. |
| Toolbar | Undo, redo, snap-to-grid, guides, rulers, and zoom controls. |
| Palette | Blocks, presets, fields, and outline tools for adding or navigating components. |
| Canvas | The page area where invoice content is arranged. |
| Inspector | Property panel for the selected component or page setup. |
Toolbar controls
| Control | Use it for |
|---|---|
| Undo / Redo | Step backward or forward while editing. |
| Snap | Keep components aligned to the grid. Leave it on for most business layouts. |
| Guides | Show alignment helpers while moving components. |
| Rulers | Show measurement guides around the page. |
| Zoom | Zoom in for detailed placement or out for full-page review. |
Palette tabs
| Tab | Use it for |
|---|---|
| Blocks | Add sections, containers, text, data fields, totals, tables, logos, and images. |
| Presets | Insert prebuilt combinations when available. |
| Fields | Browse invoice, customer, tenant, and line-item fields that can be inserted into text or field components. |
| Outline | Navigate the component hierarchy when a layout becomes complex. |
Inspector basics
The inspector changes based on the selected component. Select a logo to edit image-related settings. Select a table to edit table settings. Select a section or container to change layout, spacing, size, background, borders, and alignment.
When no component is selected, the inspector shows page setup controls such as paper preset and margins.
Practical editing habits
- Build from top to bottom: header, invoice details, line items, totals, footer.
- Use containers to keep related items aligned.
- Keep snap and guides enabled while arranging components.
- Preview frequently instead of waiting until the layout is finished.
- Save only after the preview successfully renders the expected data.