DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

I Built a QR Code Generator That Runs 100% in the Browser

Most "QR generator" sites upload your text to a server. You don't need one — a tiny library renders a scannable QR entirely in the browser. Here's how QR codes actually work, and why you stand on a library's shoulders for the encoding.

🔳 Try it (scan the result): https://dev48v.infy.uk/solve/day10-qr-generator.html

How a QR code works

  • A 2-D grid of modules. A barcode stores data in one direction; a QR stores it in two, so it holds far more (URLs, wifi, contacts) and scans at any angle.
  • Finder patterns — the three corner squares let a camera locate + orient the code instantly, even rotated.
  • Reed-Solomon error correction — levels L/M/Q/H recover ~7/15/25/30% damage. That's why a QR survives a logo slapped in the middle (higher correction = denser code).
  • Masking — the encoder XORs the data with one of 8 patterns and keeps the most balanced, so scanners read it reliably.

Don't reinvent it

QRCode.toCanvas(canvas, text, { width: 240, errorCorrectionLevel: "M" });
Enter fullscreen mode Exit fullscreen mode

Encoding (bit packing, Reed-Solomon over GF(256), mask selection) is genuinely hard. For a tool, the smart move is a tiny tested library + your effort on UX: live preview, colours, error-correction choice, download.

Bonus: special payloads are just strings — a wifi QR is WIFI:S:net;T:WPA;P:pass;;.

Open it and generate one.

Top comments (0)