How ph4n70mc0de/tactile-qr-studio works
Tactile QR Studio is a browser-only QR design, validation, preview, and export application. Users choose one of five content types, edit its payload, customize appearance or apply a preset, review validation feedback and a live QR preview, then export PNG or SVG. The graph follows the documented and indexed application wiring; validation helpers, preset selection, and QR rendering are represented as distinct product stages. Source excerpts are partial, so unsampled internal relationships are omitted where not established.
Main entry points: App.tsx Studio app · useQREditor.ts Editor state · qrValidation.ts QR validation · QRPreview.tsx Live QR preview
Components 16
Editor experience
- Studio app
src/App.tsx - Editor state
src/hooks/useQREditor.ts - Content editor
src/components/QRContentForm.tsx - Appearance controls
src/components/QRAppearanceForm.tsx - Design presets
src/lib/presets.ts
QR domain logic
- QR validation
src/domain/qrValidation.ts - Payload encoding
src/domain/qrPayload.ts - Appearance defaults
src/domain/qrAppearance.ts - Contrast utilities
src/lib/utils.ts
Preview and export
- Live QR preview
src/components/QRPreview.tsx - QR renderer
- Filename generation
src/domain/qrExport.ts - QR download
Shared UI and types
- Reusable controls
src/components/ui - QR data types
src/types.ts
Other components
- QR designer
Connections 17
- QR designer → Studio app: edits and exports
README.md - Studio app → Editor state: manages state
src/App.tsx - Studio app → Content editor: renders and updates
src/App.tsx - Studio app → Appearance controls: renders and updates
src/App.tsx - Studio app → Design presets: offers presets
src/App.tsx - Studio app → QR validation: validates inputs
src/App.tsx - Editor state → Payload encoding: generates payload
src/hooks/useQREditor.ts - Editor state → Appearance defaults: initializes appearance
src/hooks/useQREditor.ts - Studio app → Live QR preview: shows preview
src/App.tsx - Studio app → Filename generation: creates filename
src/App.tsx - Studio app → Live QR preview: downloads QR
src/App.tsx - Live QR preview → QR renderer: renders and updates
src/components/QRPreview.tsx - QR validation → Payload encoding: checks encoding
src/domain/qrValidation.ts - QR validation → Contrast utilities: checks contrast
src/domain/qrValidation.ts - Content editor → Reusable controls: uses controls
src/components/QRContentForm.tsx - Appearance controls → Reusable controls: uses controls
src/components/QRAppearanceForm.tsx - Studio app → Reusable controls: uses cards and buttons
src/App.tsx