npm versionlicenseCI status

@ttsalpha/qrcode

Lightweight, fully customizable React QR code library.
Pure SVG · Zero dependencies · Built from scratch.

pnpm add @ttsalpha/qrcode
QR code: @ttsalpha/qrcodesquare
QR code: https://github.com/ttsalpha/qrcoderounded
QR code: @ttsalpha/qrcodecircle
Playground

Make your QR code

Type a link or text, pick a style, download the image. Free, no sign-up.

Features

What's included

Pure SVG
No canvas, no raster. Scales perfectly at any resolution — print or screen.
Zero dependencies
QR encoding built from scratch per ISO/IEC 18004. React is the only peer dep.
3 dot styles
Square, circle, and snake-connected rounded — mix freely with corner styles.
Customizable corners
Independent style and color for each finder pattern part (dot and square ring).
Logo support
Embed any image URL or React node in the center. Size auto-clamped per ECL to stay scannable.
Fully typed
Strict TypeScript throughout. Full IntelliSense on every prop.
Tree-shakeable
Named exports, ESM + CJS output. Minimal bundle impact.
Export helpers
toSVGString() generates SVG server-side without DOM. toDataURL() renders PNG/JPEG via Canvas.
Installation

Get started

Install

bash
pnpm add @ttsalpha/qrcode

Quick start

tsx
import { QRCode } from '@ttsalpha/qrcode';

export default function App() {
  return <QRCode value="https://example.com" />;
}

React 18+ is required as a peer dependency.

API Reference

Props, types and helpers

Full reference lives on its own page — props, corner and logo options, export helpers, and the HTTP API params.

QRCodeProps
Every prop on <QRCode> with types and defaults
Export Helpers
toSVGString and toDataURL for SVG, PNG, JPEG
HTTP API
Render a QR from a URL, no install needed
FAQ

Frequently asked questions

How is this different from other QR code libraries?

Most libs handle either SSR or styling — not both. qrcode.react is SSR-safe but has no styling API. qr-code-styling covers custom dots, colors, and logos but relies on Canvas and breaks server-side. This lib covers all of it: custom dot shapes, per-corner colors, logo support, pure SVG, SSR-safe. 4× faster cold start than qrcode.react, 38× faster styled renders than qr-code-styling. See the benchmark →

Does it work with Next.js and server-side rendering?

Yes. The library is pure SVG — no DOM, no Canvas. The QRCode component renders server-side in Next.js App Router and works on Edge runtimes. For SSR without React, use toSVGString().

Can I generate QR codes without React (Node.js, CLI, email templates)?

Yes. toSVGString() produces a static SVG string — no DOM or React required. toDataURL() is browser-only as it requires the Canvas API.

How do I add a logo to the center of a QR code?

Use the logo prop with src for an image URL, or element for any React node. Error correction level is auto-picked based on logo size to keep the code scannable.

How do I export a QR code as PNG or JPEG?

Call toDataURL() in the browser — it returns a data URL you can attach to a download link. Use the format option for JPEG.

Does it support custom colors and dark mode?

Yes. Use dotColor for data modules, backgroundColor (accepts "transparent"), and the corner prop to color finder patterns independently. Pair with your own dark-mode logic to switch colors at runtime.