Barcodes

The barcode draws Code 128, Code 39, EAN-13, EAN-8, UPC-A, ITF, Data Matrix and PDF417 from a value, as sharp vector bars that print as cleanly as the printer can. Check digits are worked out for you, and a value that cannot be a barcode says why. The QR code takes a link, a Wi-Fi network, a contact card or any text, with square, rounded or dotted modules, your colours and a logo in the middle. Both save as SVG or PNG.

The signature pad is a form field: a signature drawn with a mouse, a finger or a pen, or a name typed instead, sent with the form as a picture or as the strokes. The barcode scanner is a field for codes: a hand-held scanner types into it, and in browsers that can read barcodes the camera does too. Everything is made and read in the page; nothing about your codes or signatures leaves it.

A shipping label

A parcel label with the carrier's Code 128 tracking number, a Data Matrix of the shipment's details and a QR code to track it. Change the tracking number or the weight and every code follows; save any of them as a picture for your label printer.

Save the tracking barcode

Save the QR code

Northgate Parcels Tracked 48 · 2.4 kg

Deliver to A. Okafor 14 Elm Row Leeds LS2 7EY United Kingdom

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-input id="bc-tracking" label="Tracking number" value="BMX4428105GB" style="inline-size: 14rem"></bmx-input>
<bmx-input id="bc-weight" label="Weight (kg)" value="2.4" inputmode="decimal" style="inline-size: 8rem"></bmx-input>
<bmx-qr-code id="bc-qr" size="112" margin="2" error-correction="Q" label="QR code to track this parcel"></bmx-qr-code>
<bmx-barcode id="bc-track" type="code128" bar-height="70" module-width="2" label="Tracking barcode"></bmx-barcode>
<bmx-barcode id="bc-gs1" type="datamatrix" module-width="3" label="Data Matrix with the shipment's details"></bmx-barcode>

Products, cartons and parts

The codes on things you sell and store. Give EAN and UPC values without their last digit and it is worked out and printed; give it with a wrong last digit and you are told, rather than getting a barcode that scans as another product. Type a product number to try.

EAN-13, a product

EAN-8, a small pack

UPC-A, North America

ITF-14, an outer carton

Code 39, a part number

Data Matrix, a serial number

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-input id="bc-ean" label="EAN-13, twelve or thirteen digits" value="501234567890" inputmode="numeric" style="inline-size: 16rem"></bmx-input>
<bmx-barcode id="bc-ean-out" type="ean13" value="501234567890"></bmx-barcode>
<bmx-barcode type="ean8" value="9638507"></bmx-barcode>
<bmx-barcode type="upca" value="03600029145"></bmx-barcode>
<bmx-barcode type="itf" value="1540014128876" check-digit bar-height="56"></bmx-barcode>
<bmx-barcode type="code39" value="PART-0042" module-width="1.5"></bmx-barcode>
<bmx-barcode type="datamatrix" value="SN:2026-10-06-0001;LOT:42" module-width="4"></bmx-barcode>

Boarding passes and driving licences

PDF417 is the stacked code on boarding passes, driving licences and shipping labels: hundreds of characters in a strip the width of a card. Choose how much of the code can be damaged and still read (the error correction level), how many columns wide it is, and the compact form for tight labels.

Recommended

Level 2

Level 4

Level 6

Automatic

Save as PNG

Boarding pass BA 0117 · LHR → JFK

Passenger OKAFOR/ADA Seat 014C · Gate closes 10:35

A driving licence: about two hundred and fifty characters

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-input id="bc-pax" label="Passenger" value="OKAFOR/ADA" style="inline-size: 12rem"></bmx-input>
<bmx-input id="bc-seat" label="Seat" value="014C" style="inline-size: 6rem"></bmx-input>
<bmx-select id="bc-level" label="Error correction" value="auto" style="inline-size: 12rem">
  <bmx-option value="auto">Recommended</bmx-option>
  <bmx-option value="2">Level 2</bmx-option>
  <bmx-option value="4">Level 4</bmx-option>
  <bmx-option value="6">Level 6</bmx-option>
</bmx-select>
<bmx-select id="bc-cols" label="Columns" value="auto" style="inline-size: 9rem">
  <bmx-option value="auto">Automatic</bmx-option>
  <bmx-option value="3">3</bmx-option>
  <bmx-option value="5">5</bmx-option>
  <bmx-option value="8">8</bmx-option>
</bmx-select>
<bmx-barcode id="bc-pass-code" type="pdf417" module-width="2" label="Boarding pass PDF417"></bmx-barcode>
<bmx-barcode id="bc-licence" type="pdf417" module-width="1.5" columns="6" label="Driving licence PDF417"></bmx-barcode>

<script>
  const barcode = document.getElementById('bc-pass-code');
  barcode.columns = [ /* your columns */ ];
</script>

QR codes that look like yours

Square, rounded or dotted modules in your colours, with the three corner squares kept solid so every camera still finds them. With a logo the code is made at the highest error correction, so it still reads with the middle covered. Below, a Wi-Fi code for visitors and a contact card, made as you type.

Square

Rounded, in your colour

Dots, with a logo

Wi-Fi for visitors

A contact card

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-qr-code value="https://www.binarymission.co.uk/" size="150"></bmx-qr-code>
<bmx-qr-code value="https://www.binarymission.co.uk/" size="150" module-style="rounded" style="--bmx-qr-code-color: #0b3d91"></bmx-qr-code>
<bmx-qr-code id="bc-qr-logo" value="https://www.binarymission.co.uk/" size="150" module-style="dots" style="--bmx-qr-code-color: #5f3dc4"></bmx-qr-code>
<bmx-input id="bc-ssid" label="Network" value="Acme Guest"></bmx-input>
<bmx-input id="bc-pass" label="Password" value="welcome-2026"></bmx-input>
<bmx-qr-code id="bc-wifi" size="160" module-style="rounded" show-value label="QR code to join the Acme Guest Wi-Fi network"></bmx-qr-code>
<bmx-input id="bc-name" label="Name" value="Maya Shah"></bmx-input>
<bmx-input id="bc-phone" label="Phone" value="+44 20 7946 0958"></bmx-input>
<!-- …and 2 more like these -->

Proof of delivery

A driver's form: the parcel's code, scanned or typed, the name of whoever took it, and their signature, drawn or typed. The signature is a form field like any other — required here — and the form sends it as a PNG. Nothing is sent anywhere: the page shows what your server would receive.

Confirm the delivery to see what your server would receive.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-barcode-scanner name="parcel" label="Parcel" value="BMX4428105GB" required></bmx-barcode-scanner>
<bmx-input name="receiver" label="Received by" placeholder="Name" required></bmx-input>
<bmx-signature-pad id="bc-sig" name="signature" label="Signature" required description="Sign with a mouse, a finger or a pen, or choose Type to type your name."></bmx-signature-pad>

A stock count

Scan items into a count. A hand-held scanner types the code and presses Enter, which counts it here without sending a form; type a code and press Enter to try. Where the browser can read barcodes — Chrome and Edge on Android and macOS — the camera and picture buttons appear too: point your phone at the codes below.

Code	Item	Kind	Count
Nothing counted yet.

Desk lamp

Batteries

Oak chair

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-barcode-scanner id="bc-scan" label="Item code" placeholder="Scan or type, then Enter" formats="ean13, ean8, upca, code128, qr, datamatrix, pdf417"></bmx-barcode-scanner>
<bmx-barcode type="ean13" value="5012345678900"></bmx-barcode>
<bmx-barcode type="ean8" value="96385074"></bmx-barcode>
<bmx-qr-code value="SKU-CHAIR-OAK-02" size="120" margin="2"></bmx-qr-code>