Is QR Code Generation Client-Side? Here's Exactly How It Works

"Client-side" means the work happens on your device — inside your browser — rather than on a remote server. For PXLA QR, that's not a marketing claim; it's a literal description of the code path your URL travels through the moment you click Generate QR Code. This article walks through that path.

The full request flow, step by step

1. You type or paste a URL into the input field. This value lives only in your browser's memory (technically, in a React component's local state) — nothing is sent anywhere yet.
2. On submit, a validation function checks the URL locally: automatically prepending https:// if you omitted a protocol, then confirming the result parses as a real http or https URL with a valid-looking hostname. This runs as plain JavaScript in your browser.
3. The validated URL is handed to a QR-generation function, which is a thin wrapper around the open-source qrcode npm package. This function runs the full encoding pipeline described in How QR Codes Work — mode selection, error correction, module placement, masking — entirely in JavaScript, on your device.
4. The library renders the resulting grid to an HTML Canvas element (a standard browser API for drawing graphics), then exports that canvas as a PNG image encoded as a base64 data URL — a self-contained string that represents the entire image, with no separate file or server request involved.
5. That data URL becomes both the src of the QR code preview you see on screen, and the href of the Download PNG button, with a download attribute that tells your browser to save it as a file when clicked.

What a "data URL" actually is

A data URL is a way of embedding a file's entire contents directly inside a string, instead of pointing to a separate file somewhere. It looks like data:image/png;base64,iVBORw0KG... — everything after the comma is the literal image data, base64-encoded (a way of representing binary data as plain text). Your browser can render this string directly as an image, and can also use it as a download source, without ever needing to fetch anything from a server. This is exactly what makes fully offline, fully client-side image generation possible.

Why Canvas, and why PNG

The HTML Canvas API is a standard part of every modern browser, built specifically for drawing pixel graphics — exactly what's needed to render a grid of black and white QR modules accurately, at a specific resolution, without any server-side image processing. PXLA QR generates codes at 1024×1024 pixels by default, which the qrcode library builds by drawing each module as a precisely positioned rectangle on the canvas, then reads back as PNG data. PNG is used because it's a lossless format — every pixel is preserved exactly as generated, with no compression artifacts that could blur the sharp module edges a scanner depends on (unlike JPEG, which is designed for photographs and would introduce exactly the kind of soft edges that hurt QR code scannability).

How fast is this, really?

Very. Generating a 1024×1024 QR code with the settings PXLA QR uses (error-correction level Q, a 4-module quiet zone) typically completes in well under a tenth of a second on ordinary consumer hardware — fast enough that the brief "Generating..." state you see on the button exists mostly for visual feedback, not because the computation is slow. This is one of the practical advantages of client-side generation: there's no network round-trip latency to a server, so the result appears about as fast as your device can compute it.

What does this require from your browser?

Just modern, standard web APIs — JavaScript execution and the Canvas API, both supported by every current version of Chrome, Safari, Firefox, and Edge, on desktop and mobile alike. There's no browser extension, no plugin, and no special permission required. See Browser Compatibility in our troubleshooting guide if you're using an unusually old or restricted browser.