qr-creator

qr-creator is a lightweight QR code generation library for the browser that renders directly onto an HTML canvas element. It is a trimmed-down fork of Lars Jung’s jQuery.qrcode plugin (itself built on Kazuhiko Arase’s original QR Code Generator), stripped of its jQuery dependency, GIF export, background-image support, and other unused code paths, cutting the codebase by roughly a third and shipping as a single ~12KB minified file (4.75KB gzipped) with matching TypeScript type definitions.

Unlike most QR libraries that only draw plain black-and-white squares, qr-creator supports rounded corner radii (0 to 0.5) and linear or radial gradient fills, letting generated codes match a product’s brand colors instead of looking like a generic barcode. It exposes a single static QrCreator.render(config, element) call that works with either a <canvas> element or any container element, is available as both an ES module and a plain script-tag build, and is maintained by the Nimiq cryptocurrency project, which uses it to render payment-address QR codes in its own wallet UI.

What You Get

• A single static QrCreator.render(config, element) API that draws directly onto a <canvas> element or appends a new canvas to any container
• Rounded-corner rendering (radius 0 to 0.5) for a softer, less barcode-like appearance than standard square-module QR codes
• Linear and radial gradient fill support in addition to plain solid colors, specified with the same coordinate system as the Canvas 2D gradient APIs
• Configurable error-correction level (L/M/Q/H), quiet zone, and version range so the generated code can trade off size against damage tolerance
• Bundled TypeScript type definitions (types/qr-creator.d.ts) for editor autocomplete and compile-time config validation
• Both an ES module build (qr-creator.es6.min.js) and a plain global-script build (qr-creator.min.js) for use with or without a bundler

Common Use Cases

• Rendering a crypto wallet’s payment address or invoice as a scannable, brand-colored QR code (its original use case in the Nimiq wallet)
• Generating QR codes for URLs, Wi-Fi credentials, or contact cards in a web app without pulling in a heavier dependency or a server-side image service
• Embedding a styled QR code in marketing pages or onboarding flows where a plain black-and-white square would clash with the surrounding design
• Client-side QR code generation for offline-capable or privacy-sensitive apps that shouldn’t send the encoded text to a third-party QR-image API

Under The Hood

Architecture The library is a thin static-class wrapper (QrCreator.render in src/qr-creator.js) around an IIFE-wrapped, unmodified vendor QR encoder (the jquery-qrcode/QR-Code-Generator port). The wrapper’s job is entirely presentational: it takes a settings object, merges it over sensible defaults, builds the raw QR module matrix via the vendor qrcode() function, and then walks that matrix drawing either sharp or rounded rectangles (drawModuleRounded) onto a 2D canvas context, applying a solid color or a linear/radial gradient (setFill) as it goes. There is no framework, no module system beyond a single ES export default, and no internal abstraction layers — encoding and rendering live in one file, which keeps the mental model simple at the cost of any separation between “generate the QR matrix” and “draw it”.

Tech Stack Plain ES6+ JavaScript with zero runtime dependencies; the only dependency of any kind is a devDependency on google-closure-compiler, used purely to produce the minified dist/ bundles via Closure’s ADVANCED compilation mode. Output artifacts are a global-script build and an ES-module build, plus a hand-written .d.ts file for TypeScript consumers — there is no separate TypeScript source, so the types are maintained manually alongside the JS.

Code Quality There is no automated test suite: the test/ directory contains only a manual visual-comparison HTML page that renders the same QR code with both this library and the original vendor generator side by side for a human to eyeball. No linter or formatter configuration and no CI workflow are present in the repository. Naming conventions are inconsistent by design, since large sections are unmodified legacy vendor code (var-based, string-quoted property access to survive Closure’s advanced minification) sitting alongside a modern ES6 class for the public API surface.

API Design The public surface is intentionally tiny: one static method, QrCreator.render(config, element), covering every use case. The README documents every config option (text, radius, ecLevel, fill, background, size) in a single table, and the bundled TypeScript definitions make the gradient-vs-solid-color config union discoverable at the editor level without reading the source. There is effectively no boilerplate to get started beyond building the config object, though the library offers no framework-specific bindings (React/Vue wrappers), so integrating it into component-based UIs requires a small amount of glue code to bridge to a ref’d canvas element.