01 · Data
Default invoice
Takes an invoice object and works out totals, currency and date.
- en-US
- USD
- Sound
- 3.2 s
Thermal series · Web Component
The paper comes out of the slot at a steady pace, tears off at the end and gets a cut line. A dependency-free Web Component for invoices, kitchen tickets, coupons or boarding passes: it works in Astro, React, Vue or plain HTML.
01 · Data
Takes an invoice object and works out totals, currency and date.
02 · Slot
Your own markup as children: it replaces the receipt and keeps the animation.
Table 12
⚑ Allergy: peanuts
03 · Theme & locale
Different locale and currency, tax and discount, light theme and no barcode.
04 · Live
The whole ticket comes from the JSON: logo, title, date, currency, lines, footer and code. Try "barcodeFormat": "qr". Print once and keep editing: the paper updates on the fly.
Valid JSON
05 · Backend
The backend answers in its own format. The page maps it to InvoiceData, assigns it to invoice and calls print(). With “Custom template”, the same data is drawn by a different template.
Pick a sale to request it from the backend.
No data
06 · Slot
A ticket that is not an invoice: custom design in the slot and a QR code to redeem it.
GREEN MARKET
Discount coupon
−20%
on fruit and vegetables
CodeGREEN20
Cannot be combined with other offers.
07 · Slot
Route, gate and seat in large type, and an Aztec code with the pass data in BCBP format.
NUBE AIRLINES
Boarding pass
MEXMexico City
CUNCancún
Booking ABC123 · Sequence 042
The gate closes 15 min before departure.
08 · Hardware
The ticket from the case 04 editor, turned into ESC/POS with toEscPos() from printer-invoice/escpos. Connect a printer over USB or serial and it comes out on real paper.
No printer connected