beautiful-qr-code

Beautiful, customizable QR code generator with support for rounded corners, custom colors, and logos

Features

• 🎨 Beautiful by default - Rounded corners and smooth edges for modern designs
• 🖼️ Logo embedding - Add custom logos with automatic center space clearing
• 🎨 Full customization - Colors, padding, corner radius, and more
• 📦 SVG + Canvas - Dual rendering modes for any use case
• ⚡ Lightweight - Under 15KB minified, zero dependencies
• 🔒 Type-safe - Written in TypeScript with full type definitions
• 🌐 Universal - Works in browsers and Node.js environments

Installation

npm install beautiful-qr-code

pnpm add beautiful-qr-code

yarn add beautiful-qr-code

Quick Start

import { QRCodeStyling } from "beautiful-qr-code";

const qrCode = new QRCodeStyling({
  data: "https://github.com/mblode/beautiful-qr-code",
  foregroundColor: "#1a73e8",
  backgroundColor: "#ffffff",
  radius: 1,
  logoUrl: "https://example.com/logo.png",
});

// Append to DOM
await qrCode.append(document.getElementById("qr-container"));

// Or download directly
await qrCode.download({ name: "qr-code", extension: "png" });

API

Configuration Options

new QRCodeStyling(config: QRCodeConfig)

| Option | Type | Default | Description | | ----------------- | ------------------- | --------------- | ------------------------------ | | data | string | Required | Data to encode in the QR code | | type | "svg" \| "canvas" | "svg" | Rendering mode | | foregroundColor | string | "#000" | QR code color | | backgroundColor | string | "transparent" | Background color | | radius | number | 1 | Corner radius (0-1, 0 = sharp) | | padding | number | 1 | Padding in modules | | logoUrl | string | undefined | Logo image URL | | hasLogo | boolean | false | Clear center space for logo |

Methods

append(container: HTMLElement)

Append QR code to DOM element.

await qrCode.append(document.getElementById("qr-container"));

download(options?)

Download as PNG or SVG.

await qrCode.download({
  name: "my-qr-code",
  extension: "png" // or "svg"
});

update(config)

Update configuration dynamically.

qrCode.update({
  foregroundColor: "#ff0000",
  radius: 0.5,
});

getSVG()

Get SVG string.

const svg = await qrCode.getSVG();

getCanvas()

Get Canvas element.

const canvas = await qrCode.getCanvas();

Examples

Custom Colors

const qrCode = new QRCodeStyling({
  data: "https://example.com",
  foregroundColor: "#1a73e8",
  backgroundColor: "#f0f8ff",
});

Rounded Corners

const qrCode = new QRCodeStyling({
  data: "https://example.com",
  radius: 1, // 0 = sharp, 1 = fully rounded
});

With Logo

const qrCode = new QRCodeStyling({
  data: "https://example.com",
  logoUrl: "https://example.com/logo.png",
  hasLogo: true,
});

Canvas Mode

const qrCode = new QRCodeStyling({
  data: "https://example.com",
  type: "canvas",
});

Ecosystem

• @beautiful-qr-code/react - React component with hooks
• @beautiful-qr-code/cli - Generate QR codes from the terminal

License

MIT © Matthew Blode