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.
Install from source
plugins/chrome on GitHub- 1
Build the extension
Terminalgit clone https://github.com/bucharitesh/qrdx.git cd qrdx && pnpm install pnpm --filter @qrdx/chrome-extension build - 2
Load it in Chrome
Open chrome://extensions, turn on Developer mode, click Load unpacked and select plugins/chrome/dist.
- 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.
Install from source
plugins/figma on GitHub- 1
Build the plugin
Terminalgit clone https://github.com/bucharitesh/qrdx.git cd qrdx && pnpm install pnpm --filter @qrdx/figma-plugin build - 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
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.
Install from source
plugins/raycast on GitHub- 1
Install it as a development extension
With Raycast installed, run this and Raycast imports the extension.
Terminalgit clone https://github.com/bucharitesh/qrdx.git cd qrdx/plugins/raycast npm install && npm run dev - 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.
Install from source
plugins/canva on GitHub- 1
Start the app
This serves the app at http://localhost:8080.
Terminalgit clone https://github.com/bucharitesh/qrdx.git cd qrdx && pnpm install pnpm --filter @qrdx/canva-plugin start - 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
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.