Previewing Receipt Commands
Use the live preview panel to verify how each command will appear on paper before sending a test print.
The Preview panel renders your template in real time as you build it, using a fixed set of sample data. Every change you make to the command list — adding, removing, reordering, or editing a command — is reflected in the preview immediately. This lets you catch layout problems without printing a physical receipt.
The preview is a faithful Flutter-rendered simulation: text sizing, column widths, alignment, bold, underline, invert, and repeat characters all match what the printer will produce. QR codes are rendered as actual scannable codes. Barcodes are shown as a simplified pattern. Images appear as a placeholder box.
Where to find the preview
| Screen width | How to access the preview |
|---|---|
| Under 600 px (mobile) | Tap the Preview tab at the top of the screen |
| 600–1200 px (tablet) | The preview panel is always visible on the right side of the screen |
| Over 1200 px (desktop) | The preview panel occupies the rightmost column and is always visible |
The panel has a Preview header with a visibility icon. The preview area sits on a grey background; the receipt itself is shown as a white card with a subtle shadow, constrained to 320 px wide.
Empty state
When no commands have been added yet, the preview shows a receipt-shaped outline with a Add commands to see a live preview message. As soon as the first command is added the preview renders immediately.
How each command appears
The preview renders every command type. The table below describes what you will see for each:
| Command | Preview appearance |
|---|---|
| Text | Monospace text with the configured alignment, font scaling, bold, underline, and invert (white text on black background if enabled) |
| Table Row | A flex row where each column occupies its proportional width (out of 12 units). Text in each column is styled independently. |
| Feed Lines / Spacer | Blank vertical space — approximately 5 px per line. |
| Divider | The configured character repeated the configured number of times, for example -------------------------------- |
| Image | A dashed-border placeholder box labelled [IMAGE]. The actual image cannot be rendered in the preview. |
| Barcode | A simplified bar pattern (100 × 40 px) with the barcode type and resolved data value shown below it. If the data is empty, Missing Barcode is shown instead. |
| QR Code | A fully rendered, scannable QR code generated from the resolved data. Size reflects the configured Size property. If the data is empty, Missing QR code is shown. |
| Cut Paper | A dashed horizontal line with a scissors icon and the label CUT. |
| Merge Group | Iterates over the sample collection and renders the nested commands once per item. With the default Line Items collection, two sample product rows appear. |
Merge tags in the preview
Merge tags are resolved against sample data baked into the builder. The preview always uses this fixed dataset regardless of which tenant, store, or order is loaded elsewhere in the app. You cannot substitute your own order data in the preview — use a test print (the print icon in the top bar) for that.
The sample data available to the preview includes:
Store
| Tag | Sample value |
|---|---|
{{store.name}} | Sample Store |
{{store.phone}} | +1 555-1234 |
{{store.email}} | info@samplestore.com |
{{store.orgNumber}} | 123456789 |
{{store.url}} | www.samplestore.com |
{{store.address.street}} | 123 Main Street |
{{store.address.city}} | New York |
{{store.address.zip}} | 10001 |
Order
| Tag | Sample value |
|---|---|
{{order.orderNumber}} | ORD-12345 |
{{order.customerName}} | John Doe |
{{order.customerEmail}} | john.doe@email.com |
{{order.customerPhone}} | +1 555-1234 |
{{order.billingCurrency}} | USD |
{{order.total}} | 125.5 |
{{order.subTotal}} | 115.0 |
{{order.taxTotal}} | 25.1 |
{{order.salesPersonName}} | Jane Smith |
Shipment
| Tag | Sample value |
|---|---|
{{shipment.shipmentMethod}} | Standard Delivery |
{{shipment.trackingNumber}} | TRACK123456789 |
{{shipment.address.name}} | John Doe |
{{shipment.address.street}} | 456 Oak Avenue |
{{shipment.address.city}} | Los Angeles |
Meta
| Tag | Sample value |
|---|---|
{{meta.printedAt}} | The current timestamp at the moment the preview renders |
Collections
When a Merge Group is set to Line Items, the preview iterates over two sample products:
item.* tag | Item 1 | Item 2 |
|---|---|---|
item.displayName | Product A | Product B |
item.code | PROD-A | PROD-B |
item.quantity | 2 | 1 |
item.placedPrice | 25.0 | 65.0 |
item.extendedPrice | 50.0 | 65.0 |
item.taxRate | 25.0 | 25.0 |
item.ean | 1234567890123 | 9876543210987 |
The Discounts collection contains one entry (Summer Sale, code SUMMER10, $5, 10%). The Payments collection contains one entry (Card, $125.50, transaction TXN-789456).
Conditions in the preview
Commands with a condition are evaluated against the sample data. If the condition passes with the sample values, the command appears in the preview. If it fails, the command is hidden — the same behaviour as on a real receipt.
For example, a command with the condition {{order.total}} > 100 will appear in the preview because the sample total is 125.50. A command with {{order.total}} > 200 will be hidden.
This means the preview may not match real receipts if your conditions depend on values that differ significantly from the sample data. Always send a test print with real order data to confirm the final output.
The condition uses the resolved value from sample data. If a merge tag in the condition does not match any sample field, the condition falls back to "truthy if non-empty" — meaning the command will appear.
Limitations
- Images cannot be rendered in the preview — only a placeholder box is shown. The image will print correctly on a real printer if the source is reachable.
- Barcodes are shown as a simplified visual pattern, not an accurate representation of the encoded data. The data value is shown as text below the pattern so you can verify the correct value is being used.
- Merge tags that resolve to empty (because the tag does not exist in the sample data) will appear as empty strings in the preview.
- Font rendering uses Flutter's monospace font, which differs slightly from the actual ESC/POS character set on thermal printers. Column alignment may look slightly different on paper.
Sending a test print
The preview uses sample data only. To test with real store and order data, use the print icon in the builder's top bar. This sends the current template to the configured printer. See Building a Template — Test printing from the builder for the full steps and error messages.