QR Studio

The QR Studio app enables users to create, customize, and manage QR codes for a wide range of use cases — from simple URLs to vCards, WiFi credentials, and calendar events. It includes a live preview, style customization, and scan tracking.

Key Features

• Support for 10 QR code types: URL, Text, Phone, SMS, Email, WhatsApp, WiFi, vCard, Location, Event
• Visual style editor (colors, logo, eye styles, frame, error correction)
• Live preview while creating/editing
• PNG and SVG output formats
• Scan tracking with dashboard stats
• Active/Archived status management
• Download endpoint for generated QR code files

Page Structure

Route	Purpose
/business/apps/qr	Dashboard with stats and recent QR codes grid
/business/apps/qr/codes	Full list of all QR codes
/business/apps/qr/codes/new	Create QR code with type-specific data form, style editor, and live preview
/business/apps/qr/codes/[id]	View/edit QR code details; update and delete actions
/business/apps/qr/codes/[id]/download	Server endpoint to download the generated QR file
/business/apps/qr/settings	App-level settings

Dashboard

Displays four stat cards (Total Codes, Active, Archived, Scans) and a grid of the six most recent QR codes, each showing name, type badge, and creation date.

Create QR Code

The creation page uses a two-column layout:

1. Form column — Name, type selector, dynamic data form (QrDataForm component adapts fields based on type), collapsible style editor (QrStyleEditor), and output format selector (PNG/SVG).
2. Preview column — Sticky QrPreview component renders a live preview as the user fills in the form.

The form uses sveltekit-superforms with dataType: "json" for nested data/style objects.

Edit QR Code

The [id] page pre-populates the same form with existing code data. Supports update and delete form actions with ownership verification.

Data Model

Table	Description
ext_qr.qr_codes	Core QR code record with type, data, style, file path, and status

Key Types

• QrType — "url" | "text" | "phone" | "sms" | "email" | "whatsapp" | "wifi" | "vcard" | "location" | "event"
• QrData — Union type; each QR type has its own data shape (e.g., QrDataWifi has ssid, password, encryption)
• QrStyle — foreground_color, background_color, logo_url, frame, frame_text, inner/outer eye styles, size, error_correction (L/M/Q/H)
• QrCode — id, user_id, name, type, data, style, file_path, file_format (png | svg | pdf), short_link_id, status (active | archived)

Tip

QR codes can optionally be linked to a short link via short_link_id, enabling scan tracking through the Short Links analytics system.

Key Components

Component	Location
QrDataForm	$lib/apps/qr/modules/codes/index.js — dynamic form fields per QR type
QrPreview	$lib/apps/qr/modules/codes/index.js — live QR code preview renderer
QrStyleEditor	$lib/apps/qr/modules/codes/index.js — color, logo, frame, and eye style controls

Services

All server-side logic is in $lib/apps/qr/services/index.js:

• getStats(userId) — dashboard aggregate stats
• listQrCodes(userId) — list all codes for a user
• createQrCode(userId, data) — create a new QR code
• getQrCode(id) — fetch a single code
• updateQrCode(id, data) — update code data/style
• deleteQrCode(id) — delete a code