Skip to the object
Tactile UI

Receipt Printer

A small thermal receipt printer that prints any text, line by line. The paper feeds out from behind a serrated steel tear bar in the head's own rhythm, curls a little as it grows, and can be torn off: it rips along the teeth and falls away.

What it is for

Output that arrives as a physical process, for the places a product hands something over: an order confirmation, an AI answer printed line by line, a log, a checkout summary, a ticket.

Installnpx shadcn add https://tactileui.dev/r/printer.jsonWith a Pass: how

Controls

What it prints when it starts, and again when you change it. A | starts a new line. Empty prints nothing, and the preview’s keys print a receipt, an answer, a log and a ticket.

32 is 58 mm paper, 42 is 80 mm. Text is wrapped to it; the paper and the type follow.

Fast lines with a small pause for each; a long line takes a little longer than a short one.

Finish

Auto follows the page: the housing is drawn from the page’s finish (white on a porcelain page, black on a black one); without the kit’s tokens, aluminium on a light page and graphite on a dark one.

Paper

Thermal is a warm off-white with the head’s fine dot grid; recycled is greyer and flecked.

How much the paper remembers its roll: it bends toward you, more the further it is from the slot.

Past this many lines the printer cuts the strip itself and it falls away; printing goes on onto a fresh sheet.

0 is a roll that never ends. Otherwise the lamp goes red when it is used up and printing waits; set it again to load a new roll.

Every highlight and shadow follows it, and the teeth catch it on one side.

A soft thermal whirr for each line, a tick for each key and a rip for the tear. Synthesised, off by default, and only once you have touched the page; never under reduced motion.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
Line by line head, Stepper paper feed, Hinged row curl, Serrated tear clip, Gravity strip drop, Uneven thermal ink, Room fixed sheen, Sleeping loop
Stack
Vanilla ES modules, Dom, CSS
Needs
Nothing, no dependencies
States
13 documented
Version
0.1.0
Licence
With a Pass

States

  1. IdleThe lamp is green; nothing moves; the paper stays where it is.
  2. PrintingThe lamp is amber. Each line steps out a pixel row at a time, its ink coming with it, then the head rests for the rest of the beat; a long line takes a little longer, a rule or a blank half a beat.
  3. CurlingThe paper bends toward you, more the further it hangs from the slot; the rows are hinged edge to edge and the curled end catches the lamp.
  4. TearingBy the Tear key, a call, or a drag down past the resistance: a tug, a rip along the teeth, and the strip falls turning; its top edge is the bar's zigzag and a fresh sheet is already in the slot.
  5. Auto cutPast the paper length the printer cuts the strip itself and printing goes on.
  6. Out of paperWhen the roll's lines are used up the lamp goes red and printing waits; set a new roll and it goes on.
  7. FeedingThe Feed key feeds two lines; held, it keeps feeding.
  8. Thermal and recycledWarm off-white stock with a faint fibre grain and the head's dot grid, or greyer flecked recycled stock.
  9. AluminiumA bead-blasted case, steel bar and lit legends.
  10. GraphiteA soft-touch black case and a blackened bar.
  11. SoundOptional: a soft whirr for each line, a tick for each key, a rip for the tear. Off by default and only after the page has been touched.
  12. Off screen or hiddenThe queue holds and nothing runs.
  13. Reduced motionText appears whole with no feeding; a tear removes the strip; no sound.

Notes

Everything printed is real text in the page, announced politely as it prints; Feed and Tear are buttons, and the paper can also be torn by dragging it down. A plain, small API (print, feed, tear, clear) with events for each line, for the end of a job and for the tear.

Original. The paper is DOM and CSS: each printed line is a row of real text in a plane hinged to the one above, so the curl is a bend of the whole strip in perspective and the text stays selectable and readable. The tear bar and the torn edge share one zigzag polygon computed from the width.

Anatomy

Line by line head, Stepper paper feed, Hinged row curl, Serrated tear clip, Gravity strip drop, Uneven thermal ink, Room fixed sheen, Sleeping loop

Usage notes

Output that arrives as a physical process, for the places a product hands something over: an order confirmation, an AI answer printed line by line, a log, a checkout summary, a ticket. Everything printed is real text in the page, announced politely as it prints; Feed and Tear are buttons, and the paper can also be torn by dragging it down. A plain, small API (print, feed, tear, clear) with events for each line, for the end of a job and for the tear.

Options

OptionTypeDescription
texttextWhat it prints when it starts, and again when you change it. A | starts a new line. Empty prints nothing, and the preview’s keys print a receipt, an answer, a log and a ticket.
widthnumberText is wrapped to it; the paper and the type follow.
speednumberFast lines with a small pause for each; a long line takes a little longer than a short one.
finishenumAuto follows the page: the housing is drawn from the page’s finish (white on a porcelain page, black on a black one); without the kit’s tokens, aluminium on a light page and graphite on a dark one.
paperenumThermal is a warm off-white with the head’s fine dot grid; recycled is greyer and flecked.
curlnumberHow much the paper remembers its roll: it bends toward you, more the further it is from the slot.
maxLengthnumberPast this many lines the printer cuts the strip itself and it falls away; printing goes on onto a fresh sheet.
rollnumber0 is a roll that never ends. Otherwise the lamp goes red when it is used up and printing waits; set it again to load a new roll.
lightnumberEvery highlight and shadow follows it, and the teeth catch it on one side.
soundbooleanA soft thermal whirr for each line, a tick for each key and a rip for the tear. Synthesised, off by default, and only once you have touched the page; never under reduced motion.
labeltextAccessible name

Methods

  • length
  • busy
  • print
  • feed
  • tear
  • clear
  • update
  • destroy

How it works

Original. The paper is DOM and CSS: each printed line is a row of real text in a plane hinged to the one above, so the curl is a bend of the whole strip in perspective and the text stays selectable and readable. The tear bar and the torn edge share one zigzag polygon computed from the width.