From a simple utility to a complete industrial labeling solution: my journey building qrlayout-core and qrlayout-ui
The Problem That Started It All
A few months ago, I was developing an inventory management system for a manufacturing client. They needed to print QR code labels for machines, storage bins, and employee badges across their factory floor.
Sounds simple, right?
Not quite. The existing solutions were either:
- Too simple — Just generating a QR code image wasn't enough. They needed layouts with text, logos, and multiple data fields
- Too locked-in — Most tools only worked with specific printer brands or required proprietary desktop software
- Not web-friendly — Nothing integrated cleanly with modern React/Vue/Angular applications they were already using
That's when I decided to build something better.
The Solution: Two Packages, One Complete Workflow
I created a complete open-source solution consisting of two focused npm packages:
qrlayout-core: The Engine
The headless rendering engine. Handles layout JSON parsing, data merging, and rendering to Canvas, ZPL, or PDF. Zero framework dependencies—pure TypeScript.
qrlayout-ui: The Designer
An embeddable visual designer with drag-and-drop interface. Your users can design labels directly inside your application without learning complex design software.
Together, they provide a complete label design and printing pipeline that works with any modern web framework.
See It In Action
I've deployed a full-featured demo showcasing both packages working together:
Live Demo
Try Now built using React + TypeScript + Tailwind CSS:
Features included:
- Interactive drag-and-drop designer
- Real-time preview with actual data binding
- Pre-built templates for assets, employees, and storage labels
- One-click export to ZPL, PDF, and PNG
Screenshot: Visual designer with properties panel and live QR preview
What Makes This Different?
1. Framework-Agnostic by Design
The core engine has zero dependencies. The UI package works as a web component that plays nice with React, Vue, Angular, Svelte, or vanilla JS.
// Works in any framework
import { QRLayoutDesigner } from 'qrlayout-ui';
const designer = new QRLayoutDesigner({
element: document.getElementById('editor'),
onSave: (layout) => saveToDatabase(layout)
});
2. Industrial-Grade ZPL Export
Most QR tools stop at PNG/PDF. We generate native ZPL (Zebra Programming Language) code that can be sent directly to thermal printers without any middleware. This is game-changing for warehouse and manufacturing environments where speed and reliability matter.
import { StickerPrinter } from 'qrlayout-core';
const printer = new StickerPrinter();
const zpl = printer.exportToZPL(layout, data);
// Send zpl directly to your Zebra printer—no drivers needed!
3. Dynamic Data Binding
Design once, generate thousands. Use variable placeholders like {{fullName}}, {{employeeId}}, or {{department}} in your layouts, then batch-generate unique labels by passing an array of data objects.
4. Print-Ready Precision
Design in millimeters, centimeters, inches, or pixels. The engine handles all conversion math so your labels print exactly as designed—critical when you're fitting information on small 50mm × 30mm thermal labels.
Real-World Use Cases
Machine QR Codes : Equipment name + ID + maintenance link
BIN Labels : Location code + zone indicator
Storage Areas : Area name + capacity + safety icons
Asset Tracking : Serial number + purchase date + owner
Employee Badges : Name + department + access QR
Open Source & Ready for Contributions
This project is MIT licensed. Whether you're interested in:
- Adding new export formats (EPL, DPL, etc.)
- Improving the designer UI/UX
- Creating framework-specific wrappers
- Writing documentation
- Bug fixes and performance improvements
I'd love to hear from you!
Get Started
Core Package
UI Package
GitHub Repository- Source Code
Live Demo- React
Live Demo- Svelte
Top comments (4)
This was really useful in my app - helped me generate print-ready QR labels quickly for machines, inventory bins, and storage locations. Clean setup, reusable, and easy to integrate
Glad it helped!
Very useful package for generating quick QR Layout!
Thanks!