Barcode Generator

I wrote my first barcode generator in 2015. It drew EAN-13 codes out of lots of little div elements, and it has not worked for a while. This applet is its replacement: it draws to a canvas, handles more symbologies, and it even lets you encode embedded data from a custom layout.

The applet is written with PUDL, a library based on a design language I'm working on, Pleasantly Usable Design Language.

What It Makes

It makes EAN-13, EAN-8, UPC-A and UPC-E for products; GS1-128, ITF-14 and Interleaved 2 of 5 for cases and logistics; and Code 128, Code 39 and Codabar for everything else a store prints for itself. It checks what you type as you type it, works out check digits, and tells you when a supplied one is wrong. The highlights mark the check digits and the guard, start and stop patterns underneath the bars, where they do not stop a scanner from reading the result. Downloads come as SVG, sized in millimetres for printing, or as PNG.

Data Inside the Barcode

Plenty of retail barcodes are not just a number. An in-store code for loose produce typically contains the item number and a price. A coupon may contain a discount type and value. A receipt barcode may contain a store, a register, a date and a transaction. A layout describes those fields, so the tool can build the barcode from them, color each one, and explain the result in words. These demonstrations are invented, but each one follows a common pattern:

• A price-embedded item in the in-store EAN-13 range
• A weight-embedded item
• A logistics label with a GTIN, an expiry date, a weight and a batch, as GS1-128
• A receipt lookup code in Interleaved 2 of 5
• A membership card in Codabar, with a Luhn check digit
• A store coupon with a discount type, a value and an expiry date

Reading a Barcode Back

The Read side works the other way round. Paste a scanned value and the tool tries every layout whose shape fits, splits the value into its fields, checks the check digits and dates, and says what it found. Even without a layout it recognizes a valid EAN-13 and names its GS1 prefix, and it lays out GS1 element strings with each Application Identifier named.

Your Own Layouts

You can write layouts of your own in JSON, either in the tool's editor or in a file you import. They are kept in your browser, or in Edge and Chrome in a file on your own disk that the tool writes to, and this site never sees them. That matters for anyone working with a retailer's own barcode formats, which are usually not public.

The barcode tool guide covers everything in detail, including the layout format with examples.