Best QR Code Libraries for JavaScript in 2024

QR Code Libraries for JavaScript

Whether you need to generate or scan QR codes, here are the best libraries available.

Generation Libraries

#### qrcode (node-qrcode)

The most popular QR code generator for Node.js and browsers.

npm install qrcode

import QRCode from 'qrcode';
// Generate as data URL
const dataUrl = await QRCode.toDataURL('Hello World');
// Generate to canvas
await QRCode.toCanvas(canvas, 'Hello World');
// Generate as SVG
const svg = await QRCode.toString('Hello World', { type: 'svg' });
// With options
await QRCode.toDataURL('Hello', {
  errorCorrectionLevel: 'H',
  width: 300,
  margin: 2,
  color: {
    dark: '#000000',
    light: '#ffffff'
  }
});

#### qrcode-generator

Lightweight, no dependencies.

import qrcode from 'qrcode-generator';
const qr = qrcode(0, 'M');
qr.addData('Hello World');
qr.make();
// As HTML img tag
const imgTag = qr.createImgTag();
// As SVG
const svg = qr.createSvgTag();

Scanning Libraries

#### html5-qrcode

Full-featured scanner with camera support.

npm install html5-qrcode

import { Html5QrcodeScanner } from 'html5-qrcode';
const scanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 }
});
scanner.render(
  (decodedText) => {
    console.log('Scanned:', decodedText);
  },
  (error) => {
    console.warn('Scan error:', error);
  }
);

React Libraries

#### react-qr-code

Simple React component for QR generation.

import QRCode from 'react-qr-code';
<QRCode 
  value="https://example.com"
  size={256}
  level="H"
/>

Comparison Table