@ttsalpha/qrcode | QR Code Generator
@ttsalpha/qrcode<br>Lightweight, fully customizable React QR code library.<br>Pure SVG · Zero dependencies · Built from scratch.<br>pnpm add @ttsalpha/qrcode<br>QR code: @ttsalpha/qrcodesquare<br>QR code: https://github.com/ttsalpha/qrcoderounded<br>QR code: @ttsalpha/qrcodecircle
PlaygroundMake your QR code<br>Type a link or text, pick a style, download the image. Free, no sign-up.
FeaturesWhat's included
Pure SVG<br>No canvas, no raster. Scales perfectly at any resolution — print or screen.
Zero dependencies<br>QR encoding built from scratch per ISO/IEC 18004. React is the only peer dep.
3 dot styles<br>Square, circle, and snake-connected rounded — mix freely with corner styles.
Customizable corners<br>Independent style and color for each finder pattern part (dot and square ring).
Logo support<br>Embed any image URL or React node in the center. Size auto-clamped per ECL to stay scannable.
Fully typed<br>Strict TypeScript throughout. Full IntelliSense on every prop.
Tree-shakeable<br>Named exports, ESM + CJS output. Minimal bundle impact.
Export helpers<br>toSVGString() generates SVG server-side without DOM. toDataURL() renders PNG/JPEG via Canvas.
InstallationGet started
Install<br>bash<br>pnpm add @ttsalpha/qrcode
Quick start<br>tsx<br>import { QRCode } from '@ttsalpha/qrcode';
export default function App() {<br>return QRCode value="https://example.com" />;
React 18+ is required as a peer dependency.
API ReferenceProps, types and helpers<br>Full reference lives on its own page — props, corner and logo options, export helpers, and the HTTP API params.
QRCodeProps<br>Every prop on with types and defaults<br>Export Helpers<br>toSVGString and toDataURL for SVG, PNG, JPEG<br>HTTP API<br>Render a QR from a URL, no install needed
FAQFrequently 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 →<br>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().<br>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.<br>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.<br>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.<br>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.
© 2026 Son Tran · MIT License