Anatomi QRIS

The problem

People scan QR codes every day and have never seen one built. Online explainers stop at "here is a bitstream, here is a matrix". Error correction and masking stay black boxes, even in tutorials written for developers.

In Indonesia there is a second gap. QRIS, the national QR payment standard, is on the counter of almost every warung. The code behind the sticker is a plain, readable string that names the merchant, the payment provider and a checksum. Existing QRIS parsers show that string as a table and stop there.

I wanted to join the two. Select "merchant name" in the payment data, and the exact black squares carrying those letters light up in the code. The app is for two readers at once: a curious Indonesian with no technical background, and a developer who wants to check every number by hand.

What I built

The encoder remembers where every bit went

I wrote the QR encoder myself so it could keep a record as it builds. For every square it records why that square is dark or light: which byte and which bit it carries, or which fixed pattern it belongs to, and whether masking flipped it. Every feature reads from that one record. Field highlighting, damage tracking, the animation order and the mask comparison all come from it. I built and tested it before any screen existed, so no view could work out the layout on its own and drift from the others.

The screens show the real calculation

When the encoder adds error correction, it keeps every step of the long division. The division view draws those steps, so a reader can check one line with a pencil. The encoder also scores all eight mask patterns, even though only one wins. The mask gallery shows all eight with their penalty scores, so it always agrees with the winner.

An independent library checks every code

A test compares my output square by square with an independent QR library. It covers versions 1 to 15, all four error-correction levels, all three text modes and all eight masks, and a failure blocks the deploy. The two disagree in one place. For one penalty rule, the library rounds up where the ISO specification rounds down, which can change which mask wins. I follow the specification, and a test documents the difference so it can't go stale.

Pasted payment codes stay on your device

People paste real payment codes into this app. It makes no network requests while you use it: no analytics, no error reporting, and fonts ship with the page. A check at build time fails if anything in the output could call the network. Typed text goes into the URL so you can share a link. A pasted QRIS code never does, and the copy-link button disappears while one is loaded.

Result

Anatomi QRIS is live and public, in Indonesian and English. It walks through nine stages, from the typed text to a damaged code, on a slider you can drag. The code never moves or resizes, so halfway between two stages you see both half done. In the damage lab you scratch out squares and watch error correction repair them live. Push past its limit and it fails in front of you, with the reason. I built it in about 28 hours over two days in September 2026.