I Built a Fully Client-Side QR Code Toolkit with Next.js 16

Kris Dev — Thu, 24 Sep 2026 08:04:51 +0000

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

Try QR Forge →

Thanks for reading 👋

DEV Community: Kris Dev