Barcode Generator

Generate barcodes in Code128, EAN-13, and more formats.

Barcode Generator turns text or numbers into scannable barcodes — "Generate barcodes in various formats from text input." There is no upload step (the flow starts at "Configure"): enter a "Barcode Value" (placeholder "Enter text or number...", default "1234567890"), pick a Format from Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF-14, and MSI, then set "Bar Width" (1–5), "Height" (30–300), and "Show Text" (Yes/No) for the human-readable line.

"Generate Barcode" renders through JsBarcode to a canvas and hands back a "File Size" stat plus "Download" (barcode.png) and "Start Over". JsBarcode runs locally from the bundled jsbarcode npm package — no network, no AI. Invalid values for a format (e.g. a bad EAN-13 check digit) throw from the library and surface as the "Error generating barcode" toast.

How it works

lib/imageBarcode.ts imports JsBarcode and renders to a canvas (toDataURL('image/png')) plus an SVG element serialized via XMLSerializer (svgString). Options passed: width (default 2), height (default 100), displayValue true, fontSize 16, margin 10. Invalid input for the chosen format makes JsBarcode throw `Invalid barcode value for {format}: …`, which the page catches as "Error generating barcode".

The Zod barcodeSchema requires value min 1, width int 1–5 default 2, height int 10–200 default 100 (the UI slider for height is 30–300), and displayValue boolean default true. State lives in Redux barcodeSlice. JsBarcode is a bundled npm dependency — generation is fully local: no network, no AI.

How to use

Enter "Barcode Value" (default "1234567890").
Choose "Format": Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF-14, or MSI.
Set "Bar Width" (1–5) and "Height" (30–300 on the UI slider).
Toggle "Show Text" (Yes/No) for the human-readable caption under the bars.
Click "Generate Barcode" (button reads "Generating..."; toast "Barcode generated!").
Check the "File Size" stat under the preview (estimated from the data URL length).
Click "Download" (saves barcode.png) or "Start Over".

Tips

EAN-13, EAN-8, and UPC require valid check digits/format lengths — JsBarcode throws otherwise and the page toasts "Error generating barcode".
Higher Bar Width improves scan reliability at distance; Height 100+ is typical for retail labels.
The library also produces an SVG string, but the page only exposes the PNG data URL download.
Show Text = No removes the caption — useful when the label will be printed separately.