Feature Summary
Relevant source files
The following files were used as context for generating this wiki page:QR Generator Pro is a comprehensive, client-side web application for creating professional and highly customizable QR codes. Built with React and Vite, it operates entirely within the browser without needing a backend server. The application supports a wide variety of QR code data types, extensive visual customization options including colors and logos, and multiple export formats.
The tool offers two distinct user interface modes: a "Quick" mode for fast and simple generation, and a "Pro" mode for advanced users who require fine-grained control over every aspect of the QR code's appearance and error correction. Key features include real-time preview, live QR code scanning for validation, input validation, and persistence of user settings via Local Storage.
Sources: README.md, src/App.jsx
Core Architecture
The application is a single-page application (SPA) built with React. The main logic is encapsulated within the App.jsx component, which manages state for user inputs, customization options, and validation. It utilizes several helper modules and custom hooks to organize functionality.
The diagram below illustrates the high-level data flow within the application.
This diagram shows the main user interaction flow, from inputting data to generating, previewing, and exporting the final QR code.
Sources: src/App.jsx, src/components/QrPreview.jsx, src/components/ExportPanel.jsx, src/utils/qr-helpers.js
QR Code Content Generation
The application supports various types of QR codes, each with a specific data format. The core logic for this is handled by the generateQRContent function.
Sources: src/App.jsx:54-123
Supported QR Code Types
The application can generate QR codes for the following data types:
| Type | Icon | Description | Data Fields |
|---|---|---|---|
| URL | 🔗 | A web link. | url |
| Text | 📝 | Plain text content. | text |
| Wi-Fi | 📶 | Wi-Fi network credentials. | ssid, password, encryption, hidden |
| vCard | 👤 | Electronic business card. | name, firstName, lastName, phone, email, org, vcardUrl |
| 📧 | Pre-filled email. | email, subject, body | |
| SMS | 💬 | Pre-filled text message. | phone, message |
| Phone | ☎️ | A phone number to call. | phone |
| Location | 📍 | GPS coordinates. | lat, lng, label |
Sources: README.md:15-22, src/App.jsx:38-45, 298-305
Content Formatting Logic
The generateQRContent function takes the selected type and a data object to construct the final string to be encoded in the QR code. It uses a switch statement to handle each type and applies necessary formatting and escaping.
This diagram shows how the generateQRContent function processes different QR code types.
Special characters in Wi-Fi and vCard data are escaped using helper functions (escWiFi, escVCARD) to conform to their respective standards. For example, semicolons and colons are backslash-escaped.
Sources: src/App.jsx:51-123, src/App.test.js
Customization and Styling
The application provides extensive options for customizing the QR code's appearance, managed through the "Pro" UI mode.
Sources: src/App.jsx:287-296, 700-947
Customization Options
| Option | Description | State Variable | Default Value |
|---|---|---|---|
| Size | The pixel dimension of the output image. | size | 360 |
| ECC Level | Error Correction Capability (L, M, Q, H, AUTO). | eccMode | AUTO |
| Colors | Foreground (QR) and background colors. | fgColor, bgColor | #000000, #FFFFFF |
| Margin | Includes a "Quiet Zone" (white border). | includeMargin | true |
| Transparent BG | For PNG format, makes the background transparent. | transparentBg | false |
| Format | Output format (PNG/JPG via Canvas, or SVG). | format | canvas |
| Logo | An image to embed in the center of the QR code. | logoUrl | '' |
| Logo Scale | The size of the logo relative to the QR code. | logoMode, customLogoScale | auto |
All these settings are persisted in the browser's Local Storage via the useLocalStorage custom hook.
Sources: src/App.jsx:287-296, 326-347
Automatic ECC Level Selection
When eccMode is set to AUTO, the application intelligently selects the best Error Correction Level based on the logo size and color contrast. This logic is implemented in the pickECC helper function.
This diagram shows the decision logic for automatic ECC level selection.
- High ('H'): Used for large logos (≥22% of QR size) or when color contrast is poor (<3.5:1) to ensure scannability.
- Quartile ('Q'): Used for small to medium logos (≥10%).
- Medium ('M'): The default for QR codes without a logo and with good contrast.
Sources: src/utils/qr-helpers.js:238-246, tests/qr-helpers.test.js:100-115
Logo Integration
Users can upload a logo (PNG, JPG, WebP, SVG) to be embedded in the QR code.
- File Validation: The
onPickLogofunction validates the uploaded file, checking for type and size (max 4MB). - Rendering: The logo is passed to the
qrcode.reactcomponent via theimageSettingsprop. Theexcavate: trueoption clears the area behind the logo. - CORS: The
crossOrigin: 'anonymous'attribute is set to allow exporting the canvas when the logo is from a URL, though this can lead to taint errors if the source server doesn't permit it.
Sources: src/App.jsx:544-571, 513-524, SECURITY_AUDIT_REPORT.md:88-95
Input Validation and Security
The application implements robust client-side validation and security measures to ensure data integrity and user safety.
Input Validation
Helper functions in qr-helpers.js are used to validate user input in real-time.
| Function | Description |
|---|---|
isValidURL(url) | Checks if a string is a structurally valid URL. |
isSafeHttpUrl(url) | Ensures a URL uses the http: or https: protocol. |
isValidEmail(email) | Validates email format using a regex. |
isValidPhone(phone) | Checks if a string contains only valid phone characters. |
isValidLatLng(lat, lng) | Validates latitude and longitude values are within their valid ranges. |
isValidHex(hex) | Validates a string is a valid 3 or 6-digit hex color code. |
These functions are triggered on data change, and errors are displayed to the user.
Sources: src/utils/qr-helpers.js:22-86, src/App.jsx:307-324, tests/qr-helpers.test.js:46-98
Security Features
- XSS Protection: The application relies on React's built-in JSX escaping to prevent Cross-Site Scripting from user inputs. No
dangerouslySetInnerHTMLis used. - Content Security Policy (CSP): A strict CSP is defined in
public/_headersto restrict resource loading, mitigating injection attacks. - File Upload Security: Logo uploads are restricted by file type (
image/*) and size (4MB) to prevent malicious file uploads. - Local Storage: Only non-sensitive UI preferences are stored in Local Storage.
Sources: SECURITY_AUDIT_REPORT.md:60-112, SECURITY.md, src/App.jsx:548-561
QR Code Rendering and Export
The application uses the qrcode.react library to render the QR code as either a <canvas> or <svg> element. The ExportPanel component orchestrates the download process.
Rendering
The QrPreview component is responsible for rendering the QR code. It dynamically switches between QRCodeCanvas and QRCodeSVG based on the selected format. The properties for the QR code (content, size, colors, logo) are bundled into a qrProps object.
Sources: src/components/QrPreview.jsx, src/App.jsx:506-525
Export Process
The following diagram shows the sequence of events when a user downloads a QR code.
This diagram illustrates the export flow for a PNG file.
- Canvas (PNG/JPG): The
buildDataURLfunction takes the source canvas, creates a new temporary canvas to add padding (if the quiet zone is disabled) and a background color, draws the QR code onto it, and returns a data URL. - SVG: The
buildSVGBlobfunction clones the source SVG, adds a background<rect>and a<g>transform for padding, and serializes it to a Blob. - Download: The
downloadFileutility creates a temporary anchor (<a>) element with the data URL or blob URL and programmatically clicks it to trigger a browser download.
Sources: src/components/ExportPanel.jsx, src/utils/qr-helpers.js:125-228
Conclusion
QR Generator Pro is a feature-rich, secure, and user-friendly tool for creating QR codes. Its architecture is centered around a main React component that manages state and orchestrates rendering, validation, and exporting. The separation of concerns into helper modules (qr-helpers.js), UI components (QrPreview.jsx, ExportPanel.jsx), and robust state management (useLocalStorage) results in a maintainable and extensible codebase. The inclusion of advanced features like automatic ECC selection, live validation scanning, and comprehensive security measures makes it a production-ready application.
Sources: README.md, src/App.jsx