| File | Description |
|---|---|
label-studio-pro-main.zip |
Complete source code with all dependencies |
README.md |
Documentation and setup instructions |
LICENSE |
MIT License file |
Features · Screenshots · Installation · Tech Stack · Building · Roadmap
Label Studio Pro eliminates the need for expensive enterprise label design software. It provides a professional-grade label creation experience optimized specifically for Zebra thermal printers (ZD421, ZD420, GK420 series), enabling businesses to design and print professional labels without recurring subscription costs or complex software installations. Simply run it in your browser and start designing.
| Category | Features |
|---|---|
| 🏷️ Label Design | Drag-and-drop elements • Text blocks with custom fonts • Static text labels • Dividers (solid, dashed, dotted) • Headers & footers with styling • Shapes (rectangle, oval, star, heart, diamond, and more) • Tables with dynamic fields |
| 🔲 Barcode Engine | Code 128 • Code 39 • QR Code with styling (dots, corners, shapes) • Data Matrix • PDF417 • Barcode rotation (0°, 90°, 180°, 270°) • Show/hide barcode text |
| 🎨 Template System | 5 built-in departments (IT, HR, Warehouse, Security, Assets) • Custom department creation • Pre-built templates for common use cases • Import/export templates • Background color customization |
| 🖨️ Print Engine | Zebra ZD421/ZD420/GK420 optimized • Browser Print API integration • Batch printing from CSV data • Export to PNG • Print preview with zoom • Multiple label sizes supported |
| 🛠️ Design Tools | Floating toolbar (pinnable) • Free positioning • Element resize handles • Rotation controls • Flip horizontal/vertical • Layer ordering (z-index) • Lock elements • Undo/redo history |
| ⚙️ Settings & Help | Company info configuration • Default settings • Keyboard shortcuts • Help center with guides • About dialog |
Label Generator — Design professional labels with barcodes, QR codes, and custom elements
📷 View More Screenshots
Dashboard — Main workspace with department tabs and template selection
Settings & Add Department — Configure preferences and create custom departments
Help Center & About — Keyboard shortcuts, guides, and application info
Demo video coming soon
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, TypeScript, Tailwind CSS |
| Barcode | bwip-js, qr-code-styling |
| State | Zustand with localStorage persistence |
| Icons | Lucide React |
| Export | html-to-image |
| Browser Print API |
| Requirement | Specification |
|---|---|
| OS | Windows 10 or later |
| Browser | Chrome, Edge, Firefox |
| Node.js | 18.x or later (for development) |
| Printer | Zebra ZD421 / ZD420 / GK420 |
| Resolution | 1280×800 minimum |
| Prerequisite | Version | Download |
|---|---|---|
| Node.js | 18.x or later | nodejs.org |
| npm | 9.x or later | Included with Node.js |
# Clone the repository
git clone https://github.com/moner-dev/Professional-Label-Design-Print.git
# Navigate to project directory
cd label-studio-pro
# Install dependencies
npm install
# Start development server
npm run devnpm run devThen open http://localhost:3001 in your browser.
Double-click start.bat to launch with system tray integration.
label-studio-pro/
├── public/
│ ├── logo.svg # Application logo
│ └── icon.ico # Windows icon
├── src/
│ ├── components/
│ │ ├── barcode/ # Barcode rendering components
│ │ ├── controls/ # UI control components
│ │ ├── labels/ # Label preview components
│ │ ├── layout/ # Layout components (Header, TabBar, TwoPanel)
│ │ ├── modals/ # Modal dialogs (Settings, Help, About, etc.)
│ │ ├── preview/ # Label preview panel
│ │ └── toolbar/ # Floating toolbar components
│ ├── data/
│ │ └── prebuiltTemplates.ts # Pre-built template definitions
│ ├── hooks/
│ │ ├── useKeyboardShortcuts.ts # Keyboard shortcut handling
│ │ └── usePrintExport.ts # Print and export logic
│ ├── store/
│ │ ├── useCustomTemplateStore.ts # Custom departments state
│ │ ├── useFixedDepartmentStore.ts # Fixed departments state
│ │ ├── useLabelStore.ts # Label dimensions state
│ │ ├── useSettingsStore.ts # App settings state
│ │ ├── useHistoryStore.ts # Undo/redo state
│ │ └── ... # Other stores
│ ├── tabs/
│ │ ├── CustomDepartmentTab.tsx # Custom department workspace
│ │ ├── DepartmentWorkspace.tsx # Department workspace container
│ │ └── FixedDepartmentTab.tsx # Fixed department workspace
│ ├── types/
│ │ └── barcode.ts # TypeScript type definitions
│ ├── utils/
│ │ ├── colors.ts # Color utility functions
│ │ ├── export.ts # Export utilities
│ │ ├── print.ts # Print utilities
│ │ └── units.ts # Unit conversion utilities
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── screenshots/ # Application screenshots
├── .gitignore
├── package.json
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
├── LICENSE
└── README.md
| Model | Resolution | Type |
|---|---|---|
| Zebra ZD421 | 203 DPI | Direct Thermal |
| Zebra ZD420 | 203 DPI | Direct Thermal |
| Zebra GK420 | 203 DPI | Direct Thermal |
| Barcode Type | Description |
|---|---|
| Code 128 | High-density alphanumeric barcode |
| Code 39 | Alphanumeric barcode, widely used |
| QR Code | 2D barcode with customizable styling |
| Data Matrix | 2D barcode for small items |
| PDF417 | 2D stacked barcode |
- v1.0.0 — Initial release
- Update system — Coming Soon
- Multi-language support (Arabic/Dutch/English) — Coming Soon
- Demo video
- v1.1.0 — Cloud template sync
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2026 MONER INTELLIGENCE SYSTEMS
