QR//GEN

A free, ad-free QR code generator that runs 100% in your browser. No backend. No tracking. No watermarks. The URLs you encode never leave your device.

▸ Try it live

Why another QR generator?

Because most "free" QR generators aren't. They watermark your code, expire it after 14 days, route your link through their server, or bury the download button under three ads. This one is a single static page:

• Private by design — encoding happens client-side; there is no server to send your URL to. You can verify this in the Network tab.
• Forgiving input — type example.com and it becomes https://example.com; genuinely broken input gets a clear error instead of a broken QR code.
• Real downloads — PNG for everyday use, SVG if you need a vector that scales cleanly onto a poster or a slide.
• Three sizes — 256 / 512 / 1024 px, picked before you download.
• Zero runtime dependencies — the QR library is vendored into the repo; no CDN, no build step, no supply chain between you and the page.

How it works

The whole app is static files served by GitHub Pages — there is no server (see ADR-0001). QR generation runs in the browser via a vendored copy of qrcode-generator (vendor/qrcode.js). PNG export is painted from the QR module grid onto a canvas, because the library's own data URL is a GIF, not a PNG (see ADR-0002).

There is no build step — the files you see are the files that ship.

index.html          The page: input, size control, preview, downloads, footer
vendor/qrcode.js    Vendored QR library (exposes window.qrcode)
src/
  qr.js             generateQrSvg(qrLib, url) — URL → SVG string
  normalize.js      normalizeUrl(raw) — trim, prepend https://, validate
  download.js       qrFilename() and qrMatrix() (the PNG/SVG source of truth)
  size.js           sizedSvg(svg, px) — resize via the SVG root width/height
  app.js            DOM glue wiring it all together
test/               Vitest tests (run in a happy-dom environment)
docs/adr/           Architecture decision records
CONTEXT.md          Domain glossary (QR Code vs Support QR, etc.)

Development

The only dependencies are dev-time test tooling (Vitest + happy-dom); nothing is bundled into the deployed site.

npm install      # dev dependencies only
npm test         # run the test suite (23 tests)
npm run test:watch

To preview locally, serve the folder over HTTP (opening index.html via file:// breaks ES-module loading):

python3 -m http.server 8000
# then open http://localhost:8000/

Deploying

GitHub Pages serves the main branch root as a project page — pushing to main deploys. Asset paths are relative (./…) so the site works from the /qrcode_generator_free/ subpath, and would work unchanged behind a custom domain.

The "Support" button

The footer's ♡ Support opens a tip-jar modal showing bankQR.JPG — a static payment QR (Malaysia's DuitNow), displayed as-is and never generated by the app. Forking this project? Replace ./bankQR.JPG with your own and update the <img> inside index.html's <dialog id="support-dialog">. Anything in that image is publicly visible, so crop out what you don't want shown.

Roadmap (intentionally not built yet)

Foreground/background colours · logo embedding · copy-to-clipboard · offline/PWA install · custom domain.

License & credits

MIT. QR encoding by Kazuhiko Arase's qrcode-generator (MIT). "QR Code" is a registered trademark of DENSO WAVE INCORPORATED.