Linkbreakers maintained QR code styling library with logo and theme support
npm install linkbreakers-qr-code-stylingBattle-tested QR code designer maintained by Linkbreakers. We started with the fantasticqr-code-styling project, but our production needs quickly outgrew the original feature set. Today this fork includes
new dot shapes, additional corner styles, richer gradients, smarter image handling, and ergonomics that let us generate thousands of branded QR codes every week in both Node.js backends and modern front-ends.
---
The result is a fork we actively maintain, document, and publish under the linkbreakers-qr-code-styling package name. If you want help building QR-driven experiences, talk with us.
---
bubbly-dots, classy, classy-rounded, extra-rounded, custom margins, enhanced corner squares/dots, and gradients everywhere.canvas, svg, or png output in workers or serverless jobs.unpkg, and plays nicely with React, Vue, Angular, Svelte, and plain JS widgets.See it in action at qr-code-styling.com — the same demo we use internally to prototype looks.
---
bash
npm install linkbreakers-qr-code-styling
or
pnpm add linkbreakers-qr-code-styling
or
yarn add linkbreakers-qr-code-styling
`Need a no-build setup? Load the latest build directly:
`html
`---
Quick start
$3
`html
`$3
`js
import QRCodeStyling from "linkbreakers-qr-code-styling";
import { writeFile } from "node:fs/promises";const qrCode = new QRCodeStyling({
width: 512,
height: 512,
type: "png",
data: JSON.stringify({ action: "invite", token: "abc123" }),
dotsOptions: { type: "circuit-chip", color: "#101828" },
backgroundOptions: { color: "transparent" }
});
const buffer = await qrCode.getRawData("png");
await writeFile("./invite.png", buffer);
`
This is the same API we call in background jobs to batch-generate QR codes for customer campaigns.---
Configuration overview
Every option supported upstream still works here, plus Linkbreakers-only enhancements that expose more shapes and gradients. Highlights:| Option group | What you can control |
| --- | --- |
|
width, height, type, margin, shape | Canvas size, file format (svg, png, canvas), margin handling, and experimental circle mode. |
| qrOptions | Access to the underlying qrcode-generator settings (error correction, mode, mask pattern, etc.). |
| dotsOptions, cornersSquareOptions, cornersDotOptions | Choose between square, rounded, extra-rounded, classy, classy-rounded, bubbly-dots, circuit-chip, dots, and gradient mixes. |
| backgroundOptions | Solid colors or gradients that sit behind the QR pixels.
| imageOptions | Control image size, margins, CORS settings, background cleanup, and blob embedding for SVG exports.src/core/options` for full TypeScript definitions or skim the original documentation for deeper descriptions—the APIs are compatible.---
If your organization needs similar infrastructure or wants custom features, reach out at linkbreakers.com. Sponsorships and commercial support help us keep this fork moving quickly.
---
Contributions are welcome! Open a PR with your idea, or start a discussion so we can align on the approach. ❤️