HTML Templates

HTML templates use a logicless Mustache-style syntax with {{variable}} placeholders. They render client-side in the POS app, which means they work offline — no server connection needed to display or print a receipt.

This is the recommended engine for most users.

Syntax

Variables

Insert data using double curly braces:

<h1>{{store.name}}</h1>
<p>Order #{{meta.order_number}}</p>
<p>Total: {{totals.grand_total_display}}</p>

Use _display variants for pre-formatted currency values (e.g., $12.50 instead of 12.5). See the Receipt Data Reference for all available fields.

Sections (Loops and Conditionals)

Use {{#section}}...{{/section}} to loop over arrays or conditionally show content:

{{#lines}}
<div class="line-item">
  <span>{{name}} × {{quantity}}</span>
  <span>{{line_total_display}}</span>
</div>
{{/lines}}

Inverted Sections

Use {{^section}}...{{/section}} to show content when a value is empty or false:

{{#customer.first_name}}
  <p>Customer: {{customer.first_name}} {{customer.last_name}}</p>
{{/customer.first_name}}
{{^customer.first_name}}
  <p>Guest checkout</p>
{{/customer.first_name}}

Localised Labels

Use {{i18n.key}} for translatable labels that adapt to the store's language:

<th>{{i18n.subtotal}}</th>
<td>{{totals.subtotal_display}}</td>

Common Patterns

Store Header

<div class="header">
  {{#store.logo}}<img src="{{store.logo}}" alt="{{store.name}}" />{{/store.logo}}
  <h1>{{store.name}}</h1>
  {{#store.address_1}}<p>{{store.address_1}}</p>{{/store.address_1}}
  {{#store.address_2}}<p>{{store.address_2}}</p>{{/store.address_2}}
  <p>{{store.city}} {{store.state}} {{store.postcode}}</p>
  {{#store.phone}}<p>{{store.phone}}</p>{{/store.phone}}
</div>

Line Items with Discounts

{{#lines}}
<div class="line-item">
  <div>{{name}} × {{quantity}}</div>
  {{#discount}}
    <div class="discount">
      <s>{{unit_subtotal_display}}</s> {{unit_price_display}}
    </div>
  {{/discount}}
  <div>{{line_total_display}}</div>
</div>
{{/lines}}

Tax Summary

{{#tax_summary}}
<div class="tax-line">
  <span>{{label}} ({{rate}}%)</span>
  <span>{{tax_amount_display}}</span>
</div>
{{/tax_summary}}

Payment Details

{{#payments}}
<div class="payment">
  <span>{{title}}</span>
  <span>{{amount_display}}</span>
</div>
{{#tendered}}
  <div>Tendered: {{tendered_display}}</div>
  <div>Change: {{change_display}}</div>
{{/tendered}}
{{/payments}}

Barcodes and QR Codes

Insert barcodes using data attributes. These are rendered as inline SVGs:

<!-- QR code -->
<div data-barcode="qr" data-value="{{fiscal.qr_payload}}"></div>

<!-- EAN-13 barcode -->
<div data-barcode="ean13" data-value="{{meta.order_number}}"></div>

All bwip-js symbologies are supported.

Styling

HTML templates support standard CSS. Include styles in a <style> block:

<style>
  body { font-family: monospace; font-size: 12px; max-width: 300px; margin: 0 auto; }
  .header { text-align: center; margin-bottom: 16px; }
  .line-item { display: flex; justify-content: space-between; }
  .discount { color: red; font-size: 0.9em; }
  .total { font-weight: bold; border-top: 1px solid black; padding-top: 8px; }
</style>

consejo

For a thermal-printer look without a thermal printer, use the Thermal Style Receipt template from the gallery — it renders a narrow monospace layout in the browser.

Best Practices

• Use _display fields for all currency values — they handle locale-aware formatting automatically
• Use {{i18n.*}} labels instead of hardcoding text so templates work across languages
• Use sections for conditionals — wrap optional fields in {{#field}}...{{/field}} so they're hidden when empty
• Start from a gallery template rather than building from scratch
• Test with the preview in the template editor before activating