DEV Community

Cover image for I Built a Fully Client-Side QR Code Toolkit with Next.js 16
Kris Dev
Kris Dev

Posted on

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

#webdev #typescript #nextjs #tailwindcss

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.

Try QR Forge →

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The browser handles the whole pipeline:

CSV
 ↓
Parse locally
 ↓
Validate rows
 ↓
Generate QR codes
 ↓
Package into ZIP
 ↓
Download
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 👋

Top comments (0)