Introduction

QRdx is a free, open-source QR code generator, React library and developer toolkit. Pick a section to get started.

QRdx is an open-source (AGPL-3.0) QR code generator you can use in several ways: design codes in the playground, render them in your own React app with the qrdx library, or generate them over HTTP and from AI assistants with the image API and MCP server. With an account you can also create dynamic codes whose destination you can change after printing.

Get started

Installation

Install the qrdx React library and render your first QR code.

Basic usage

Colors, patterns, logos, templates and error correction with the QRCode component.

Playground

Design a QR code visually and download it. No code or signup needed.

Features

Patterns

Shapes for the data modules, corner eyes and eye dots.

Colors & gradients

Solid colors, linear and radial gradients, and contrast checks.

Logos

Put a logo in the center without breaking scanning.

Templates

Pre-designed frame templates, or register your own.

Frames & print

Call-to-action frames, a scan score and print-ready PDF export.

Downloads

PNG, JPG, SVG and PDF export, clipboard and data URLs.

Dynamic QR

Dynamic QR codes

Change where a printed code points and see how often it is scanned. Needs a QRdx account.

Custom domains

Serve your short links from a domain you own (Pro).

Developers

QR code image API

Get a QR code image from a URL for READMEs, emails and HTML. No API key.

MCP server

Let Claude, Cursor, VS Code and other AI tools generate QR codes.

shadcn/ui registry

Add a QR code or QR scanner component with one command.

API reference

Every component, function and type exported by qrdx.

Utilities

Color, contrast, validation and feature detection helpers.

QR detection

Read and decode QR codes from images in the browser.

Self-hosting

Self-hosting guide

Run your own QRdx web app with Docker Compose or Node.js.

Quick example

import { QRCode } from 'qrdx';

export default function App() {
  return (
    <QRCode
      value="https://example.com"
      size={512}
      fgColor="#000000"
      bgColor="#ffffff"
    />
  );
}