QR Layout Tool

A powerful, professional-grade engine for designing, rendering, and printing QR code layouts.

🚀 Live Demos

Explore the capabilities of qrlayout-core & qrlayout-ui through our framework-specific implementations:

Framework	Live Demo	Source Code
React	Live Demo	Source
Svelte 5	Live Demo	Source
Vue 3	Live Demo	Source

🛠 Tech Stack

---

📖 Overview

QR Layout Tool is a comprehensive solution for developers building applications that require dynamic, printable labels, stickers, or badges. Unlike traditional QR generators that output single images, this tool provides a robust framework for composing complex layouts that integrate text, multiple QR codes, images, and dynamic data fields.

Why Choose QR Layout Tool?

• Visual Precision: Design layouts with a professional drag-and-drop interface via qrlayout-ui.
• Industrial Standards: Built-in support for ZPL (Zebra Programming Language), enabling direct output to industrial thermal printers.
• Multi-Format Export: High-fidelity PDF and PNG export for office environments and digital sharing.
• Dynamic Data Binding: Advanced "Mail Merge" capabilities. Define templates with {{handlebars}} syntax and batch-generate thousands of personalized labels.
• High Performance: Optimized rendering engine that runs efficiently in the browser and Node.js environments.

🏗 Project Structure

This project is managed as a high-performance monorepo using npm workspaces:

• packages/core: The headless rendering engine. Handles Layout JSON parsing, data merging, and output generation (Canvas, ZPL, PDF).
• packages/ui: A framework-agnostic, embeddable Layout Designer. Provides the visual interface for layout creation.
• examples/: Reference implementations for React, Vue, and Svelte.

📦 Packages

Package	Version	Description	Links
qrlayout-core		Headless rendering & logic engine	Docs
qrlayout-ui		Interactive visual designer	Docs

🎯 Use Cases

• Logistics & Warehousing: Standardized ZPL shipping labels for Zebra printers.
• Event Management: High-speed generation of personalized attendee badges.
• Inventory Control: SKU and product labeling with QR/Barcode integration.
• Visitor Passes: Real-time pass generation with dynamic security data.

⌨️ Quick Start

1. Headless Generation (Core)

import { StickerPrinter } from "qrlayout-core";

const layout = { /* Layout JSON */ };
const data = { name: "Asset #421", sku: "QR-PRO-99" };

const printer = new StickerPrinter();
const zpl = printer.exportToZPL(layout, [data]); 

2. Embedded Designer (UI)

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

const designer = new QRLayoutDesigner({
    element: document.getElementById("editor"),
    onSave: (layout) => console.log("Layout Saved:", layout)
});

🛠 Development

Setup

git clone https://github.com/shashi089/qr-code-layout-generate-tool.git
cd qr-code-layout-generate-tool
npm install

Run UI Demo

npm run dev:ui

Build

npm run build:core
npm run build:ui

📚 Documentation

• Core Engine API Reference
• UI Designer Integration Guide

🤝 Contributing

Contributions, issues 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

👤 Author

Shashidhar Naik

• GitHub: @shashi089

📄 License

MIT © Shashidhar Naik