From a simple npm package to a full-featured industrial label design tool - my journey building qrlayout-core and qrlayout-ui
The Problem That Started It All
A few months ago, I was working on an inventory management system for a manufacturing client. They needed to print QR code labels for assets, storage bins, and employee badges. 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 expensive - Commercial label design software costs hundreds of dollars per license.
• Too locked-in - Most tools only worked with specific printer brands or required proprietary software.
• Not web-friendly - Nothing integrated cleanly with modern React/Vue/Angular applications.
That's when I decided to build something better.
Introducing QR Layout Tool
I created a complete open-source solution consisting of two npm packages:
qrlayout-core: The headless rendering engine. Handles layout JSON parsing, data merging, and rendering to Canvas, ZPL, or PDF.
qrlayout-ui :An embeddable visual designer. Drag-and-drop interface for your users to design labels inside your app.
Together, they provide a complete label design and printing solution that works with any modern web framework.
See It In Action
I've deployed a full-featured demo that showcases both packages working together:
Live demo:
The demo includes:
• Interactive drag-and-drop designer
• Pre-built templates for assets, employees, and storage labels
• Real-time preview with actual data binding
• Export to ZPL, PDF, and PNG
What Makes This Different?
1. Framework-Agnostic by Design
The core engine (qrlayout-core) is pure TypeScript with zero framework dependencies. The UI package (qrlayout-ui) is built as a web component that works seamlessly with React, Vue, Angular, Svelte, or vanilla JavaScript.
// 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 huge for warehouse and manufacturing environments.
import { StickerPrinter } from 'qrlayout-core';
const printer = new StickerPrinter();
const zpl = printer.exportToZPL(layout, data);
// Send zpl directly to your Zebra printer!
3. Dynamic Data Binding
Design once, generate thousands. Use variable placeholders like {{name}}, {{sku}}, or {{id}} in your layouts, then batch-generate unique labels by passing an array of data objects.
4. Precise Unit Control
Design in millimeters, centimeters, inches, or pixels. The engine handles all the conversion math so your labels print exactly as designed.
Real-World Use Cases
Asset Tracking : Machine labels with QR linking to maintenance docs
Inventory Management:Storage bin labels with location codes
Visitor Management:Temporary passes with visitor details
Open Source & Contributions Welcome
This project is MIT licensed . Whether you're interested in:
• Adding new export formats (EPL, DPL, etc.)
• Improving the designer UI/UX
• Adding more framework-specific wrappers
• Writing documentation and tutorials
• Bug fixes and performance improvements
I'd love to hear from you!
Get Involved
GitHub Source code
qrlayout-core package
qrlayout-ui package
Vue-demo
Svelte-demo