Español

Thermal series · Web Component

An invoice, printed live

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

Default invoice

Takes an invoice object and works out totals, currency and date.

  • en-US
  • USD
  • Sound
  • 3.2 s

02 · Slot

Kitchen ticket

Your own markup as children: it replaces the receipt and keeps the animation.

  • Custom HTML
  • Custom labels
  • 58 mm
  • 2.2 s

Table 12

Ticket 0451 · 3 guests

  1. 2 Tacos al pastorno onion
  2. 1 Red pozole
  3. 3 Hibiscus water

⚑ Allergy: peanuts

03 · Theme & locale

Café receipt

Different locale and currency, tax and discount, light theme and no barcode.

  • en-GB
  • GBP
  • Muted
  • 4.5 s

04 · Live

Edit the JSON

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.

invoice.json

Valid JSON

05 · Backend

Data from an API

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.

GET /api/ventas/:folio.json
Pick a sale to request it from the backend.

No data

06 · Slot

Discount coupon

A ticket that is not an invoice: custom design in the slot and a QR code to redeem it.

  • Custom HTML
  • QR
  • 2.6 s

GREEN MARKET

Discount coupon

−20%

on fruit and vegetables

CodeGREEN20

Valid
Oct 21 – Nov 3, 2026
Min. spend
$15
Uses
1 per customer

Cannot be combined with other offers.

07 · Slot

Boarding pass

Route, gate and seat in large type, and an Aztec code with the pass data in BCBP format.

  • Custom HTML
  • Aztec
  • 80 mm
  • 3.8 s

NUBE AIRLINES

Boarding pass

MEXMexico City

CUNCancún

Passenger
LÓPEZ / ANA
Flight
NB 512
Date
24 OCT
Boarding
07:25
Gate
B12
Seat
14A
Group
3

Booking ABC123 · Sequence 042

The gate closes 15 min before departure.

08 · Hardware

A real thermal printer

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.

ESC/POS · CP858

No printer connected