[PROPOSAL] - QR Code Generator

[github-actions]

Existing Coverage Check

Reviewed before proposing:

• /specs/001-pdf-redactor/ — PDF redaction, unrelated.
• /specs/002-video-trimmer-gif-exporter/ — media tool, unrelated.
• Live tools: pdf-redactor, video-trimmer-gif-exporter, print-without-black — none generate QR codes.
• Open issues: [PROPOSAL] - CSV ↔ JSON Converter #14 (CSV↔JSON), [PROPOSAL] - Base64 Encoder / Decoder #18 (Base64) — unrelated.
• Closed issues: [PROPOSAL] Privacy-First PDF Redactor #2 (PDF Redactor), [PROPOSAL] - Video Trimmer & GIF/WebP Exporter #7 (Video Trimmer), [PROPOSAL] - JWT Decoder #19 (JWT Decoder, rejected) — no overlap.

This is net-new. QR code generation has no existing spec, issue, or live tool in this repo. It is directly cited as a style guide example for the target opportunity shape in the project's intelligence brief, and the paid-customization problem is well-established in this category. Spec draft created at specs/004-qr-code-generator/spec.md.

---

Specify Draft Summary

Proposed spec path: specs/004-qr-code-generator/spec.md

Problem: Every user who needs a styled QR code — one with custom colors, rounded corners, or a branded look — hits a paywall. Basic black-and-white QR generation is free everywhere, but the moment users want to customize colors or download a high-resolution/SVG version, tools like QR Code Generator (.com) and QR Code Monkey push them to paid plans ($5–$15/month). Non-technical users (event organizers, small business owners, teachers) are the primary audience being charged for what is trivially achievable in the browser.

Users: Event organizers, small business owners, educators, marketers, non-technical users who want a styled QR code for a flyer, menu, or signage — without paying or creating an account.

Scope (3 prioritised stories):

Priority	Story	Description
P1	Generate QR from URL or Text	Type content → instant QR preview → download PNG or SVG, no watermark
P2	Customize Appearance	Color picker for foreground/background, error correction level, output size — live preview
P3	Structured Content Types	WiFi network, vCard contact, SMS — fill labeled fields, tool encodes format automatically

Key requirements: real-time generation (no submit button), PNG and SVG download, zero watermark, foreground/background color pickers, error correction selector, output size control, reset to defaults, WiFi/vCard/SMS structured templates, unreadability warnings, 100% browser-local.

Acceptance criteria:

• SC-001: Zero bytes of user input transmitted to any server
• SC-002: QR code visible within 200 ms of typing starting
• SC-003: Downloaded files contain no watermark or attribution
• SC-004: Generated codes scan on iOS and Android in 9/10 test cases across URL, WiFi, vCard
• SC-005: Non-technical user generates and downloads styled QR in under 60 seconds

---

The Gap

Basic QR generation is free everywhere — but the moment a non-technical user wants to customize the look of a QR code for a real-world use case (colored to match their branding, SVG for printing, WiFi auto-connect for a café sign), the paywall appears:

• qr-code-generator.com: Standard tier is free but black-and-white only; colored and styled QR codes are "Pro" at $5.40/month.
• qrcodemonkey.com: Limited resolution on free tier; high-res PNG and custom shapes require the "Pro" plan at $6.95/month.
• flowcode.com: Requires account even for basic generation; "Dynamic" QR (editable destination) starts at $10/month.
• QR Tiger: Free tier adds their watermark to downloads; full customization behind paywall.

The customization features are pure client-side rendering. There is no technical reason they require a subscription — it is purely a monetization gate.

Competitor Evidence

Tool	Problem
qr-code-generator.com	Color/style customization behind $5.40/month Pro plan
qrcodemonkey.com	High-res download and custom shapes behind $6.95/month
flowcode.com	Requires account for all tiers; dynamic QR from $10/month
QR Tiger	Watermark added to free downloads; customization behind paywall
Canva QR	Requires Canva account; part of broader subscription funnel

Search phrases users type: qr code generator free, custom qr code generator free no watermark, qr code generator no account, wifi qr code generator, colored qr code free, qr code svg download free

The Tech

API / Capability	Role
qrcodejs / qrcode (vendored)	Core QR code generation — encodes payload into QR matrix
Canvas API	Render QR with custom colors; export to PNG Blob
SVG serialization	Export QR as SVG from the DOM element
Clipboard API	Copy QR image or URL to clipboard
Blob + URL.createObjectURL	Trigger local PNG/SVG download

Ships as tools/qr-code-generator.html + tools/qr-code-generator/main.js + tools/qr-code-generator/style.css. The QR encoding library is small (~15 KB) and easily vendored.

Usability Controls

• Live preview: QR updates instantly as the user types — no submit button
• Color pickers: Foreground and background color, with a color swatch + hex input
• Error correction selector: Low / Medium / Quartile / High with plain-language descriptions
• Output size slider: Set PNG resolution (e.g., 200–2000 px) before download
• Format download buttons: "Download PNG" and "Download SVG"
• Reset to Defaults: Black-on-white, medium error correction, 512 px
• Structured templates: WiFi (SSID, password, security type), vCard (name, phone, email), SMS (phone, message) — each with labeled form fields
• Unreadability warning: Alert if foreground and background colors are too similar or input exceeds QR capacity for chosen error correction level
• Works offline: No network requests required after initial page load

Complexity: 2 / 10

QR encoding is handled entirely by a vendored library. The main implementation work is the custom color rendering (Canvas paint pass over the generated QR matrix), the structured template forms, and the SVG export path. No binary pipelines, no WASM, no Web Workers needed.

Generated by Market Research Discovery · ◷

[github-actions]

Pull request created: #27

Generated by Product Architect: Spec-Gen

[github-actions]

Planning draft ready for review ✅

I generated planning artifacts from this approved issue/spec and opened a PR for review.

• PR: Planning artifacts: QR Code Generator (Related to #22) #27 (branch: 004-qr-code-generator)
• spec.md — 3 prioritised user stories, acceptance scenarios, functional requirements, success criteria
• plan.md — technical context, phase design, file structure layout, key design decisions
• tasks.md — 46 numbered tasks across 6 phases, organized by user story for independent delivery

Scope summary:

Story	Priority	Description
Generate from URL/Text	P1 MVP	Live QR preview → PNG + SVG download, no watermark
Customize Appearance	P2	Color pickers, error correction, size slider, reset
WiFi / vCard / SMS templates	P3	Structured forms auto-assemble QR format strings

What happens next:

1. Review the generated plan and task breakdown.
2. Confirm scope and sequencing still match the approved issue/spec.
3. Request edits or approve the PR for implementation.

Generated by Product Architect: Spec-Gen for issue #22 · ◷

[github-actions]

The code is ready! 🚀 Review the implementation PR here: #28 (branch: build/qr-code-generator-implementation)

The implementation delivers all three user stories from the spec:

• US1: Live QR preview as you type, download as PNG or SVG (no watermark)
• US2: Custom fg/bg color pickers, error correction level, output size slider, Reset to Defaults, low-contrast warning
• US3: WiFi, vCard, and SMS structured templates with auto-assembled format strings

All processing is 100% client-side — the qrcode library (v1.5.4) is vendored at tools/vendor/qrcode/qrcode.min.js. No data leaves the browser.

Generated by Lead Developer: Build · ◷