DEV Community

AI Maker
AI Maker

Posted on

How to Generate Custom QR Codes Without Sending Your Data to a Server

#javascript

How to Generate Custom QR Codes Without Sending Your Data to a Server

Most free QR code generators look harmless, but the moment you paste a WiFi password, a private link, or a vCard into them, that data usually leaves your browser and lands on someone else's server. Some tools watermark the result, force you to create an account, or quietly resell usage analytics.

I built QRify to fix that. It runs entirely in the browser. Nothing you type or upload ever leaves your device.

Why client-side matters

A QR code is just a visual encoding of text. There is no reason the raw payload needs to travel to a backend to be turned into an image. Client-side generation means:

  • No server logs of your URLs, passwords, or contact details.
  • No registration wall.
  • No watermark.
  • Instant feedback, even offline.

What you can customize

QRify is built around qr-code-styling with a few extra UI conveniences:

  • Foreground / background colors with optional gradients (linear or radial).
  • Dot and corner styles: rounded, dots, square, or extra-rounded.
  • Center logo with adjustable size, so the code still scans.
  • Export formats: high-resolution PNG or true vector SVG.
  • Templates for common payloads: plain URL, WiFi network, vCard, and SVG-first output.

A practical example: WiFi QR code

A WiFi QR code is just a specially formatted string:

WIFI:T:WPA;S:YourNetwork;P:YourPassword;;
Enter fullscreen mode Exit fullscreen mode

Paste that into a client-side generator and you get a code guests can scan to join the network without reading the password out loud.

The same approach works for vCards:

BEGIN:VCARD
VERSION:3.0
FN:Alex King
TEL:+1234567890
EMAIL:alex@example.com
URL:https://example.com
END:VCARD
Enter fullscreen mode Exit fullscreen mode

Logo placement and error correction

Adding a logo in the middle of a QR code covers part of the data modules. To keep the code scannable, QRify uses a high error-correction level (H) and limits how much of the center the logo can cover. If you push the logo size too far, most modern phones still scan it, but the safe rule of thumb is to keep the logo under roughly 30% of the code area.

Try it

If you want a QR code generator that does not phone home, you can use QRify here:

https://qrify-ebon.vercel.app

It is free, no signup, and the source is open on GitHub.

If you are building something similar, the main libraries I would recommend are qrcode for raw data encoding and qr-code-styling for the visual styling layer. Combine that with canvas or SVG export and you have a fully private generator.

Top comments (0)