QRdx vs qr-code-styling

qr-code-styling is the popular framework-agnostic library for styled QR codes. QRdx is a React-first alternative with a visual editor and templates.

QRdx vs qr-code-styling
at a glance

Pricing, design options and developer tooling side by side. Where qr-code-styling is ahead, the table says so.

Compare

npm · AGPL-3.0

npm · MIT

License

AGPL-3.0

MIT

Downloads (last 30 days)

About 3.3 million

Latest version

0.0.46

1.9.2

API style

React components

Framework-agnostic class

Dot (body) styles

Corner square / corner dot styles

9 / 11

7 / 7

Gradients

Linear + radial

Linear + radial, with rotation

Logo with hidden background dots

Download formats

PNG, JPG, SVG, PDF

PNG, JPEG, WebP, SVG

Node.js rendering

Not documented

Via node-canvas or jsdom

Frame templates

6 built in

Via extensions

Visual editor that exports code

Why choose QRdx over qr-code-styling?

The areas where QRdx is the stronger pick. The guide below also covers where qr-code-styling is the better choice.

React-native API

QRdx is a set of React components you render with props. qr-code-styling is a class you instantiate and append to a DOM node, so React apps usually wrap it in a ref and an effect.

More shape options

QRdx has 9 body patterns, 9 corner-eye shapes and 11 eye-dot shapes, including diamond, pacman, gear and star styles. qr-code-styling has 6 dot types and 7 types each for corner squares and corner dots.

Templates and PDF export

QRdx ships 6 frame templates and exports PDF as well as PNG, JPG and SVG. qr-code-styling exports PNG, JPEG, WebP and SVG, and adds borders through extensions.

Design visually, paste the code

Style a code in the QRdx playground and copy it as a ready-to-use QRCode component, so designers and developers work from the same settings.

QRdx or qr-code-styling: which should you use?

qr-code-styling is one of the most popular libraries for QR codes that are more than black squares. It is MIT licensed, works in plain JavaScript and any framework, runs on Node.js with node-canvas or jsdom, and had about 3.3 million npm downloads in the last 30 days. QRdx's qrdx package had 63 in the same period. QRdx covers similar ground, but is built around React components and a visual editor.

Who each library is for

qr-code-styling suits projects in any framework (or none), server-side image generation, and teams that need a permissive license. Its options cover dot types (rounded, dots, classy, classy-rounded, square, extra-rounded), corner square and corner dot types, gradients with rotation and color stops on dots, corners and background, a logo with hidden background dots, and downloads as PNG, JPEG, WebP or SVG.

QRdx suits React apps that want styled codes as declarative components, a wider set of shapes, built-in frame templates, PDF export, and a playground where non-developers can design the code.

Where qr-code-styling is the better choice

Licensing. MIT is permissive and easy to use in closed-source products. QRdx is AGPL-3.0, a strong copyleft license; check that it fits before you ship it.
Framework freedom. It works with Vue, Angular, vanilla JS and React alike. QRdx is React-first.
Server rendering to images. It documents Node.js rendering through node-canvas (raster) and jsdom (SVG).
Maturity and community. Its user base is orders of magnitude larger, and QRdx is still pre-1.0.
WebP output and a circular QR shape option.

Key differences

API: class plus append() and update() versus React components with props.
Shapes: QRdx offers more body and eye-dot styles; qr-code-styling offers gradient rotation and a circle shape.
Export: QRdx adds PDF; qr-code-styling adds WebP.

Switching from qr-code-styling

Install with npm install qrdx.
Replace the instance and its append() call with the QRCode component, passing your data as value.
Map dotsOptions.type to bodyPattern, cornersSquareOptions.type to cornerEyePattern and cornersDotOptions.type to cornerEyeDotPattern. Names differ, so pick the closest look in the playground.
Move gradients to fgColor, eyeColor and dotColor, check the docs, and test scanning on real phones.