Pixel UI/Delight/Receipt printer

Receipt printer

A little thermal printer that prints your content, line by line.

<piix-receipt>DOM + canvas

Piixpal Store

#0042 · 19 Oct 2026

Pixel pal (kitty)

Extra pats

Total

Thanks for shopping!

<piix-receipt width="300px">
  <h3>Piixpal Store</h3>
  <p data-center>#0042 · 19 Oct 2026</p>
  <hr>
  <p data-price="$12.00">Pixel pal (kitty)</p>
  <p data-price="$4.00">Extra pats</p>
  <hr>
  <p data-price="$16.00" data-total>Total</p>
  <p data-center>Thanks for shopping!</p>
</piix-receipt>

When it scrolls into view the printer wakes up, its light blinks and the paper feeds out one line at a time, each one swept on by the print head. Headings print as big pixel titles, <hr> as a dashed rule, and anything with data-price gets a dotted leader out to its price. When it is done, TEAR rips it off along a zigzag. Your markup stays real the whole time: readable, selectable and searchable.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just receipt printer (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/receipt.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-receipt width="300px">
      <h3>Piixpal Store</h3>
      <p data-center>#0042 · 19 Oct 2026</p>
      <hr>
      <p data-price="$12.00">Pixel pal (kitty)</p>
      <p data-price="$4.00">Extra pats</p>
      <hr>
      <p data-price="$16.00" data-total>Total</p>
      <p data-center>Thanks for shopping!</p>
    </piix-receipt>
  );
}

Usage

<piix-receipt width="300px">
  <h3>Piixpal Store</h3>
  <p data-center>#0042 · 19 Oct 2026</p>
  <hr>
  <p data-price="$12.00">Pixel pal (kitty)</p>
  <p data-price="$4.00">Extra pats</p>
  <hr>
  <p data-price="$16.00" data-total>Total</p>
  <p data-center>Thanks for shopping!</p>
</piix-receipt>

Examples

Your year, printed

Anything goes on the paper: here, a year-end summary.

2026 Wrapped

Commits

Pals shipped

Pats given

See you in 2027

<piix-receipt width="280px" speed="5">
  <h3>2026 Wrapped</h3>
  <p data-price="1,412">Commits</p>
  <p data-price="38">Pals shipped</p>
  <p data-price="∞">Pats given</p>
  <hr>
  <p data-center>See you in 2027</p>
</piix-receipt>

Print on demand

With start="manual" it waits for print().

Order #77

Pixel tee

Total

Checkout

<piix-receipt id="order" start="manual" width="260px">
  <h3>Order #77</h3>
  <p data-price="$9.00">Pixel tee</p>
  <p data-price="$9.00" data-total>Total</p>
</piix-receipt>
<piix-button tone="ink" size="sm" onclick="order.print()">Checkout</piix-button>

API reference

Attribute	What it does	Default
`width`	the paper width	`320px`
`speed`	lines a second	`7`
`start`	`view`: print when it scrolls into view. `manual`: wait for `print()`	`view`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–
`data-price`	on a line inside: a dotted leader out to this price	–
`data-total`	on a line inside: bold and a little bigger	–
`data-center`	on a line inside: centred	–

Events

Event	When
`printed`	the last line is out
`tear`	it was torn off

Methods

Method	What it does
`print()`	print it (again)
`tear()`	tear it off
`reset()`	back into the printer

Accessibility

The paper is your own markup, readable by screen readers from the start, not only once printed.
TEAR is a real button.
With reduced motion it prints all at once.