Tearline

Any HTML you wrap in this one tag prints out as a thermal receipt. Then save it as a PNG.

Zero dependencies. No build step. Works from a <script> tag. MIT.

npm i @compoundlabs/tearline

import '@compoundlabs/tearline';

Or with no bundler at all:

<script type="module" src="https://tearline.thecompound.tech/tearline.js"></script>

<tear-line barcode="047320260726">
  <h1>MERIDIAN</h1>
  <small>Coffee &amp; Provisions</small>
  <hr>
  <p>Cortado · 4.25</p>
  <p><strong>Total · 4.25</strong></p>
</tear-line>

Attributes

| | | |---|---| | width | paper width in px (default 330) | | seed | integer; same seed gives the same tear and barcode (default 1) | | barcode | string to render as bars; omit for none | | tilt | degrees of rotation (default -1.15) | | flat | present means no rotation and no drop shadow, for embedding and export | | animate | present means a print-out reveal on first paint |

Methods

await el.toBlob({ scale: 2 });     // Blob
await el.toDataURL({ scale: 2 });  // string
await el.download('receipt.png');  // saves it

The export event

tearline:stage fires as an export moves through its four real steps: flatten, serialise, rasterise, encode. rasterise is where the time and the failures both live.

The one constraint

Rendering to an image uses an SVG <foreignObject>, which cannot reach across the network. Any <img> inside the receipt must be a data: URI or the export will drop it. Text and CSS are inlined automatically.

Naming

Published under the studio's original scope because the registry refuses the bare name tearline: its similarity filter reads it as too close to readline. The element is <tear-line> either way. The studio is Compound Labs at thecompound.tech; the @compound scope on npm belongs to another account, so the package keeps the scope it was first published under.

Live playground: https://tearline.thecompound.tech