> ## Documentation Index
> Fetch the complete documentation index at: https://docsy3.mile.app/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/mile-app/Jxh3hvdoSQI4O3RP/images/add-on/invoice-generator/builder-overview.png?fit=max&auto=format&n=Jxh3hvdoSQI4O3RP&q=85&s=d28b93b82568065d39fbcd4368642bd1" 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/mile-app/Jxh3hvdoSQI4O3RP/images/add-on/invoice-generator/keyboard-shortcuts.png?fit=max&auto=format&n=Jxh3hvdoSQI4O3RP&q=85&s=935fbad1b5d94dfb0dafa6996ef5858d" 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/mile-app/Jxh3hvdoSQI4O3RP/images/add-on/invoice-generator/template-library.png?fit=max&auto=format&n=Jxh3hvdoSQI4O3RP&q=85&s=b6830ad9868b881e5bb97b14a396eda0" 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/mile-app/Jxh3hvdoSQI4O3RP/images/add-on/invoice-generator/print-settings.png?fit=max&auto=format&n=Jxh3hvdoSQI4O3RP&q=85&s=801c8d98a4028eaf661f9e3fa7969c00" 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.