Labels
The label designer designs and prints labels in the page: shipping labels, product and shelf labels, asset tags, name badges, sample tubes and price tickets. Measure in millimetres, inches or points at the printer's own resolution; place text that wraps or shrinks to fit, barcodes from Code 128 and GS1-128 to QR, Data Matrix and PDF417 - every bar sized to whole printer dots, so what is designed is what scans - pictures, boxes and lines, and drag, resize, align and snap them.
Bind any of it to data with fields such as {{name}}, filters such as {{price|number:2}}
and a serial number that counts, load a CSV and step through the records, and print the whole job on A4 or Letter
sheets of die-cut labels or thermal rolls - at real size from the browser, or as a PDF, ZPL for thermal
printers, PNG at the printer's resolution or SVG.
Three label jobs
A shipping label on a thermal roll, shelf-edge labels on an A4 sheet of 21, and asset tags with a serial number that counts up. Choose an element to edit it, drag it, pull a handle; the Data tab steps through the records, Sheet preview shows every page, and Print and Export make the whole job.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-label-designer id="lb-design" label="Label designer" style="inline-size: 100%; --bmx-label-designer-height: 44rem"></bmx-label-designer>
Straight to a thermal printer
Warehouse bin labels for a 100 × 50 mm roll at 203 dpi, shown as they will print and locked against changes. Make the ZPL - the language thermal label printers speak - and send it to the printer from your page or server: text stays text and barcodes stay barcodes, so the printer draws them itself.
// ZPL goes to the printer's raw port (9100) from your server, or to a print agent on the warehouse PC.
const zpl = await designer.exportZpl();
await fetch('/api/printers/bay-3/raw', { method: 'POST', body: zpl });