How I Built a Free QR Code Generator for the Browser

Most QR code generators ask you to create an account before you can download a single image — then they watermark it, cap your scans, or quietly log what you encoded. I built a free QR code generator that does none of that: it runs entirely in your browser, turns URLs, WiFi details and vCards into a code as you type, and lets you download it as PNG or SVG. Here is how it works.

Why build a QR code generator in the browser at all?

Because a QR code often encodes something private — your home WiFi password, your phone number, a link to an unlisted document — and a server-side generator asks you to send that data to a stranger's computer first. A browser generator never sends it anywhere, so there is nothing to leak, and it stays instant with no queue, account or scan limit.

It is also the honest way to offer a free tool. A server-side generator has a cost for every code it makes, which is why so many of them gate downloads behind accounts and charge for the good features. A browser generator has no per-code cost: the encoding happens in your own device's JavaScript engine, on hardware you control. That privacy-first pattern runs through the rest of ToolsOfWeb — the image tools process files on your own device, and the password generator never sends your passwords anywhere. A WiFi password deserves that treatment more than most things you type into a website, because it is the key to your whole home network.

How does a QR code actually store your text?

Your text is turned into a payload string, then encoded into a grid of black and white squares called modules. The encoder picks the mode for the content — numbers only, letters and numbers, or full bytes — adds error-correction data, and arranges everything in a square that grows from 21 by 21 modules up to 177 by 177 as text grows.

The format itself is older than the smartphone: the QR code was invented in 1994 by Masahiro Hara and his team at Denso Wave in Japan, originally to track car parts through Toyota factories — a fact recorded by Wikipedia and by the Japan Patent Office. Denso Wave chose not to enforce its patents, so anyone can build a generator for free today. The largest version, version 40, holds up to 4,296 alphanumeric characters or 7,089 numeric characters. In this tool the open-source qrcode library does the encoding: one call turns the payload string into a PNG data URL for the screen or an SVG string for download — no server involved. The guide to how QR codes work covers finder patterns, versions and error correction in detail.

How do WiFi, vCard and email codes work?

They are all plain text with a fixed format that phones already understand. A WiFi code is a string like WIFI:T:WPA;S:MyNetwork;P:secret;; — scan it and the phone joins the network. A vCard is a block starting with BEGIN:VCARD, an email code is a mailto: link, and an SMS code is SMSTO:number:message. The generator builds the string; your phone does the rest.

The fiddly part is getting those strings exactly right: a phone silently ignores a malformed one. A WiFi network name or password containing a semicolon, colon, comma, backslash or quote has to be escaped with a backslash first, or the phone reads the field as finished at the wrong place. Hidden networks add a H:true flag, and open networks use T:nopass with no password field at all. URLs get normalised too: type example.com and the tool adds https:// for you, because a bare domain is not a valid link. Email codes build a query string with subject and body, and vCards follow the version 3.0 format with name, organisation, phone and email. Every field is validated before the code renders, so a bad email address or phone number shows a plain-language error instead of a code that looks fine but does nothing when scanned.

What do the error-correction levels really do?

They decide how much of the code can be damaged or covered and still scan. Level L recovers about 7% of the data, M about 15%, Q about 25% and H about 30%. Higher levels add backup data, so the code gets denser and holds less text — M suits most uses, and H is for rough surfaces or a logo.

The backup data is Reed-Solomon error correction, the same maths that keeps scratched CDs playing. It works by storing extra pieces of the message spread across the code, so a torn corner or a coffee stain only destroys some of the pieces and the scanner rebuilds the rest. That is also why a very long text at level H can fail: the code hits its size limit sooner, and the generator says so plainly instead of drawing a broken code. One more setting matters just as much: the quiet zone, the blank margin around the code. Scanners need at least two modules of white space to find where the code starts, so the margin defaults to two and can be raised to four — set it to zero and many phones will not see the code at all.

Why PNG and SVG — and which one should you download?

PNG is a fixed-size image — 256, 512 or 1024 pixels — that works everywhere, from a slide deck to a chat message. SVG is a vector file that stays sharp at any size, so it is the right choice for print: a business card, a poster or a shop window. Download PNG for screens and SVG for print.

The two formats fail in opposite ways. Enlarge a 256-pixel PNG to poster size and the squares turn into blurry blobs that a phone cannot read; shrink an SVG and nothing is lost, because the file describes shapes rather than pixels. The trade-off is compatibility: every app on earth opens a PNG, while some older tools still choke on SVG. That is why the default is a 512-pixel PNG — big enough for most screens, small enough to share — with 1024 pixels for crisp prints and SVG when it needs to scale. You can also pick your own colours, including a transparent background for coloured posters or dark websites. Keep the contrast high: a light code on a dark background confuses many scanners, so dark modules on a light background remain the safe choice.

FAQs