QR Layout Tool

June 8, 2026 · View on GitHub

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

If this project saves you time, please consider giving it a ⭐ — it helps others find it!

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

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

Why choose QR Layout Tool?

🖨️ Industrial-grade output: Direct ZPL export for Zebra thermal printers
📦 Mail-merge style batching: Generate thousands of unique labels from one template with {{variable}} syntax
🌐 Truly framework-agnostic: Works with React, Vue, Angular, Svelte, or plain HTML — no framework lock-in
📄 Multi-format: High-fidelity PDF, PNG, and ZPL from the same layout definition
⚡ Lightweight: Zero heavy dependencies in qrlayout-core; renders on Canvas in the browser or Buffer in Node.js

🛠 Tech Stack

⚡ Quick Start

Option 1: Headless (Core only)

Use the rendering engine directly — no UI needed.

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}}" }
  ]
};

// Batch generate 3 labels and export to ZPL for a thermal printer
const zplPages = printer.exportToZPL(layout, [
  { name: "Alice",   id: "EMP-001" },
  { name: "Bob",     id: "EMP-002" },
  { name: "Charlie", id: "EMP-003" },
]);

Option 2: Embedded Visual Designer (UI)

Drop a full drag-and-drop designer into any web app.

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) => {
    // Save layout JSON to your backend
    console.log("Saved:", 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 — Design, Save, Print

The layout JSON output 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.

  User designs in qrlayout-ui
          │
          │  onSave(layout JSON)
          ▼
  Your database / backend       ← store the layout JSON like any other record
          │
          │  fetch layout + your real data (employees, machines, assets…)
          ▼
  qrlayout-core (StickerPrinter)  ← merges data into the template
          │
          ├── exportToPNG()   → download as image
          ├── exportToPDF()   → printable PDF (batch)
          └── exportToZPL()   → send to Zebra thermal printer

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

// 2. Later — fetch the saved layout and your real data, then 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");

Note

About the live demo apps — Each framework demo (React, Angular, Svelte, Vue) comes with pre-built sample layouts and demo records so you can explore every feature without any setup.

All data is stored only in your browser's localStorage — nothing is sent to any server. Clearing browser storage resets the demo to its defaults. Your layouts and data never leave your browser.

🎯 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

This monorepo is managed with npm workspaces:

qr-code-layout-generate-tool/
├── packages/
│   ├── core/          # qrlayout-core — headless rendering engine
│   └── ui/            # qrlayout-ui  — visual drag-and-drop designer
└── examples/
    ├── react-qr-label-demo/          # React + Vite wrapper showcase app
    ├── react-demo/    # Legacy React + Vite reference app
    ├── angular-demo/  # Angular 19 reference app
    ├── svelte-demo/   # Svelte 5 reference app
    └── vue-demo/      # Vue 3 reference app

📦 Packages

Package	Version	Description	Docs
`qrlayout-core`		Headless rendering & logic engine	API Reference
`qrlayout-ui`		Interactive visual designer	Integration Guide

🛠 Development

# Clone the repo
git clone https://github.com/shashi089/qr-code-layout-generate-tool.git
cd qr-code-layout-generate-tool

# Install all workspace dependencies
npm install

# Run the UI in dev mode (live preview)
npm run dev:ui

# Build all packages
npm run build:core
npm run build:ui