An interactive, client-side web application designed for libraries, schools, and archives to generate and print custom barcode labels on standard A4 sticker sheets.
Unlike traditional generators that print sequentially and waste unused stickers, this application provides an interactive cell selector representing the physical sheet. Users can map barcodes to specific labels, making it easy to reuse partially-used sticker sheets and eliminate waste.
- 📍 Interactive Grid Positioning: Click on a virtual representation of an A4 sheet to select target sticker positions for each barcode entry.
- ♻️ Sticker Sheet Reuse: Pick exact coordinates to print barcodes on remaining labels, turning half-used sticker sheets into usable media.
- 📑 Multiple Barcode Batches: Generate multiple barcode records (e.g. different accession numbers or text) and lay them out on a single sheet simultaneously.
- 🔒 Conflict Prevention: Already-assigned cells are locked out from selection across other entries, preventing accidental overlapping print jobs.
- 👁️ Live Real-time Preview: A high-fidelity, scaled-down A4 preview updates dynamically as you type and place stickers.
- 📐 Micro-Calibrated Printing: Embedded layouts calculated in millimeters with variable row spacing adjustments to prevent printing drift across the page.
- 🎨 Premium Aesthetic UI: Styled with glassmorphism, smooth animations, stats tracking, and a clean, responsive layout.
The default sheet format is calibrated for 65-label A4 sheets (Avery or equivalent layouts):
| Layout Parameter | Millimeter Metric | Description |
|---|---|---|
| Paper Size | 210 mm × 297 mm | Standard A4 dimensions |
| Grid Format | 5 columns × 13 rows | 65 individual labels per sheet |
| Label Dimensions | 37 mm × 20 mm | Fits standard books and spine labels |
| Column Spacing | 2.0 mm | Horizontal gap between sticker columns |
| Left Margin | 8.0 mm | Centering alignment padding |
| Top Margin | 9.0 mm | Padding from top edge |
| Row Spacing | Variable (see details below) | Calibrated vertical gaps |
Standard printers experience small vertical feeding expansions (drift/creep) as the print head progresses down the page. To ensure perfect alignment:
- Row 1 Spacing: 2.0 mm (initial calibration offset).
- Rows 2–4 Spacing: 1.7 mm.
- Rows 5+ Spacing: 1.5 mm (micro-adjusted to counter sheet slippage).
In the virtual renderer, we convert physical metrics to pixels using a scale factor of 3.78px per mm (standard 96 DPI conversion).
BVP-Library-Barcode-Generator/
├── src/
│ ├── components/
│ │ ├── A4Preview.tsx # Live rendering engine of the A4 layout
│ │ ├── BarcodeGenerator.tsx # Canvas wrapper invoking JsBarcode
│ │ └── CellSelector.tsx # Interactive popover grid selector
│ ├── utils/
│ │ └── pdfGenerator.ts # Core jsPDF export script with millimeter scaling
│ ├── App.tsx # Main application logic and layout controls
│ ├── main.tsx # React app entry point
│ └── index.css # Core CSS & Tailwind configurations
├── index.html # HTML template
├── package.json # Project configurations & scripts
├── vite.config.ts # Vite compiler configuration
└── tsconfig.json # TypeScript rules
- Node.js (v18.0.0 or higher)
- npm (Node Package Manager)
-
Clone the repository:
git clone https://github.com/anshvermadev/BVP-Library-Barcode-Generator.git cd "BVP-Library-Barcode-Generator"
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
Open http://localhost:5173 in your browser.
-
Build for production:
npm run build
The compiled static assets will be saved in the
/distdirectory.
- Select Layout: Select your label size (e.g.
40L,80L, or standard65L) from the configuration panel. - Add Entry: Click the Add button to add a new barcode item.
- Configure Text: Input the book barcode value (e.g.
BVP-CS-2026-004). - Choose Sticker Position: Click the Target Positions grid indicator. An interactive dropdown panel will open:
- Green cells are selected for this item.
- Dark/Grayed-out cells are occupied by other entries.
- Click cells to toggle selection.
- Export: Once you are satisfied with the positions in the live preview, click Download PDF.
To prevent alignment shifting or offset when printing on sticker sheets, configure the following settings in your print utility (Adobe Acrobat, Chrome Print Dialog, etc.):
Important
- Paper Size: Must be explicitly set to A4 (210 x 297 mm). Do not select "Letter" or "US Letter".
- Scale: Set strictly to 100% or Actual Size. Do not choose "Fit to printable area", "Fit to Page", or "Shrink oversized pages".
- Margins: Choose None or Default.
- Layout Orientation: Portrait.
Ensure that your printer's paper guides are snug against the A4 sheet. Even a 1mm shift at the tray feed will translate to diagonal misalignment. Double check that the Print Scale in your settings is set to 100% / Actual Size.
- Make sure the text length is appropriate for the selected barcode type.
- Ensure the print resolution is set to High/Best quality. Low-ink printing or draft-quality settings cause blurry lines that scanners cannot resolve.
- If necessary, adjust the font size or bar width inside the config options.
Yes. The rendering core uses JsBarcode, which supports CODE128, CODE39, EAN-13, UPC, and ITF. By default, it is set to CODE128 to support custom library alphanumerics.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request