QR Code Studio
Generate a code, style it, and check it still scans.
IntermediateWeb appTool8–16hAI-buildable 5/5no setupworth shipping
Generate QR codes for URLs, wifi credentials and contact cards, with styling controls for colour, shape and an embedded logo. The constraint that makes it interesting is error correction — style it too heavily and it stops scanning, so the tool has to warn you.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Generate codes for plain text, URLs, wifi credentials and contacts
- Foreground and background colours are adjustable
- Module shape and corner style can be customised
- A logo can be embedded in the centre
- The error correction level is selectable and its effect explained
- A warning appears when styling risks making the code unscannable
- Export as PNG or SVG at a chosen size
The interesting part
- Contrast between modules is what makes a code scannable, so colour choice is constrained
- Logo size trading off against error correction capacity
- Encoding structured formats like wifi and vCard correctly
Once it works
- Add a built-in scanner to verify the generated code
- Add batch generation from a CSV
- Add gradient fills that preserve contrast
Suggested stack
reacttypescripttailwind