Building Our QR Code Generator: From Concept to Implementation

QR codes have become ubiquitous in our digital world – from restaurant menus to event tickets, WiFi sharing to contact cards. When we decided to build a QR code generator for new.website, we wanted to create something that went beyond basic text-to-QR conversion. Today, we're sharing the story of how we built a comprehensive, user-friendly QR code generator that supports multiple data types and offers extensive customization options.

Why Another QR Code Generator?

While there are many QR code generators available, most fall into one of several categories: overly simple tools that only handle basic text, complex enterprise solutions with steep learning curves, or generators buried behind paywalls. We wanted to create something different – a tool that's powerful enough for professionals yet simple enough for anyone to use.

Our goals were clear:

• Support multiple QR code types (URLs, emails, WiFi, SMS, phone numbers, and plain text)
• Provide real-time customization options
• Offer instant preview and download capabilities
• Ensure high-quality output suitable for both digital and print use
• Maintain a clean, intuitive user interface

Technical Architecture

Our QR code generator is built as a client-side React application using Next.js, with the core QR generation handled by the reliable qrcode npm package. This architecture choice provides several benefits:

Supporting Multiple QR Code Types

One of our key features is support for six different QR code types, each with its own data format requirements:

URL QR Codes

For website links, we automatically add the https:// protocol if missing, ensuring the QR codes work correctly when scanned.

Email QR Codes

Email QR codes use the mailto: protocol and can include optional subject and body text, automatically URL-encoded for proper handling of special characters.

WiFi QR Codes

Perhaps the most complex format, WiFi QR codes follow a specific standard: WIFI:T:WPA;S:NetworkName;P:Password;H:false;;. Our generator supports WPA/WPA2, WEP, and open networks, with options for hidden networks.

SMS and Phone QR Codes

SMS codes use the sms: protocol with optional pre-filled messages, while phone codes use tel: for direct calling.

Real-time Customization Features

We implemented comprehensive customization options that update the QR code in real-time:

Implementation Challenges and Solutions

Real-time Updates with Debouncing

One challenge was providing real-time updates without overwhelming the system. We implemented a 300ms debounce using useEffect and setTimeout, ensuring QR codes regenerate smoothly as users type or adjust settings.

Dual Canvas Strategy

For the download feature, we needed high-quality PNG files. We implemented a dual approach: displaying QR codes as images for the UI while maintaining a hidden HTML5 canvas for downloads. This ensures users get crisp, properly-sized files regardless of their display settings.

Cross-browser Clipboard Support

Copying QR codes to the clipboard required modern web APIs. We used the Clipboard API with proper blob handling to ensure QR codes can be pasted directly into design applications, documents, or social media platforms.

User Experience Design

The interface design focused on clarity and efficiency. We organized the tool into two main sections:

We added helpful visual cues like icons for each QR type, badges showing current settings, and clear feedback for actions like copying or downloading.

Performance Optimization

To ensure smooth performance, we implemented several optimizations:

• Client-side generation: No server requests mean instant results
• Efficient state management: React state updates are batched and optimized
• Lazy loading: The qrcode library is only loaded when needed
• Memory management: Canvas elements are properly cleaned up to prevent memory leaks

Looking Forward

Our QR code generator represents our commitment to building tools that are both powerful and accessible. By focusing on user needs – privacy, speed, quality, and ease of use – we've created something that serves both casual users and professionals.

Future enhancements we're considering include batch QR generation, additional customization options like logo embedding, and analytics for tracking QR code usage.