QR Layout Tool

The open-source QR code label designer for developers. Design once, print everywhere.

---

Live Demos

Framework	Live Demo	Source Code
React	▶ Open Demo	Source
Angular	▶ Open Demo	Source
Svelte 5	▶ Open Demo	Source
Vue 3	▶ Open Demo	Source

---

What Is This?

QR Layout Tool is a complete solution for building applications that generate dynamic, printable QR code labels, stickers, and badges. Unlike basic QR generators that produce a single image, this tool gives you a full layout engine with a visual designer, data binding, and multi-format export.

It is split into two focused npm packages:

Package	Purpose
qrlayout-core	Headless rendering engine — use in any JS/TS project
qrlayout-ui	Embeddable drag-and-drop visual designer

---

Quick Start

Headless (Core only)

npm install qrlayout-core

import { StickerPrinter } from "qrlayout-core";

const printer = new StickerPrinter();

const layout = {
  id: "badge",
  name: "Employee Badge",
  width: 100, height: 60, unit: "mm",
  elements: [
    { id: "name", type: "text", x: 5, y: 5, w: 90, h: 12, content: "{{name}}", style: { fontSize: 16, fontWeight: "bold" } },
    { id: "qr",   type: "qr",   x: 35, y: 20, w: 30, h: 30, content: "{{id}}" }
  ]
};

const zplPages = printer.exportToZPL(layout, [
  { name: "Alice",   id: "EMP-001" },
  { name: "Bob",     id: "EMP-002" },
  { name: "Charlie", id: "EMP-003" },
]);

Embedded Visual Designer

npm install qrlayout-ui qrlayout-core

import { QRLayoutDesigner } from "qrlayout-ui";
import "qrlayout-ui/style.css";

const designer = new QRLayoutDesigner({
  element: document.getElementById("editor"),
  onSave: (layout) => {
    fetch("/api/layouts", { method: "POST", body: JSON.stringify(layout) });
  }
});

PDF Export (optional)

npm install jspdf

import { exportToPDF } from "qrlayout-core/pdf";

const pdf = await exportToPDF(layout, [data1, data2]);
pdf.save("badges.pdf");

---

How It Works

The layout JSON from qrlayout-ui is your single source of truth — store it in your database, load it back anytime, and pass it with real records to qrlayout-core to generate labels.

// Save from the designer
onSave: async (layout) => {
  await fetch("/api/layouts", { method: "POST", body: JSON.stringify(layout) });
}

// Later — fetch and print
const layout  = await fetch("/api/layouts/employee-badge").then(r => r.json());
const records = await fetch("/api/employees").then(r => r.json());

const printer = new StickerPrinter();
const pdf = await printer.exportToPDF(layout, records);
pdf.save("badges.pdf");

---

Use Cases

Industry	Example
🏭 Manufacturing & Warehousing	ZPL shipping labels for Zebra printers
🎟️ Events & Conferences	Personalized attendee badge generation
🏥 Healthcare	Patient wristbands and asset tagging
📦 Inventory & Retail	SKU labels with QR codes linking to product pages
🏢 HR & Access Control	Employee ID cards and visitor passes
🔧 MRO / Maintenance	Machine asset tags with scannable maintenance history links

---

Project Structure

qr-code-label-designer/
├── packages/
│   ├── core/             # qrlayout-core — headless rendering engine
│   ├── ui/               # qrlayout-ui  — visual drag-and-drop designer
│   ├── react-qr-label/
│   ├── vue-qr-label/
│   └── svelte-qr-label/
└── examples/
    ├── react-demo/
    ├── angular-demo/
    ├── svelte-demo/
    └── vue-demo/

---

Packages

Package	Version	Description	Docs
qrlayout-core		Headless rendering & logic engine	README
qrlayout-ui		Interactive visual designer	README
react-qr-label		React component wrapper	README
vue-qr-label		Vue 3 component wrapper	README
svelte-qr-label		Svelte 5 component wrapper	README

---

Development

git clone https://github.com/shashi089/qr-code-label-designer.git
cd qr-code-label-designer
npm install

npm run dev:ui      # UI dev server
npm run build:core  # Build core
npm run build:ui    # Build UI

See CONTRIBUTING.md for contribution guidelines.

---

Contributing

Contributions, bug reports, and feature requests are welcome!

1. Fork the repository
2. Create your feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -am 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

Found a bug or have an idea? Open an Issue →

---

Author

Shashidhar Naik — @shashi089

🤝 Contributors

• @JayanthVishnu
• @arun270892

---

License

MIT © Shashidhar Naik

---

Found this useful? Please ⭐ star the repository — it helps others discover the project!