QR Codes & Barcodes

Generation

• ★ qrcode (npm) — server + browser, SVG / PNG / data URL. The default.
• ★ qr-code-styling — branded QR codes with logos, custom dot styles, gradients.
• @qrcode-vue3/qrcode-vue3 — Vue3 wrapper.
• react-qr-code — minimal React component.
• JsBarcode — generate Code128, EAN, UPC, and other 1D barcodes.
• bwip-js — broadest barcode support (200+ symbologies); server + browser.

Scanning (camera)

• ★ html5-qrcode — drop-in scanner; fast, MIT.
• @zxing/browser — port of Google's ZXing; supports many barcode types.
• @yudiel/react-qr-scanner — modern React wrapper.
• react-qr-reader — long-running classic; less actively maintained.
• Quagga2 — JS barcode reader; good for 1D codes.
• iOS Safari BarcodeDetector API — built-in shape detection on supported browsers; fall back to a JS lib otherwise.

Use cases / patterns

• Login on TV / device — generate QR with one-time code; user scans on phone; backend matches.
• Magic-link QR — encode a one-time URL; user opens it on phone.
• Inventory / asset tags — Code128 barcodes via JsBarcode + a label printer.
• WiFi sharing — QR with WIFI:T:WPA;S:Name;P:Password;;.

Server-side image generation for QR-on-emails / PDFs

• qrcode + sharp to compose into a transactional email image.
• bwip-js to generate barcode SVGs in PDFs (with pdf-lib / react-pdf).

Pick this if…

• Default QR generation: qrcode (or qr-code-styling if you want logos / branding).
• Default scanner: html5-qrcode.
• Many barcode types: bwip-js (gen) and @zxing/browser (scan).