Stop Overcomplicating Simple Things

A QR code remains a two-dimensional grid of black and white squares governed by mathematical principles established in 1994. Modern web implementations obscure this foundational simplicity behind bloated client-side JavaScript bundles, mandatory user registration walls, and monetization gates for basic SVG downloads. EZ QR Generator shifts computational work back to the edge using Hono on Cloudflare Workers, employing HTMX to swap rendered vector markup directly into the Document Object Model without dynamic layout thrashing or client-side runtime overhead.

The Frustration of Modern Web Bloat

Generating a vector QR code requires minimal computational effort. Existing web tools frequently demand user authentication or force payment flows for basic tasks like exporting scalable vector graphics or Wi-Fi configuration codes. While browser extensions offer local alternatives, many lack clean SVG export capabilities or restrict payload customization.

Running live preview generators on every keystroke churns V8 isolate memory and triggers excessive network execution. EZ QR Generator defers rendering until the user completes form entry and explicitly triggers generation, eliminating wasted edge CPU cycles and preventing unnecessary layout recalculations.

Zero-Overhead Localization via V8 Isolate Heap Snapshots

Internationalization libraries like i18next introduce significant bundle inflation, often adding over 100KB of dependencies to parse abstract syntax trees, evaluate complex regex patterns, and execute runtime JSON fetching. On serverless edge runtimes, reading static translation files from disk or executing JSON.parse() blocks the event loop and increases memory consumption.

EZ QR Generator structures localization using domain-driven colocation. Translation dictionaries reside directly within their respective generator directories (such as url, wifi, or vcard) as native TypeScript objects keyed by ISO language codes.

export const wifiTranslations: Record<string, Record<string, string>> = {
  en: { ssid_label: "Network Name (SSID)", encryption_label: "Encryption" },
  vi: { ssid_label: "Tên mạng (SSID)", encryption_label: "Mã hóa" },
  ru: { ssid_label: "Имя сети (SSID)", encryption_label: "Шифрование" }
};

An aggregation helper merges specific language keys upon receiving a request:

import { urlTranslations } from "./url/translations";
import { wifiTranslations } from "./wifi/translations";
import { vcardTranslations } from "./vcard/translations";

export const getTranslationsForLang = (lang: string): Record<string, string> => {
  const sources = [urlTranslations, wifiTranslations, vcardTranslations];

  return sources.reduce((acc, source) => {
    return { ...acc, ...(source[lang] || {}) };
  }, {});
};

Because these translation tables exist as immutable TypeScript constants, Cloudflare's build system compiles them directly into the deployment bundle. During worker instantiation, the V8 engine incorporates these static objects directly into the isolate's heap snapshot. The runtime avoids network fetching, JSON parsing overhead, and dynamic allocation, delivering instant cold-start execution.

Custom Edge SVG and Binary PNG Generation

Cloudflare Workers operate without Node.js native graphics bindings like canvas or sharp. While matrix calculations for error correction and Reed-Solomon data masking rely on a compact core module, the vector and raster output pipelines are written in native TypeScript.

To construct SVGs, the engine iterates directly across the boolean matrix grid provided by the matrix generator, emitting raw XML strings composed of geometric primitives (<rect>, <circle>, or custom <use> symbol definitions):

export function renderMatrixToSVG(matrix: boolean[][], dotStyle: string, primaryColor: string): string {
  const size = matrix.length;
  let pathBuilder = "";

  for (let row = 0; row < size; row++) {
    for (let col = 0; col < size; col++) {
      if (matrix[row][col]) {
        pathBuilder += `<rect x="${col}" y="${row}" width="1" height="1" fill="${primaryColor}" />`;
      }
    }
  }

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">${pathBuilder}</svg>`;
}

For raster PNG output, the application constructs raw binary Uint8Array buffers manually at the byte level. The generator writes standard PNG header structures (IHDR, PLTE, and IDAT chunks) directly and compresses image data using the native Web Crypto CompressionStream("deflate") API. This approach delivers edge-compatible binary image generation without external C++ bindings or heavy npm packages.

HTMX Payload Exchange & DOM Swapping

The client interface interacts with the Hono backend over a single HTTP endpoint: POST /api/generate.

Because the form accommodates binary logo attachments alongside configuration attributes, HTMX transmits a multipart/form-data payload containing parameters such as primaryColor, dotStyle, activeTab, and logoFile.

import { Hono } from "hono";
import { renderMatrixToSVG } from "../renderers/svg";

const app = new Hono();

app.post("/api/generate", async (c) => {
  const body = await c.req.parseBody();
  const primaryColor = (body["primaryColor"] as string) || "#000000";
  const dotStyle = (body["dotStyle"] as string) || "square";

  // Compute matrix & build SVG
  const svgMarkup = renderMatrixToSVG(computedMatrix, dotStyle, primaryColor);

  return c.html(svgMarkup);
});

Upon receiving the HTML string response from Hono, HTMX swaps the raw SVG element directly into the designated container element, instantly updating the UI without triggering full page reloads or maintaining complex virtual DOM trees.

Edge Memory Limits, Defensive Validation, and Security

Cloudflare Workers impose a strict 128MB RAM limit and tight CPU execution windows per request. Uncontrolled memory usage or uncaught runtime exceptions will immediately terminate the isolate.

To preserve system stability, several defensive checks protect the execution environment:

1. Matrix Density Exceptions: Attempting to encode datasets that exceed maximum QR capacity throws a matrix dimension error. Wrapping the calculation block in an explicit try...catch block intercepts the error and returns a styled error fragment (<div class="text-red-500">Data exceeds QR capacity</div>), which HTMX renders cleanly into the view.
2. OOM Protection for File Uploads: Memory exhaustion occurs rapidly if a worker attempts to process multi-megabyte image buffers. The server inspects logoFile.size prior to calling arrayBuffer(). If the file size exceeds 1MB, the server halts buffer allocation immediately.
3. MIME Filtering and XSS Prevention: Uploaded image files pass through an explicit MIME allowlist restricting accepted types to image/png, image/jpeg, and image/gif. Invalid or unrecognized file types are safely ignored, allowing the QR generator to render the matrix without the logo element. Valid image buffers are encoded as base64 data: URIs and placed inside SVG <image> tags, neutralizing cross-site scripting risks associated with arbitrary SVG file uploads.

Pure Engineering Efficiency

EZ QR Generator proves that web utility applications do not require heavy client frameworks, invasive tracking, or paywalls. Distributing lightweight TypeScript logic across edge nodes yields zero-latency vector generation while keeping runtime memory footprints minimal.