QR Code Generator Plugin

Generate and manage QR codes with customizable styling, logo embedding, and scan tracking via redirect integration.

Overview

The QR Code Generator plugin provides a complete QR code management system built into SonicJS. Create branded QR codes with custom colors, shapes, and logos, then track scans through automatic redirect integration.

📱

Custom Styling

Custom colors, corner shapes, dot shapes, and eye colors

🖼️

Logo Embedding

Embed logos with automatic error correction upgrade to Level H

📊

Scan Tracking

Track scans via short URL redirects with analytics

📥

Export Formats

Download as SVG or PNG at 72, 150, or 300 DPI

Installation

The QR Code Generator is a core plugin. Activate it in the admin panel:

Navigate to Admin → Plugins
Find QR Code Generator
Click Activate

This plugin requires the Redirect Management plugin for scan tracking. Install it first if you want tracking functionality.

Admin UI

Access QR code management at /admin/qr-codes in the sidebar.

List View

The list page displays all QR codes with:

SVG thumbnail preview
Name and destination URL
Error correction level
Scan count (from redirect analytics)
Created by and date
Search across names and URLs
Pagination with configurable page size

Create / Edit Form

The form includes several sections:

Basic Settings:

Name — Optional label for the QR code
Destination URL — Required. Supports http://, https://, mailto:, tel:, and sms: schemes
Error Correction — L (7%), M (15%), Q (25%), H (30%) recovery
Size — Output size in pixels

Colors:

Foreground and background color pickers with hex input
Optional eye color (position detection patterns)
WCAG contrast ratio display with low-contrast warnings

Shapes:

Corner Shape — square, rounded, dots, extra-rounded
Dot Shape — square, rounded, dots, diamond

Logo:

Paste a data URL or upload an image
Logo automatically limited to 5% of QR code area
Error correction upgrades to Level H when a logo is present

Live Preview:

Real-time SVG preview updates on every form change
Displays the short code redirect URL for copying

API Endpoints

Public Routes

GET/qr/:code

Redirect handler for QR code scans

When a QR code is scanned, the short URL redirects to the destination:

Active codes — 302 redirect to destination URL
Deleted codes — 410 Gone with a branded expired page
Unknown codes — 404 Not Found

Scans are automatically tracked by the Redirect Management plugin.

Admin Routes

All admin routes require authentication.

GET/admin/qr-codesAuth required

List QR codes with pagination and search

Query parameters: page, limit, search, success

POST/admin/qr-codesAuth required

Create a new QR code

Create QR Code

curl -X POST http://localhost:8787/admin/qr-codes \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d 'name=My+QR&destination_url=https://example.com&error_correction=M&size=300'

Form fields:

Field	Type	Description
`name`	string	Optional label
`destination_url`	string	Required. Must start with http://, https://, mailto:, tel:, or sms:
`foreground_color`	string	Hex color (default: #000000)
`background_color`	string	Hex color (default: #ffffff)
`error_correction`	string	L, M, Q, or H (default: M)
`size`	number	Pixels (default: 300)
`corner_shape`	string	square, rounded, dots, extra-rounded
`dot_shape`	string	square, rounded, dots, diamond
`eye_color`	string	Optional hex color for position detection patterns
`logo_url`	string	Data URL or image URL

PUT/admin/qr-codes/:idAuth required

Update an existing QR code

DELETE/admin/qr-codes/:idAuth required

Soft-delete a QR code and its redirect

GET/admin/qr-codes/:id/download/pngAuth required

Download QR code as PNG

Query parameter: dpi — 72 (web), 150 (screen), or 300 (print). Default: 300.

POST/admin/qr-codes/previewAuth required

Generate a real-time SVG preview (HTMX)

Configuration

Configure default values in the plugin settings:

Plugin Settings

{
  "enabled": true,
  "defaultForegroundColor": "#000000",
  "defaultBackgroundColor": "#ffffff",
  "defaultErrorCorrection": "M",
  "defaultSize": 300,
  "defaultCornerShape": "square",
  "defaultDotShape": "square",
  "defaultLogoUrl": ""
}

Permissions

Permission	Description
`qr_code.generate`	Generate QR codes
`qr_code.manage`	Manage QR codes and settings
`qr_code.view`	View QR codes

The admin sidebar menu requires admin or qr.manage permission.

Redirect Tracking

QR codes integrate with the Redirect Management plugin for scan analytics.

How It Works

When a QR code is created, a 6-character short code is generated (e.g., a1B2c3)
A redirect entry is created: /qr/a1B2c3 → destination URL
When scanned, the redirect fires and analytics are recorded
Scan counts appear in the QR code list view

Short Codes

6-character alphanumeric codes using nanoid
62^6 = 56.8 billion possible combinations
Collision-resistant with uniqueness checking
Example URL: https://your-domain.com/qr/a1B2c3

Atomic Operations

QR code and redirect records are always created, updated, and deleted together in a single D1 batch operation to ensure consistency.

Next Steps

Redirect Management plugin

View all core plugins