I Built a QR Code Generator in Pure Vanilla JS — No Libraries, No Server, 202 Tests

QR codes look like magic — a grid of black and white squares that encodes anything from a URL to a business card. But how do they actually work? I decided to find out the hard way: implement the full QR Code Model 2 algorithm in vanilla JavaScript, zero external dependencies.

The result: QR Code Generator — a free, client-side tool that generates QR codes from any text or URL.

👉 https://qr-code-generator-e83.pages.dev

Why No Libraries?

I maintain a collection of browser-only developer tools at devnestio. Every tool has the same rule: zero external dependencies. No npm installs, no CDN scripts, no servers.

For most tools (JSON diff, Base64 encoder, UUID generator) that's easy. QR codes are different. The spec is a 126-page ISO document. Most developers just npm install qrcode and call it a day.

But writing it from scratch taught me more about error-correcting codes, Galois field arithmetic, and matrix encoding than I ever expected. Worth every hour.

What the Tool Does

• Real-time generation as you type (debounced at 80ms)
• Size selector — 128 × 128, 256 × 256, or 512 × 512 pixels
• Error correction level — L (7%), M (15%), Q (25%), H (30%)
• Color picker — any foreground and background color
• PNG download via canvas
• SVG download with crisp vector output at any scale

How QR Codes Actually Work

QR Code Model 2 (the standard you see everywhere) has six major steps. Here's the short version:

1. Data Encoding

Text gets encoded into one of three modes based on content:

• Numeric (0-9): packs 3 digits into 10 bits — most compact
• Alphanumeric (0-9 A-Z $%*+-./:space): 2 chars into 11 bits
• Byte (everything else): UTF-8, one byte per 8 bits

The encoder picks the mode automatically and finds the minimum QR version (1–40) that fits the data.

function detectMode(text) {
  if (/^\d+$/.test(text)) return NUMERIC_MODE;
  if (text.split('').every(c => ALPHANUMS.includes(c))) return ALPHANUM_MODE;
  return BYTE_MODE;
}

2. Reed-Solomon Error Correction

This is the hard part. QR codes can survive up to 30% damage (at ECL H) because of Reed-Solomon codes — the same algorithm used in CDs, DVDs, and deep-space transmissions.

RS encoding requires arithmetic in Galois Field GF(256), where numbers wrap around at 256 using polynomial division mod x⁸ + x⁴ + x³ + x² + 1 (0x11d):

const GF = (() => {
  const EXP = new Uint8Array(512);
  const LOG  = new Uint8Array(256);
  let x = 1;
  for (let i = 0; i < 255; i++) {
    EXP[i] = x;
    LOG[x] = i;
    x <<= 1;
    if (x & 0x100) x ^= 0x11d; // reduce mod primitive polynomial
  }
  for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255];
  return {
    mul(a, b) { return (a === 0 || b === 0) ? 0 : EXP[LOG[a] + LOG[b]]; },
    // ...
  };
})();

Multiplication in GF(256) becomes table lookups: mul(a, b) = EXP[LOG[a] + LOG[b]]. The EXP and LOG tables are precomputed once, making the encoder fast.

3. Data Interleaving

For larger QR versions, data is split into multiple blocks, each with its own RS error-correction codewords. The blocks are then interleaved — one byte from block 1, one from block 2, etc. — so physical damage (a scratch across the code) hits different blocks and can be recovered.

4. Matrix Construction

A QR code matrix (21×21 for version 1, up to 177×177 for version 40) has:

• Finder patterns — the three 7×7 squares in the corners
• Alignment patterns — smaller squares for versions 2+
• Timing patterns — alternating dark/light rows/columns for calibration
• Format information — ECL and mask pattern, BCH(15,5) encoded
• Version information — for versions 7+, BCH(18,6) encoded
• Data modules — placed in a specific zigzag path

5. Masking

QR scanners struggle with large solid areas or repetitive patterns. The spec defines 8 mask functions (e.g., (row + col) % 2 === 0). The encoder tries all 8, scores each using a 4-rule penalty system, and picks the lowest-penalty mask:

const MASK_FNS = [
  (r,c) => (r+c)%2===0,
  (r,c) => r%2===0,
  (r,c) => c%3===0,
  (r,c) => (r+c)%3===0,
  (r,c) => (Math.floor(r/2)+Math.floor(c/3))%2===0,
  (r,c) => (r*c)%2+(r*c)%3===0,
  (r,c) => ((r*c)%2+(r*c)%3)%2===0,
  (r,c) => ((r+c)%2+(r*c)%3)%2===0
];

6. Format Info Placement

The chosen ECL and mask index are BCH-encoded into a 15-bit format string and written to reserved areas around the top-left finder pattern and mirrored at the top-right and bottom-left finders. I precomputed all 32 possible values to keep the runtime code simple.

Testing: 202 Cases, Node.js Built-in Only

The test suite covers every layer of the algorithm:

Section	Tests	What's covered
GF(256) arithmetic	14	mul, div, pow, inv, tables
RS generator	8	polynomial degree, known vector
Mode detection	12	numeric/alphanumeric/byte edge cases
UTF-8 encoding	10	ASCII, 2/3/4-byte codepoints
Data capacity table	10	versions 1–40, all 4 ECL levels
charCountBits	9	bit width transitions at v9/v26
encodeData version selection	12	min version, overflow, max inputs
BitStream	8	append, byte packing, alignment
generateQR shape	12	matrix dimensions, null inputs
Module values	10	0/1 only, finder pattern positions
Version sizes	8	size = version × 4 + 17
Mask patterns	8	all 8 mask functions
Version info BCH	6	known spec values (v7–v10, v40)
Format strings	6	known spec values (all ECL levels)
Alignment positions	6	v1, v2, v7, v40
Codeword interleaving	6	total length = data + EC
ECL level comparisons	8	same text, increasing ECL = higher ver
Known RS vector	6	exact byte match from QR spec
Finder pattern modules	8	dark/light positions verified
Edge cases	6	emoji, long URLs, whitespace
ECL stress	6	version ordering across L/M/Q/H
Null input handling	4	null/undefined/empty/overflow

No Jest, no Mocha, no assert module — just a 30-line test runner I wrote inline.

The Hardest Bug

The format info placement had a subtle off-by-one. The spec places bits 0–5 of the 15-bit format word in rows 0–5 of column 8, bit 7 in row 7, and bit 8 in row 8. I had the bit ordering reversed for the horizontal vs vertical copies, which produced valid-looking (but wrong) format areas.

The fix: explicitly write each position separately rather than looping symmetrically.

Try It

https://qr-code-generator-e83.pages.dev

The full source is a single index.html — open DevTools and read through it. No build step, no framework, no minification. It's all there.

Also part of devnestio — a growing collection of zero-dependency developer tools.

---

Built with: vanilla JS, a copy of the QR Code ISO standard, and too much coffee.