feat: add Barcode Generator tool
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Summary
Add a barcode-generator.html tool supporting the most common 1D barcode formats — a natural sibling to the existing QR Code Generator.
Motivation
"barcode generator online" has solid search volume, particularly from e-commerce developers, warehouse operators, and product teams who need quick test barcodes without installing desktop software. The QR Code Generator already owns this UX pattern in the project — the Barcode Generator reuses it and cross-links naturally.
Proposed UX
- Format selector pills: Code 128 · Code 39 · EAN-13 · EAN-8 · UPC-A · UPC-E · ITF-14
- Input field: updates live; shows a validation error for format-specific constraints (EAN-13 requires exactly 12 digits + auto-computed check digit, etc.)
- Live SVG preview of the barcode with human-readable text below
- Options:
- Show / hide text label below the barcode
- Bar height (px)
- Bar width (narrow bar multiplier)
- Foreground + background color swatches
- Quiet zone toggle
- Export: SVG download · PNG at 1× / 2× / 4× · Copy PNG to clipboard
- Cross-link to QR Code Generator in the UI ("Need a 2D code instead? →")
Implementation notes
- Category: Generators (next to
qr-code-generator.html) - Slug:
barcode-generator - Icon:
📊 - Library: JsBarcode (MIT, ~30 KB) renders directly to an
<svg>element — use a UMD bundle inlined at build time (same pattern asjs-yamlinjson-to-yaml.html) to avoid the sibling-module overhead for this relatively simple integration - Follow
src/_tool-template.htmland runbun run generate:sections,bun run generate:index,bun run generate:faviconafter adding totools.json
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with qr-code-generator.html and src/_tool-template.html to understand the existing generator UX and single-file integration pattern. Add the barcode-generator entry to tools.json, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon. Done means the listed formats, validation, live SVG preview, options, exports, and QR Code Generator cross-link work as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bun, html, javascript
- Domain
- frontend, tooling, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100