> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mileapp.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Designing Templates

The Builder page is a drag-and-drop canvas where you create and edit print templates. Templates consist of positioned elements that can display static text, dynamic task data, images, barcodes, and tables.

<div align="center">
  <img src="https://mintcdn.com/mileapp-c1584fbc/lT19TBAFfX4u3gQY/images/add-on/invoice-generator/builder-overview.png?fit=max&auto=format&n=lT19TBAFfX4u3gQY&q=85&s=e780cb2fdee109ad443cfa0c4bb3fb0c" alt="Builder overview" width="600" data-path="images/add-on/invoice-generator/builder-overview.png" />
</div>

<p><em>The Builder with a delivery receipt template. Left sidebar shows element types and task data. Right panel shows properties for the selected element.</em></p>

## Adding Elements

Drag any element type from the left sidebar onto the canvas:

| Element       | Description                                                                          |
| ------------- | ------------------------------------------------------------------------------------ |
| **Text**      | Static or data-bound text. Supports font size, family, weight, color, and alignment. |
| **Image**     | Static image (upload or URL) or data-bound image from task photos.                   |
| **Barcode**   | Generates a barcode from a static value or task field. Supports CODE128 format.      |
| **QR Code**   | Generates a QR code from a value or URL.                                             |
| **Line**      | A horizontal or vertical line for separators.                                        |
| **Rectangle** | A bordered rectangle for framing content.                                            |
| **Table**     | A data table that can display bill items from task data.                             |

## Selecting and Editing Elements

* **Click** an element to select it. Blue handles appear for resizing.
* **Cmd+Click** (Mac) or **Ctrl+Click** (Windows) to multi-select elements.
* **Arrow keys** move selected elements by 1px. **Shift+Arrow** moves by 10px.
* **Tab** cycles through elements. **Shift+Tab** goes in reverse.
* **Delete** removes the selected element(s).

## Data Field Binding

To display real task data in your template:

1. Select a text element.
2. In the Properties panel, click **Data Field** (instead of Plain Value).
3. Choose a field from the dropdown (e.g., Customer Name, Status, Start Time).
4. The element immediately resolves to the actual value from the loaded task.

<Note>
  You must select a flow and fetch a task in the Task Data section (bottom of the left sidebar) before data fields resolve. Without task data loaded, elements show placeholder text.
</Note>

## Grid and Snap

The canvas has a grid system to help align elements precisely:

* **Grid toggle** (grid icon or **Ctrl+G**): Shows/hides the dot grid on the canvas.
* **Snap to grid** (bounding-box icon or **Ctrl+;**): Elements snap to grid intersections during drag.
* **Measurements** (rulers icon): Shows position and dimensions overlay near selected elements.
* **Alignment guides**: Orange lines appear when dragging an element near another element's edge, helping you align them.

## Keyboard Shortcuts

Press **F1** or click **Help** to see all available shortcuts.

<div align="center">
  <img src="https://mintcdn.com/mileapp-c1584fbc/lT19TBAFfX4u3gQY/images/add-on/invoice-generator/keyboard-shortcuts.png?fit=max&auto=format&n=lT19TBAFfX4u3gQY&q=85&s=d6d3eb8ad4367ba13a89bba5dcd1058c" alt="Keyboard shortcuts modal" width="600" data-path="images/add-on/invoice-generator/keyboard-shortcuts.png" />
</div>

<p><em>The Help modal lists all keyboard shortcuts organized by category.</em></p>

Key shortcuts:

| Action           | Shortcut                   |
| ---------------- | -------------------------- |
| Copy             | Ctrl+C / Cmd+C             |
| Paste            | Ctrl+V / Cmd+V             |
| Duplicate        | Ctrl+D / Cmd+D             |
| Undo             | Ctrl+Z / Cmd+Z             |
| Redo             | Ctrl+Shift+Z / Cmd+Shift+Z |
| Select All       | Ctrl+A / Cmd+A             |
| Delete           | Delete / Backspace         |
| Toggle Grid      | Ctrl+G                     |
| Toggle Snap      | Ctrl+;                     |
| Horizontal Align | Ctrl+Shift+H               |
| Vertical Align   | Ctrl+Shift+V               |
| Preview          | Ctrl+P                     |
| Help             | F1                         |

## Saving Templates

1. Click **Save Template** in the toolbar.
2. Enter a name and optional description.
3. Click **Save**.

If you modify a saved template, the save dialog offers both **Save** (overwrite) and **Save as New** (create a copy).

## Template Library

Click **Template Library** in the toolbar to see all saved templates.

<div align="center">
  <img src="https://mintcdn.com/mileapp-c1584fbc/lT19TBAFfX4u3gQY/images/add-on/invoice-generator/template-library.png?fit=max&auto=format&n=lT19TBAFfX4u3gQY&q=85&s=611d93b231a7d1a9c4f414f1e6160bf1" alt="Template Library" width="600" data-path="images/add-on/invoice-generator/template-library.png" />
</div>

<p><em>The Template Library shows cards with name, description, last modified date, and page size. Click a card to load the template.</em></p>

* Click a card to load that template onto the canvas.
* Click the trash icon to delete a template (with confirmation).
* Templates show the last modified date and page size/orientation.

## Import and Export

Use the **Export Import** dropdown in the toolbar:

* **Export as JSON**: Downloads the current template as a JSON file for backup or sharing.
* **Import from JSON**: Loads a template from a previously exported JSON file.

## Sample Templates

Click **Sample** in the toolbar to load a pre-built template:

* **Sample Template Invoice**: A standard invoice layout.
* **Sample Template Delivery**: A delivery receipt with customer details and bill items.
* **Sample Template Thermal**: A narrow thermal receipt (80mm width).

## Print Settings

Click **Print Settings** in the toolbar to configure:

* **Page Size**: A4, Letter, or custom dimensions (in mm).
* **Orientation**: Portrait or Landscape.

<div align="center">
  <img src="https://mintcdn.com/mileapp-c1584fbc/lT19TBAFfX4u3gQY/images/add-on/invoice-generator/print-settings.png?fit=max&auto=format&n=lT19TBAFfX4u3gQY&q=85&s=8af2c87be172b7322884521e6bd966cb" alt="Print Settings dropdown" width="600" data-path="images/add-on/invoice-generator/print-settings.png" />
</div>

<p><em>The Print Settings dropdown with page size selector, orientation toggle, and quick action buttons.</em></p>