DEV Community

OohSleep
OohSleep

Posted on

How I Built a Free QR Code Generator That Runs 100% in Your Browser

#javascript #webdev #beginners #tutorial

Last month I launched ToolKnit — a collection of 31 free browser-based tools. One of the latest additions is a QR Code Generator that supports URLs, text, Wi-Fi credentials, and email — all processed locally with zero server calls.

In this post, I'll walk through how I built it and share some interesting technical decisions along the way.

Why Another QR Code Generator?

Most QR code generators online either:

  • Require you to sign up
  • Add watermarks to the output
  • Upload your data to their servers
  • Limit the number of QR codes you can create

I wanted something that's completely free, private, and unlimited. Since everything runs in the browser using JavaScript, your data never leaves your device.

👉 Try it here: ToolKnit QR Code Generator

The Tech Stack

The tool is surprisingly simple:

  • HTML + Tailwind CSS for the UI
  • qrcode.js library for QR code generation (via CDN)
  • Canvas API for rendering and downloading

No React, no build tools, no backend. Just a single HTML file that works everywhere.

How QR Code Generation Works

QR codes encode data as a matrix of black and white squares. The qrcode.js library handles the heavy lifting:

const qr = new QRCode(document.getElementById('qr-output'), {
    text: inputText,
    width: 256,
    height: 256,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.M
});
Enter fullscreen mode Exit fullscreen mode

That's literally it for basic generation. But I wanted to support multiple content types, so I added a tab system for different QR code formats.

Supporting Wi-Fi QR Codes

This was the most interesting part. Did you know your phone can auto-connect to Wi-Fi by scanning a QR code? The format is:

WIFI:T:WPA;S:MyNetwork;P:MyPassword;;
Enter fullscreen mode Exit fullscreen mode

Where:

  • T = Authentication type (WPA, WEP, or nopass)
  • S = SSID (network name)
  • P = Password

In my implementation:

function buildWifiString(ssid, password, encryption) {
    return `WIFI:T:${encryption};S:${ssid};P:${password};;`;
}
Enter fullscreen mode Exit fullscreen mode

Super useful for cafes, offices, or events where you want guests to connect easily without typing long passwords.

Email QR Codes

Similarly, you can encode a mailto: link:

Enter fullscreen mode Exit fullscreen mode

When scanned, it opens the email app with pre-filled fields. Great for business cards or event badges.

Error Correction Levels

One thing I learned building this: QR codes have 4 error correction levels:

Level Recovery Best For
L (Low) ~7% Clean digital screens
M (Medium) ~15% General use (default)
Q (Quartile) ~25% Printed materials
H (High) ~30% Logos overlay, harsh conditions

Higher error correction means the QR code still works even if part of it is damaged or obscured. I defaulted to M (Medium) as a good balance between data density and reliability.

Custom Colors

I added color pickers for foreground and background colors:

const options = {
    colorDark: document.getElementById('fg-color').value,
    colorLight: document.getElementById('bg-color').value,
};
Enter fullscreen mode Exit fullscreen mode

One gotcha: contrast matters. If someone picks similar colors for foreground and background, the QR code becomes unreadable. I considered adding a contrast check but decided to trust the user — most people intuitively pick high-contrast combinations.

Download as PNG

The qrcode.js library renders to a canvas element, so downloading is straightforward:

function downloadQR() {
    const canvas = document.querySelector('#qr-output canvas');
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
}
Enter fullscreen mode Exit fullscreen mode

No server round-trip, no temporary file storage. The PNG is generated entirely in the browser.

SEO Considerations

Since ToolKnit is a tool site that relies on organic search traffic, I spent time on SEO:

  • Schema.org structured data — SoftwareApplication and FAQPage markup
  • 5 FAQ questions with answers in JSON-LD
  • Semantic HTML — proper heading hierarchy, descriptive alt text
  • Performance — single-page tool with minimal dependencies loads fast

For tool sites, I've found that FAQ structured data is especially powerful. Google often shows FAQ rich snippets directly in search results, which dramatically improves click-through rates.

What I'd Improve

If I revisit this tool, I'd add:

  • SVG export for vector quality
  • Logo overlay in the center of the QR code (using H error correction)
  • Batch generation for creating multiple QR codes at once
  • vCard format for contact information

Try It Out

The QR Code Generator is live at toolknit.com/tools/qr-code-generator.html. It's one of 31 free tools on ToolKnit — all browser-based, no signup required.

Other popular tools on the site:

If you're building browser-based tools, I'd love to hear about your approach. Drop a comment below! 🚀

Full tool list and source available on GitHub.

Top comments (0)