Building QR OrangeDesigner

QR OrangeDesigner is a browser-based visual editor for designing professional QR code cards. Users generate QR codes from text, URLs, emails, phone numbers, or WiFi credentials, then compose branded layouts on a drag-and-drop canvas with templates, shapes, and custom backgrounds — exporting the result as a high-resolution PNG.

What it does

QR generation

QRInput panel with tabbed input types:

The qrcode library generates a 256×256 data URL that syncs to all QR elements on the canvas when the user clicks Generar QR.

Visual canvas editor

Interactive 400×240px design surface:

• Drag-and-drop — click to select, drag to reposition any element
• Inline text editing — double-click text elements to edit in place
• Element types — text, rectangle, circle, triangle, and embedded QR blocks
• Toolbar — add new shapes and text from the left panel
• Property panel — edit font size, weight, color, dimensions, borders, and fill for the selected element
• Background picker — 12 solid colors and 6 gradient presets for the card background

Templates

Five pre-built card layouts in templates.ts:

1. Minimalista Blanco — clean white card with border frame
2. Tarjeta Moderna — purple gradient background
3. QR Creativo — colorful creative layout
4. Elegante Oscuro — dark elegant theme
5. Naturaleza Fresca — green/nature-inspired palette

Each template ships with positioned text, QR placeholder, and decorative elements ready to customize.

Export & preview

• Download — html2canvas captures the canvas at 2× scale and saves as PNG
• Print — browser print dialog for physical cards
• 3D preview — Tilt3DModal with mouse-tilt perspective effect to inspect the card in pseudo-3D (added in the 3d effect commit)

Editor state

useEditor hook manages the full editor state:

• Element list with add/update/delete/select
• QR data sync across all QR-type elements
• Template loading and canvas clear
• Default canvas starts from the Minimalista Blanco template

Tech stack

No backend — entirely client-side. All design work happens in the browser with instant preview.

Development process

QR OrangeDesigner is a client-only Vite + React editor — QR codes via the qrcode package, PNG export through html2canvas, and deploy on Netlify.

Editor scaffold (first commit)

• Built useEditor hook for canvas state, drag-and-drop positioning, and template switching.
• Supported 5 QR data types (URL, text, email, phone, WiFi) with live preview.
• Added 5 card templates, property panel for colors/gradients, and toolbar shapes.
• Implemented PNG download at 2× scale via html2canvas and browser print support.
• Branded the app as QR OrangeDesigner by Digital Orange.

3D preview modal

• Added Tilt3DModal with mouse-driven perspective tilt so users can inspect the card before export.
• Kept preview rendering separate from export canvas to avoid resolution loss on download.

Launch and support link

• Added Ko-fi donation button in the header.
• Deployed to qrorange.netlify.app with SPA rewrites for deep links.