QRdx

QR codes inside the apps you already use

Make a code for the page you're on in Chrome, insert vector codes into a Figma design, generate one from the Raycast launcher, or add one to a Canva design. All four are free and open source, and none needs a QRdx account.

Free · No account · Open source (AGPL-3.0)

Browser extension

Chrome extension

A styled QR code for the current tab, any link, image or selected text, one click away in Chrome.

  • Current tab or anything you right-click

    Links, images and selected text from the context menu.

  • 12 style presets

    The playground's styles, with your own colors and 256–2048 px exports.

  • PNG, SVG or clipboard

    Download either format, copy the image, or open it in QRdx.

  • Private by design

    Only activeTab, contextMenus and storage permissions; runs entirely in the browser.

Runs on

  • Chrome 120+
  • Windows
  • macOS
  • Linux
  • ChromeOS

Not in the Chrome Web Store yet.

Mockup of the QRdx Chrome extension: its popup, opened from the toolbar, shows a QR code for the current tab with style presets, colors, export size and Download PNG, Download SVG and Copy image buttons.

Install from source

plugins/chrome on GitHub
  1. 1

    Build the extension

    Terminal
    git clone https://github.com/bucharitesh/qrdx.git
    cd qrdx && pnpm install
    pnpm --filter @qrdx/chrome-extension build
  2. 2

    Load it in Chrome

    Open chrome://extensions, turn on Developer mode, click Load unpacked and select plugins/chrome/dist.

  3. 3

    Pin QRdx

    Pin it from the puzzle-piece menu, then click its icon on any page.

Figma plugin

Figma plugin

Insert styled QR codes into Figma as editable vector layers, and update them in place.

  • Vector layers

    Codes are editable vectors that stay sharp at any size.

  • Replace in place

    Swap a selected code and keep its size, position, rotation and constraints.

  • Edit later

    Each code remembers its content and style behind an Edit QR code button.

  • Offline

    No network access: nothing leaves Figma.

Runs on

  • Figma Design
  • Desktop app for macOS and Windows

Not in the Figma Community yet.

Mockup of the QRdx Figma plugin: a QR code inserted as vector layers on a menu design is selected, the plugin window offers Replace selected QR and Insert new, and the right panel shows the Edit QR code button.

Install from source

plugins/figma on GitHub
  1. 1

    Build the plugin

    Terminal
    git clone https://github.com/bucharitesh/qrdx.git
    cd qrdx && pnpm install
    pnpm --filter @qrdx/figma-plugin build
  2. 2

    Import it in the Figma desktop app

    Open a design file, then Plugins → Development → Import plugin from manifest… and select plugins/figma/manifest.json.

  3. 3

    Run it

    Plugins → Development → QRdx.

Raycast extension

Raycast extension

Generate, save and export customized QR codes from Raycast, or describe one to Raycast AI.

  • Generate QR

    Body patterns, corner styles, colors, templates and logos.

  • Saved QR codes

    Browse, preview, edit and export saved configurations.

  • Generate with AI

    Describe the code in plain English and Raycast AI sets it up.

Runs on

  • Raycast for macOS
  • Raycast AI

Not in the Raycast Store yet.

Mockup of the QRdx Raycast extension: the Generate QR command shows the code with its settings, with Copy PNG to Clipboard as the main action and more under Actions.

Install from source

plugins/raycast on GitHub
  1. 1

    Install it as a development extension

    With Raycast installed, run this and Raycast imports the extension.

    Terminal
    git clone https://github.com/bucharitesh/qrdx.git
    cd qrdx/plugins/raycast
    npm install && npm run dev
  2. 2

    Open it from Raycast

    Search for Generate QR, Saved QR Codes or Generate QR with AI.

Canva app

Canva app

Style a QR code in a Canva side panel and add it to your design in one click.

  • Live preview

    The code redraws as you change its content or style.

  • Templates and patterns

    Frame templates and body, eye and eye-dot shapes, each shown as a thumbnail.

  • Canva colors

    Foreground, background, eye and dot colors from Canva's color picker.

  • Add to Design

    A 1024 px PNG with alt text, placed on your page.

Runs on

  • Canva editor
  • Web and desktop app

Not in the Canva Apps Marketplace yet.

Mockup of the QRdx Canva app: in the editor's side panel, a URL field, a live preview, template and dot pattern pickers, colors and an Add to Design button, next to a poster with the code placed on it.

Install from source

plugins/canva on GitHub
  1. 1

    Start the app

    This serves the app at http://localhost:8080.

    Terminal
    git clone https://github.com/bucharitesh/qrdx.git
    cd qrdx && pnpm install
    pnpm --filter @qrdx/canva-plugin start
  2. 2

    Create an app in the Canva Developer Portal

    At canva.com/developers/apps, create an app and set its Development URL to http://localhost:8080.

  3. 3

    Preview it

    Click Preview: the Canva editor opens with QRdx in the side panel.

More ways to use QRdx

Not the app you work in?

Ask an AI assistant, connect the tools your team uses, or build on the API. Missing a plugin? Request one.

Prefer code? The qrdx React library that powers every plugin is on npm.

Plugins FAQ

Why install from source?

None of the four is in its store yet. Until then, each one builds from the open-source QRdx repository in a few commands; the steps are on this page and in each plugin's folder on GitHub.

Do I need a QRdx account?

No. The plugins are free and work without an account. Open in QRdx in the Chrome extension opens the full editor at qrdx.dev, where you can sign in for dynamic codes you can edit after printing.

Do the plugins send my data anywhere?

The Chrome extension and the Figma plugin make no network requests: codes are drawn on your device by the qrdx library. The Raycast extension keeps saved codes in Raycast's local storage, and Generate QR with AI sends your description to Raycast AI. The Canva app draws the code in its panel and adds it to your design as an image.

Can I change a code after adding it?

In Figma, select it and click Edit QR code, or use Replace selected QR to keep its size and position. In Raycast, saved codes can be edited and exported again. In Chrome and Canva, make a new code; for printed codes whose link you want to change later, use a dynamic code from the QRdx dashboard.

Make your next QR code in seconds.

Free forever. No signup, no watermark.

Start Creating QR Codes for Free