QRdx vs qr-code-styling

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

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