I recently launched QR Forge, a free QR code toolkit built with Next.js 16, React, and TypeScript.
The main architectural rule behind the project is simple:
The core QR workflow should stay in the browser.
QR Forge does not need a backend to process QR payloads.
Users can generate, customize, preview, batch-process, and export QR codes directly on their device.
Why fully client-side?
There are already many QR code generators on the web, so I wanted QR Forge to have a clear technical direction instead of becoming just another generator.
For the core workflow, there is no real reason to upload QR data to a server.
The browser can already handle:
- QR generation
- styling
- image rendering
- SVG export
- CSV parsing
- ZIP creation
- print layout generation
So the architecture stays simple:
User Input
↓
Browser
↓
QR Generation
↓
Preview
↓
Export
That also means QR payloads do not need to be sent to a QR processing backend.
What QR Forge currently supports
The current version includes:
- Custom colors, dots, corners, margins, and logos
- PNG, JPEG, WEBP, and SVG export
- Transparent PNG
- Ready-made QR templates
- Template preview and one-click apply
- Print Mode with bleed and registration marks
- Batch QR generation from CSV
- Client-side ZIP packaging
No account is required.
One subtle export bug
One issue I found during development was that changing QR margins did not always produce visibly different exported files.
The cause was module-size rounding inside the QR rendering library.
Nearby margin values could end up producing effectively identical geometry.
The fix was to disable module rounding and make preview and export share the same rendering configuration.
That gave QR Forge an important invariant:
What you see in the preview should be what you export.
Batch QR generation without uploads
Batch generation also stays fully client-side.
A CSV can look like this:
name,value
homepage,https://example.com
devto,https://dev.to
The browser handles the whole pipeline:
CSV
↓
Parse locally
↓
Validate rows
↓
Generate QR codes
↓
Package into ZIP
↓
Download
No CSV upload endpoint is involved.
Print Mode
Print Mode keeps QR margin and print bleed as separate concepts:
Registration marks
↓
Bleed area
↓
Trim area
↓
QR quiet zone
↓
QR matrix
The selected QR size remains the trim size, while bleed and registration marks expand the final export.
Self-contained SVG export
QR Forge also generates self-contained SVG files.
External image references are rejected instead of producing exports that silently depend on remote resources.
Locally uploaded logos can be embedded directly in the SVG, and the QR payload itself is not added to SVG metadata.
Current stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- qr-code-styling
- fflate
- Vercel
The general rule behind the project is:
Client-side by default. Backend by exception.
If something can reasonably and safely happen in the browser, that is where I prefer to keep it.
What’s next?
For now, I’m intentionally slowing down feature development.
The current focus is stability, usability, content, and learning how people actually use the tool before expanding it further.
I’d especially appreciate feedback on:
- generator UX
- export quality
- templates
- Print Mode
- batch generation
- accessibility
- performance
Thanks for reading 👋
