Technical Specification: Free Client-Side Barcode Generator

Overview

A robust, single-file, browser-based utility designed to generate standard retail and logistical barcodes. The tool prioritizes privacy, speed, and ease of use, leveraging client-side rendering to ensure no data is stored or transmitted.

Core Features

• Real-Time Generation: As the user types, the barcode updates instantly.
• Symbology Support: Dropdown selection for UPC-A, UPC-E, EAN-13, EAN-8, Code 128, Code 39, and ITF-14.
• Customization Options:
  • Adjustable barcode width and height.
  • Foreground/Background color selection (hex/color picker).
  • Toggle for showing/hiding human-readable text below the barcode.
• Export/Download: One-click download as PNG file.
• Print-Ready: A dedicated print view that styles the output for standard printer paper.

UI Layout & Aesthetics

• Design Aesthetic: Minimalist "SaaS" style. Light, airy, high-contrast. Use a white background (#FFFFFF) with a soft grey border (#E5E7EB) and subtle drop shadows.
• Layout:
  • Left Sidebar: Contains inputs, dropdowns, and settings controls in a vertical stack.
  • Main Stage: Centered area displaying the generated barcode image preview.
  • Action Header: Clean navigation bar with tool title and "Download" button.
• Typography: Clean, professional sans-serif fonts (e.g., Inter, system-ui).

Technical Implementation

• Library: Use JsBarcode loaded via CDN for reliable rendering.
• Single-File Logic: All CSS (Tailwind via CDN), HTML structure, and Vanilla JS logic contained within a single index.html.
• Persistence: STRICTLY NO localStorage or sessionStorage. All state is managed in local JS variables.
• State Management: React-like state pattern using a single object { value, format, width, height, background, foreground, displayValue } that triggers a redraw function on every change.
• UI Modals: Use an invisible div overlay (e.g., id="modal") for system messages or errors instead of alert().
• Downloads: Generate via canvas.toDataURL() and trigger via a hidden anchor tag click() event.

Styling Constraints

• Colors: Use a neutral palette. Primary buttons: #2563EB (Blue). Background: #F9FAFB. Surface: #FFFFFF. Text: #111827.
• Transitions: Apply transition: all 0.2s ease-in-out on all UI interactive elements (buttons, inputs).
• Responsive: Stack inputs vertically on mobile; use a two-column grid on desktop.

Sandbox Compliance

• The app will be running in a null-origin iframe.
• External assets (Google Fonts, CDN libraries) must be explicitly allowed if the iframe sandbox permits it; otherwise, fallback to system fonts.
• No window.open unless using a secure target.
• No localStorage - ensure the code is resilient and does not throw errors if attempts to access storage are blocked.