Offline QR Generator: A Local-First Implementation

Client-side rendering is the only way to handle QR codes if you actually care about privacy and speed. Most "free" generators online are just wrappers for an API call—you send your data to their server, they send back an image. It's overkill and a privacy leak for something that can be done entirely in the browser.

I decided to build a version that runs 100% locally. No API calls, no backend, no tracking. If you pull the plug on your internet, it still works.

The Technical Stack

To get this running without a server, I used a lightweight JavaScript library called qrcode.js. The logic is simple: the library converts the string input into a matrix of modules (the black and white squares) and renders them directly onto an HTML5 Canvas element.

If you want to build this from scratch, here is the minimal setup to get a functional generator working in a single HTML file.

Step-by-Step Deployment

1. Include the Library
You don't need an npm install for a quick tool. You can pull the script from a CDN or download it for true offline use.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

2. Set Up the DOM
You need a simple input field and a container where the QR code will be injected.

<div id="qrcode"></div>
<input type="text" id="text-input" placeholder="Enter URL or text" />

3. Initialize the Generator
The key is to clear the previous QR code before generating a new one, otherwise, they just stack on top of each other.

const qrContainer = document.getElementById("qrcode");
const textInput = document.getElementById("text-input");

// Initialize QRCode object
const qrcode = new QRCode(qrContainer, {
    text: "https://promptcube3.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

// Update QR code on input change
textInput.addEventListener("input", (e) => {
    qrcode.clear(); 
    qrcode.makeCode(e.target.value);
});

Performance and Config Details

When setting this up, the correctLevel parameter is the most important part. I used QRCode.CorrectLevel.H (High). Here is why that matters for real-world use:

• Level L (Low): 7% recovery. If the print is slightly smudged, it fails.
• Level M (Medium): 15% recovery. Standard for most URLs.
• Level Q (Quartile): 25% recovery.
• Level H (High): 30% recovery. This allows the QR code to remain readable even if a significant portion of the image is obscured or damaged.

In terms of speed, because there is no network latency, the rendering happens in roughly 5-10ms on a standard Chrome instance. Compare that to a server-side generator where you're looking at 200ms to 2s depending on the API response time.

Why this beats SaaS generators

For anyone doing prompt engineering or managing complex AI workflows, you often have long strings of text or API keys that you need to move between devices quickly. Pasting a sensitive API key into a random "Free QR Generator" website is a security risk.

By using a local-first approach, the data never leaves the RAM of your browser. It's a simple AI workflow optimization: eliminate the middleman. If you're building a dashboard for your LLM agent or a local tool for your team, embedding a local JS generator is a no-brainer.