ShowDev: CreateMyQR — 37 Client-Side QR & Barcode Tools, Forever Free

We've all seen them. The sleek, modern websites advertising "dynamic QR codes" and "advanced analytics" for an eye-watering monthly subscription. They promise to manage your digital presence, update your menus, and track engagement. And if you dare to cancel your $45/month plan, your QR code, once a beacon of convenience, becomes a broken link, a digital tombstone for your restaurant's updated menu or event flyer. It’s an infuriating display of digital rent-seeking, holding basic 1994 geometry hostage behind a paywall. The fundamental technology behind a QR code is an open, client-side solvable problem, defined by an ISO standard, not a proprietary cloud service. This exact frustration is why I spent my nights and weekends building CreateMyQR.

Why I Built This: Liberating Geometry from SaaS Greed

The core premise of many of these "dynamic QR code" services is a fundamental misunderstanding, or perhaps a deliberate misdirection, about how QR codes work. A QR code, at its heart, is a static bitmap representation of data. When you scan a QR code pointing to https://my-saas.com/qr/your-menu-id, you're not scanning a "dynamic" code; you're scanning a static link to a "dynamic content" provider. The intelligence, or rather the control point, is at their server, not embedded in the QR code itself. When they cut off your subscription, they simply stop serving content at that URL. Your physical QR code, forever printed on your business card, simply points to oblivion.

This pattern, especially prevalent since the pandemic forced many businesses to adopt digital menus, struck me as particularly predatory. Charging small businesses $40-$60 a month to host a simple JSON file or redirect a URL, when the actual QR code generation is a trivial, CPU-friendly operation executable entirely within a web browser, felt fundamentally wrong. It's an abuse of the "as-a-service" model, transforming an open standard (ISO/IEC 18004, first published in 1994!) into a recurring revenue stream by adding an unnecessary server-side intermediary.

My motivation was simple: to build a truly free, client-side, and privacy-respecting suite of QR and barcode tools. No venture capital bloat, no recurring subscriptions, no data tracking, and absolutely no expiration dates. The goal was to put the power back into the hands of the creator, allowing them to generate permanent, high-quality, vector-based QR codes that link directly to their content, not through a potentially ephemeral, paywalled third-party service. Imagine a restaurant generating a QR code that points directly to their Google Drive PDF menu or their own self-hosted website, forever. That's the freedom CreateMyQR champions.

Tech Stack Breakdown: Open Standards, Client-Side Power

Achieving a feature-rich, performant, and completely client-side application required careful selection of technologies. My primary architectural constraint was no server-side processing for QR/barcode generation. This means everything, from data encoding to error correction and final rendering, happens within your browser.

• HTML5 Canvas API: This is the workhorse for immediate, raster-based visual feedback. When you type in your data on CreateMyQR, the Canvas API is leveraged to rapidly draw the black and white modules of the QR code matrix. It's incredibly fast for on-the-fly rendering and allows for quick previews and adjustments. The CanvasRenderingContext2D provides methods like fillRect which are perfect for plotting the individual "pixels" or modules of the QR code. While excellent for screen display, Canvas has its limitations for print-quality output due to its pixel-based nature.

• SVG Path Matrix (via direct string manipulation): This is where CreateMyQR truly distinguishes itself for high-quality, scalable output. Instead of just rendering to Canvas, the application also generates pure Scalable Vector Graphics (SVG). The QR code's underlying structure is a grid (matrix) of modules. For SVG, instead of drawing individual rectangles for each black module, I generate a single, highly optimized SVG <path> element. This path concatenates commands like M (move to), h (horizontal line), v (vertical line), and z (close path) to draw all the black modules efficiently. The beauty of SVG is its vector nature: it scales infinitely without pixelation, making it ideal for print, signage, and high-resolution digital displays. This is precisely what those commercial services often fail to provide, opting for blurry 72dpi PNGs as their "high-quality" output.

• ISO/IEC 18004 Reed-Solomon Galois Field Math: This is the mathematical core that makes QR codes robust. While I didn't write the Reed-Solomon error correction library from scratch (relying on well-vetted, open-source JavaScript implementations), understanding its role is crucial.

  • Data Encoding: The input data (e.g., your URL) is first converted into a sequence of bits according to specific encoding modes (numeric, alphanumeric, byte, Kanji).
  • Error Correction: This is the magic of Reed-Solomon. The encoded data is then passed through a complex mathematical process involving Galois fields (finite fields). Essentially, redundant "error correction codewords" are generated and appended to the data. These codewords allow a QR scanner to reconstruct the original data even if parts of the QR code are damaged, obscured, or dirty. This is not trivial math; it involves polynomial arithmetic over finite fields.
  • Structure and Final Matrix: Finally, the data and error correction codewords are interleaved, laid out into "blocks," and mapped onto the QR code's specific pattern (finder patterns, alignment patterns, timing patterns, format information, version information). This forms the black-and-white module matrix that we see.

The decision to keep everything client-side means:

• Zero Latency: Generation is instantaneous as there's no network round trip.
• Privacy by Design: Your data never leaves your browser. No server logs, no telemetry, no tracking.
• Offline Functionality: Once loaded, the tool works perfectly without an internet connection. This is a huge win for privacy and reliability.
• Permanence: The generated QR code points directly to your chosen URL, not a redirector. Its validity is tied only to the destination URL, not to a subscription service.

Key Code Snippet: From Matrix to Infinite Vector SVG

One of the trickiest, yet most satisfying, engineering problems was efficiently converting the raw QR code module matrix (a 2D array of booleans or 0s and 1s) into a clean, optimized SVG path. Drawing every single black module as a separate <rect> element in SVG would result in bloated file sizes, especially for larger QR codes. The elegant solution is to aggregate all black modules into a single <path> element, using relative path commands.

Here's the core function that accomplishes this:

/** * Converts a 2D QR code matrix into a pure SVG path string for vector rendering. * Each 'true' value in the matrix represents a black module. * * @param {boolean[][]} matrix - The 2D array representing the QR code modules (true for black, false for white). * @param {number} size - The desired overall width and height of the SVG viewport. * @returns {string} A complete SVG string containing a single path element for all black modules. */ export function renderQRToVectorSVG(matrix, size = 300) { // Determine the size of each individual module (cell) based on the overall SVG size and matrix dimension. // A matrix.length of 21 means 21x21 modules for QR code Version 1. const cellSize = size / matrix.length; let pathD = ''; // This string will accumulate all SVG path commands. // Iterate over each row and column of the QR code matrix. for (let r = 0; r < matrix.length; r++) { for (let c = 0; c < matrix[r].length; c++) { // If the current module (matrix[r][c]) is 'true' (i.e., it's a black module), // append SVG path commands to draw a square for it. if (matrix[r][c]) { // M: MoveTo (absolute coordinates) - Start a new sub-path at the top-left corner of the module. // The coordinates are calculated by multiplying the row/column index by the cellSize. // h: horizontal line (relative coordinates) - Draw a line to the right, equal to cellSize. // v: vertical line (relative coordinates) - Draw a line down, equal to cellSize. // h-: horizontal line (relative coordinates) - Draw a line to the left, equal to -cellSize (back to start). // z: close path - Connects the current point to the first point of the current subpath. // The space at the end is crucial for separating path commands in the final 'd' attribute. pathD += `M${c * cellSize},${r * cellSize}h${cellSize}v${cellSize}h-${cellSize}z `; } } } // Construct the full SVG string. // xmlns: standard XML namespace for SVG. // viewBox: defines the internal coordinate system of the SVG. We map it directly to our size. // width/height: the final dimensions of the SVG (can be overridden by CSS later). // <path>: the element that draws the QR code. // fill="#000000": sets the color of the path to black. // d="${pathD}": the accumulated path commands. return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}"> <path fill="#000000" d="${pathD}" /> </svg>`; } 

This renderQRToVectorSVG function iterates through the 2D boolean matrix representing the QR code. For every true (black) module, it appends a simple M...h...v...h-...z command sequence to a growing string. This effectively draws a square. By concatenating these commands into a single d attribute of an SVG <path> element, we achieve:

1. Optimized File Size: One <path> element is far more efficient than potentially thousands of <rect> elements.
2. Infinite Scalability: SVG is resolution-independent. This means you can print a QR code generated by CreateMyQR on a business card or a billboard, and it will always be perfectly crisp.
3. Direct Control: Developers can then embed this raw SVG string directly into their HTML, save it as an .svg file, or further manipulate it programmatically.

The True Cost of "Dynamic" QR Codes: A Benchmark

Let's lay out the facts. When you compare the architectural choices, the "benefits" of commercial "dynamic" QR SaaS quickly evaporate, revealing a stark contrast in cost, control, and privacy.

The table speaks for itself. The "dynamic" nature offered by these SaaS platforms is nothing more than a server-side redirect, a thin veneer over a static standard, used to justify recurring charges and exert control over your content. CreateMyQR, built on open web standards and fundamental geometry, offers genuine permanence, unparalleled privacy, and complete creative control—all for free.

Try the Live Demo & Feedback Request

This project is a labor of love, a testament to what's possible when we choose open standards and client-side architecture over proprietary, rent-seeking services. It's built for developers, by a developer, with the philosophy that fundamental tools should be free and open.

👉 Live Tool: https://createmy-qr.com

I invite you to explore CreateMyQR. Generate your own permanent QR codes, play with the 37 different types, and export them in high-resolution vector SVG or raster formats. Your feedback as a discerning DEV.TO community member is invaluable.

• Are there specific barcode types or QR features you'd like to see implemented?
• What other client-side developer utilities do you think are ripe for a "de-SaaS-ification" and could benefit from an open-source, no-paywall approach?

Let's discuss how we can continue to build and champion truly open web tools that serve the community, rather than profit from basic geometry.