mazipan / mazipan/html-tools

feat: add Barcode Generator tool

Open
#135 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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 as js-yaml in json-to-yaml.html) to avoid the sibling-module overhead for this relatively simple integration
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.