Barcode Tool Guide

The barcode tool makes the linear barcodes found in shops and warehouses, checks what you type as you type it, and understands barcodes that carry data inside them. This guide covers each part of it, from choosing a symbology to writing layouts of your own.

Making a barcode

Choose Make, pick a symbology, and type the data. The barcode redraws on every keystroke. When the data cannot be encoded, the field is marked and a line under it says why. When you supply a check digit that is wrong, the tool shows the right one and offers a button that puts it in.

The symbologies, and what each takes, are these:

Symbology	Used for	Data
EAN-13	Products worldwide	12 digits, or 13 with the check digit
EAN-8	Small packages	7 digits, or 8 with the check digit
UPC-A	Products in North America	11 digits, or 12 with the check digit
UPC-E	Small North American packages	6 digits, 7 with the number system (0 or 1), or 8 with the check digit
GS1-128	Logistics labels and data-carrying codes	Element strings such as (01)09501101530003(17)271231(10)LOT42A
ITF-14	Shipping cases	13 digits, or 14 with the check digit
Interleaved 2 of 5	Numeric codes printed by a store or warehouse	An even number of digits
Code 128	Internal labels	Any printable ASCII character
Code 39	Older internal labels	Capital letters, digits, and - . space $ / + %
Codabar (NW-7)	Membership cards, coupons, libraries	Digits and - $ : / . +, between start and stop characters A to D

Some symbologies have options under the data field. Interleaved 2 of 5, Code 39 and Codabar can add a check character, Codabar lets you choose its start and stop characters, and ITF-14 draws its bearer bars unless you turn them off. For an EAN-13, the line under the barcode names the country or range of its GS1 prefix, so 480 reads as the Philippines and 20 to 29 as in-store codes.

Highlights

The check boxes under the barcode control what is marked. Check digits colors the check characters purple. Guards, start and stop marks the fixed patterns at the ends and in the middle of the symbol. With a layout, Field colors gives each field its own color. The marks are bands drawn below the bars and colors on the printed digits; the bars themselves stay black, because a scanner sees red bars as white and would not read them.

Downloads and links

Download SVG saves the barcode sized in millimetres, at the module width you choose. For EAN and UPC codes, 0.33 mm is the nominal size, and the standard allows from 80% to 200% of it. Download PNG saves an image at 300 dots per inch. Downloads leave out the highlights unless you tick Highlights in downloads, so a downloaded barcode is ready to print and scan. Copy link copies an address that reproduces the barcode exactly, layout and field values included.

Layouts: data inside a barcode

Many retail barcodes carry more than a single number. An in-store code for loose produce holds an item and a price, a coupon holds a discount type and a value, and a receipt holds a store, a register, a date and a transaction. A layout names those fields. With one chosen, the tool shows a box for each field, builds the barcode from them, colors each field in the symbol, and writes a line explaining the result.

The Layout menu lists six demonstration layouts. They are invented for this guide, but each follows a common pattern: a price-embedded item, a weight-embedded item, a GS1-128 logistics label, a receipt lookup code, a Codabar membership card, and a store coupon.

The layout format

A layout is JSON. A file holds a list of them, and the tool's editor works on one at a time. This is a complete file with one layout:

{
  "format": "pc-barcode-layouts",
  "version": 1,
  "layouts": [
    {
      "id": "shelf-price",
      "name": "Shelf price label",
      "symbology": "ean13",
      "description": "An in-store code carrying a department, an item and a price.",
      "explain": "Department {dept:meaning}, item {item}, at {price}.",
      "fields": [
        { "id": "prefix", "name": "Prefix", "type": "fixed", "values": ["24"], "color": "blue" },
        { "id": "dept", "name": "Department", "type": "enum",
          "values": { "1": "produce", "2": "bakery", "3": "deli" }, "color": "orange" },
        { "id": "item", "name": "Item", "type": "number", "length": 4, "color": "gray" },
        { "id": "price", "name": "Price", "type": "decimal", "length": 5, "decimals": 2, "color": "green" }
      ],
      "sample": { "dept": "2", "item": "318", "price": "4.75" }
    }
  ]
}

Fields follow one another in order, and each field's length decides where the next one starts, so a layout never states positions. The tool shows positions counted from 1. For EAN, UPC and ITF-14 layouts the fields cover the data before the symbology's own check digit, which the tool adds.

A layout has these keys:

Key	Meaning
id	Letters, digits and hyphens, unique among your layouts.
name	The name shown in the menu.
symbology	One of ean13, ean8, upca, upce, gs1-128, code128, itf, itf14, code39 or codabar.
fields	The fields, in order.
description	Optional text shown above the fields.
explain	Optional template for the line under the barcode.
options	Optional symbology options, such as {"start": "A", "stop": "B"} for Codabar or {"check": true}.
hri	Optional. The printed line: "data" (the default), "none", or a template.
sample	Optional field values filled in when the layout is chosen.

Every field has an id, a name and a type. It may also have a color (blue, gray, orange, green, purple, teal, red or gold) and a description. These are the types:

Type	What it holds	Keys
fixed	One of a set of literal values, such as a prefix. The first is the default.	values
number	Digits, padded with zeros on the left to its length unless pad is "none".	length, pad
text	Characters the symbology allows, of an exact length or up to a maximum. Only the last field may vary in length, except in GS1-128.	length or maxLength
date	A calendar date, checked for real, in a format built from dd, mm, yy and yyyy.	format
decimal	A number with implied decimal places, typed as 12.50 or as raw digits.	length, decimals, prefix, suffix
enum	A code from a table, each with a meaning.	values, an object of code to meaning
check	A check digit the tool computes over earlier fields.	algorithm, over

A check field's algorithm is gs1-mod10 (the EAN and UPC method), luhn (payment and membership cards), mod11 (weights 2 to 7 from the right, with a result of 10 written as 0), or 7dr (the remainder after dividing by 7). By default it covers every earlier field; list field ids in over to cover only some.

In an explain template, {price} is a field's formatted value, {price:raw} is its encoded digits, and {dept:meaning} is an enumeration's meaning. An hri template takes {field} and {field:unpadded}, the latter dropping leading zeros, which suits a store number printed without them.

GS1-128 layouts

In a GS1-128 layout, a field with an ai key starts a new element string with that Application Identifier, and a field without one continues the element before it. That lets a GTIN be split into its digits and its check digit:

{ "id": "gtin",  "name": "GTIN", "type": "number", "length": 13, "ai": "01" },
{ "id": "check", "name": "GTIN check", "type": "check", "algorithm": "gs1-mod10", "over": ["gtin"] },
{ "id": "best",  "name": "Best before", "type": "date", "format": "yymmdd", "ai": "15" }

The tool inserts the separators GS1 requires after variable-length elements. Company-internal AIs 91 to 99 are accepted with any structure you give them.

Reading a barcode back

Choose Read and paste a scanned value. Every layout whose shape fits is tried: its length must match, and its fixed fields must match exactly. Each match is shown as a table of fields with their positions, encoded values and meanings, together with any problems, such as a check digit that does not add up or a date that does not exist. The best match comes first, and Open in Make loads it into the fields.

Without a matching layout, the tool still says what it can. It checks an EAN-13 and names its prefix, recognizes a UPC-A, an EAN-8 or a UPC-E, and lays out GS1 element strings with each AI named and its dates and weights formatted. Paste GS1 data with the AIs in parentheses.

Your own layouts

The Layout menu holds the tools for your own layouts. New layout from JSON opens an editor with a starting point, and Edit this layout as JSON opens the chosen one; saving checks the layout and lists every problem it finds. Save this layout as JSON downloads the chosen layout as a file, and Export all layouts downloads every layout, the demonstrations included, as one file. Import layouts reads such a file back, skipping the demonstrations it already has.

Your layouts are kept in your browser. They stay when you close it, but they belong to that one browser on that one device, and clearing the site's data or using Forget this browser's data in the settings removes them. This site never receives them.

Keeping layouts in a file

In Edge and Chrome, the tool can also keep your layouts in a JSON file on your own disk. Create a layouts file saves them to a new file, and Open a layouts file links an existing one, adding in any layouts that were only in the browser. From then on every change is written to that file. Put it in a folder that syncs, such as OneDrive, and the same layouts follow you to each computer. After the browser restarts it asks once for permission to use the file again; the tool shows a Reopen button for that. Unlink the layouts file stops writing to it and leaves the file where it is.

When two computers change the same file at once, the last one to save wins, so edit layouts on one machine at a time.