Professional QR code and barcode generator with JsBarcode-compatible encoding. Create stunning QR codes that perfectly fit any canvas with smart center image sizing, plus industry-standard barcodes (Code 128, Code 39, EAN-13) that work with all commercial
The complete QR code and barcode generation library for JavaScript & TypeScript ✨
Generate beautiful, customizable QR codes and industry-standard barcodes (Code 128, Code 39, EAN-13) with a single,
powerful library. Perfect for web applications, mobile apps, e-commerce platforms, inventory management systems, and
more.
- QR Codes: Beautiful, scannable QR codes with logo support and custom styling
- Barcodes: Production-ready Code 128, Code 39, and EAN-13 barcodes
- Single Library: Eliminates the need for multiple dependencies
- Auto-sizing: QR codes adapt perfectly to any canvas dimensions
- Auto-width: Barcodes intelligently calculate optimal width
- Smart Logo Scaling: Center images automatically adjust based on error correction level
- Check Digit Automation: EAN-13 check digits calculated and validated automatically
- Scanner Tested: Compatible with commercial barcode scanners and POS systems
- Standards Compliant: Implements official barcode encoding specifications
- Production Ready: Trusted by retail, logistics, and e-commerce applications
- TypeScript First: Complete type safety with full autocomplete support
- Zero Configuration: Works out of the box with intelligent defaults
- Framework Agnostic: Compatible with React, Vue, Angular, and vanilla JavaScript
- Modern Export Formats: Support for PNG, JPEG, WebP, SVG, and AVIF
``bash`
npm install @teonord/qrdrobe
`html
`
`typescript
import QRDrobe from '@teonord/qrdrobe';
const qr = new QRDrobe({
data: 'https://your-website.com',
width: 300,
height: 300,
errorCorrectionLevel: 'H',
dotsStyle: 'rounded',
foreground: '#000000',
background: '#ffffff'
});
await qr.append('#qr-container');
`
`typescript
import {Barcode} from '@teonord/qrdrobe';
const barcode = new Barcode({
data: 'PRODUCT-2024-ABC',
barcodeType: 'code128',
height: 100
// Width automatically calculated for optimal scanning
});
await barcode.append('#barcode-container');
`
- Ideal For: Shipping labels, product identification, inventory tracking
- Character Set: Full ASCII (characters 32-126)
- Key Features: Compact encoding, high density, automatic checksum
- Common Use Cases: Amazon FBA labels, logistics systems, general alphanumeric encoding
`typescript`
const barcode = new Barcode({
data: 'SHIP-US-2024-789456',
barcodeType: 'code128'
});
- Ideal For: Warehouse management, asset tracking, defense applications
- Character Set: 0-9, A-Z, and symbols (- . $ / + % space)
- Key Features: Self-checking capability, no checksum required, wide industry support
- Common Use Cases: Library systems, warehouse location codes, equipment identification
`typescript`
const barcode = new Barcode({
data: 'WAREHOUSE-A-SHELF-15',
barcodeType: 'code39' // Automatically converts to uppercase
});
- Ideal For: Retail products, point-of-sale systems, global product identification
- Character Set: Numeric only (0-9)
- Key Features: GS1 standard compliance, automatic check digit calculation, universal compatibility
- Common Use Cases: Grocery stores, retail packaging, e-commerce products
`typescript`
// Provide 12 digits - check digit is automatically calculated
const barcode = new Barcode({
data: '123456789012', // Automatically becomes 1234567890128
barcodeType: 'ean13'
});
`typescript
const qr = new QRDrobe({
data: 'https://your-brand.com',
width: 400,
height: 400,
// Dot style customization
dotsStyle: 'rounded', // Options: 'square', 'dots', 'rounded'
dotsRadius: 0.3, // Rounding intensity (0-1)
// Color customization
foreground: '#FF6B6B',
background: '#F7F7F7',
// Center logo integration
image: 'logo.png',
errorCorrectionLevel: 'H' // Required for reliable logo integration
});
`
- M (15%): Basic applications, text encoding, WiFi credentials
- Q (25%): Product packaging, outdoor usage, moderate reliability needs
- H (30%): Logo integration, high-value items, harsh environmental conditions
`typescript
const qr = new QRDrobe({data: 'Initial data'});
// Update properties dynamically
await qr.update({
data: 'Updated content',
foreground: '#0066CC',
dotsStyle: 'dots',
image: 'new-logo.png'
});
`
`typescript
// PNG format - ideal for barcodes
await code.download({name: 'code.png', format: 'png'});
// JPEG format - optimal file size
await code.download({name: 'code.jpg', format: 'jpeg', quality: 0.9});
// WebP format - modern compression
await code.download({name: 'code.webp', format: 'webp'});
// AVIF format - next-generation compression
await code.download({name: 'code.avif', format: 'avif'});
// SVG format - vector scalability
await code.download({name: 'code.svg', format: 'svg'});
`
`typescript
// Generate Data URL for immediate use
const dataUrl = await qr.getDataURL({format: 'png'});
document.querySelector('img').src = dataUrl;
// Generate Blob for advanced handling
const blob = await barcode.getBlob({format: 'png'});
// Use with File API, upload to server, etc.
`
`typescript
// Product QR code with brand logo
const productQR = new QRDrobe({
data: 'https://shop.com/product/123',
image: 'brand-logo.png',
errorCorrectionLevel: 'H'
});
// EAN-13 barcode for retail checkout
const ean = new Barcode({
data: '501234567890',
barcodeType: 'ean13'
});
`
`typescript
// Shipping label barcode
const shipping = new Barcode({
data: 'SHIP-2024-ABC123',
barcodeType: 'code128',
height: 100
});
// Package tracking QR code
const tracking = new QRDrobe({
data: 'https://track.com/SHIP-2024-ABC123',
errorCorrectionLevel: 'Q'
});
`
`typescript
// Warehouse location identification
const location = new Barcode({
data: 'WH-A-SHELF-15',
barcodeType: 'code39'
});
// Asset tracking with QR codes
const asset = new QRDrobe({
data: 'ASSET:12345:LAPTOP:2024',
dotsStyle: 'square'
});
`
`typescript
// Event admission tickets
const ticket = new QRDrobe({
data: 'TICKET:CONCERT:2024:SEAT-A15',
errorCorrectionLevel: 'Q',
dotsStyle: 'rounded'
});
// Membership identification
const membership = new Barcode({
data: 'MEMBER-2024-789',
barcodeType: 'code128'
});
`
`typescript`
interface QRDrobeOptions {
data?: string; // Content to encode (default: '')
width?: number; // Canvas width in pixels (default: 300)
height?: number; // Canvas height in pixels (default: 300)
errorCorrectionLevel?: 'M' | 'Q' | 'H'; // Error correction level (default: 'M')
foreground?: string; // QR code color (default: '#000000')
background?: string; // Background color (default: '#ffffff')
dotsStyle?: 'square' | 'dots' | 'rounded'; // Module style (default: 'square')
dotsRadius?: number; // Rounding radius for modules (default: 0.25)
image?: string | HTMLImageElement; // Center image path or element
}
`typescript`
interface BarcodeOptions {
data?: string; // Content to encode (default: '')
barcodeType?: 'code128' | 'code39' | 'ean13'; // Barcode standard (default: 'code128')
width?: number; // Manual width (auto-calculated if omitted)
height?: number; // Barcode height in pixels (default: 100)
foreground?: string; // Bar color (default: '#000000')
background?: string; // Background color (default: '#ffffff')
margin?: number; // Margin in pixels (default: 4)
}
`typescript`
interface ImageOptions {
format?: 'png' | 'jpeg' | 'jpg' | 'webp' | 'avif' | 'svg'; // Output format
quality?: number; // Compression quality (0-1, JPEG/WebP/AVIF only)
name?: string; // Download filename
}
#### QRDrobe Methods
`typescript
// Initialize and generate QR code
await qr.generate();
// Update configuration dynamically
await qr.update(options: Partial
// Render to DOM element
await qr.append(container: string | HTMLElement);
// Retrieve canvas element
const canvas: HTMLCanvasElement = await qr.getRawCanvas();
// Generate data URL
const dataUrl: string = await qr.getDataURL(options ? : ImageOptions);
// Generate binary blob
const blob: Blob = await qr.getBlob(options ? : ImageOptions);
// Trigger browser download
await qr.download(options ? : ImageOptions);
`
#### Barcode Methods
`typescript
// Initialize and generate barcode
barcode.generate();
// Render to DOM element
await barcode.append(container: string | HTMLElement);
// Retrieve canvas element
const canvas: HTMLCanvasElement = barcode.getRawCanvas();
// Generate data URL
const dataUrl: string = barcode.getDataURL(options ? : ImageOptions);
// Generate binary blob
const blob: Promise
// Trigger browser download
await barcode.download(options ? : ImageOptions);
`
`tsx
import {useEffect, useRef} from 'react';
import QRDrobe, {Barcode} from '@teonord/qrdrobe';
interface QRCodeProps {
data: string;
width?: number;
height?: number;
}
function QRCodeComponent({data, width = 300, height = 300}: QRCodeProps) {
const containerRef = useRef
useEffect(() => {
if (containerRef.current) {
const qr = new QRDrobe({data, width, height});
qr.append(containerRef.current);
}
}, [data, width, height]);
return
export default QRCodeComponent;
`
`vue
`
`typescript
import {Component, Input, AfterViewInit, ElementRef} from '@angular/core';
import {Barcode} from '@teonord/qrdrobe';
@Component({
selector: 'app-barcode',
template: '
export class BarcodeComponent implements AfterViewInit {
@Input() data: string = '';
@Input() type: 'code128' | 'code39' | 'ean13' = 'code128';
@ViewChild('barcodeContainer', {static: true})
container!: ElementRef;
ngAfterViewInit() {
const barcode = new Barcode({
data: this.data,
barcodeType: this.type
});
barcode.append(this.container.nativeElement);
}
}
`
`html
QR Code & Barcode Generation
``
- ✅ Error Correction: Use level 'H' when integrating center logos
- ✅ Contrast: Maintain high contrast between foreground and background colors
- ✅ Testing: Validate with multiple scanning applications before deployment
- ✅ Data Efficiency: Keep encoded content concise for optimal scannability
- ✅ Compatibility: Use 'square' dot style for maximum device compatibility
- ✅ Size Consideration: Ensure minimum dimensions of 100×100 pixels for reliable scanning
- ✅ Format Selection: Use PNG format for crisp, high-quality barcode output
- ✅ Auto-width: Allow automatic width calculation for optimal scanner performance
- ✅ Color Scheme: Maintain black bars on white background for maximum compatibility
- ✅ Physical Testing: Test with actual barcode scanners before mass printing
- ✅ EAN-13 Input: Provide exactly 12 digits for automatic check digit calculation
- ✅ Type Selection: Use Code 128 for alphanumeric data, Code 39 for logistics applications
- ✅ Print Quality: Ensure 300+ DPI resolution for physical label printing
- 📱 Mobile Scanning: Users scanning with smartphone cameras
- 🌐 Web Content: Encoding URLs, contact information, WiFi credentials
- 🎨 Brand Integration: Visual design and branding are important
- 📊 Data Density: Need to encode substantial information (up to 4,000 characters)
- 🔄 Orientation Flexibility: Omnidirectional scanning capability required
- 🖼️ Visual Appeal: Aesthetic presentation is a priority
- 🏪 Retail Systems: Point-of-sale and checkout operations
- 📦 Warehouse Management: Inventory control and logistics tracking
- 🚚 Shipping Operations: Package labeling and transportation logistics
- 🎯 Industry Standards: Compliance with specific format requirements (EAN-13 for retail)
- ⚡ Performance: High-speed scanning in production environments
- 💰 Legacy Compatibility: Integration with existing scanning infrastructure
- 📄 Document Management: Physical document tracking and identification
- ✅ Mobile Devices: iOS Camera, Google Lens, dedicated scanning applications
- ✅ Commercial Scanners: Zebra, Honeywell, Datalogic handheld devices
- ✅ Point-of-Sale Systems: Major retail and hospitality POS platforms
- ✅ Warehouse Systems: Inventory management and logistics software
- ✅ Mobile SDKs: Barcode scanning libraries for mobile development
- ✅ Web APIs: Browser-based scanning solutions
1. Multiple Device Testing: Test on various smartphones and tablets
2. Lighting Conditions: Verify performance in different lighting environments
3. Distance Testing: Ensure scannability at appropriate distances
4. Angle Testing: Validate scanning from different angles
5. Print Verification: Test printed output on intended media
- Comprehensive Feature Set: QR codes and barcodes in a single package
- Consistent API: Uniform interface across all generation types
- Reduced Dependencies: Eliminates need for multiple specialized libraries
- Adaptive Sizing: Automatic optimization for canvas dimensions
- Smart Calculations: Intelligent width and parameter determination
- Error Management: Automatic check digit handling and validation
- TypeScript Native: Complete type definitions and IntelliSense support
- Modern Formats: Support for next-generation image formats (AVIF, WebP)
- Framework Compatibility: Seamless integration with popular frameworks
- Chrome: Version 90 and above
- Firefox: Version 88 and above
- Safari: Version 14 and above
- Edge: Version 90 and above
- iOS Safari: Version 14 and above
- Android Chrome: Version 90 and above
- AVIF Format: Requires Chrome 85+, Firefox 93+, Safari 16+
- WebP Format: Universal support in modern browsers
- SVG Format: Vector output for resolution-independent scaling
- Generation Speed: Sub-100ms for standard QR codes
- Memory Usage: Efficient canvas-based rendering
- Bundle Size: Optimized for minimal impact on application size
This library is released under the MIT License, permitting both personal and commercial use with minimal restrictions.
- ✅ Commercial Use: Free for commercial applications
- ✅ Modification: Freedom to modify and adapt source code
- ✅ Distribution: Permission to distribute and sublicense
- ✅ Private Use: Unlimited use in private projects
While not required, attribution is appreciated for significant use cases or derivative works.
---
Developed with precision for modern web applications ❤️
Available on npm: @teonord/qrdrobe