TypeScript QR Code Generator: qrcode.js and qrcode-generator

TypeScript QR Code Generator: qrcode.js and qrcode-generator

QR codes have become an integral part of the modern web: from links to websites and Wi-Fi passwords to contact information and payment details. In the TypeScript ecosystem, there are several mature libraries that allow generating QR codes both on the client side (browser) and on the server (Node.js). In this article, we will take a detailed look at the two most popular ones: qrcode (qrcode.js) and qrcode-generator, and also show how to integrate them into a TypeScript project.

1. qrcode (qrcode.js) — Universal Library

The qrcode library (npm package: qrcode) is the de facto standard for generating QR codes. It supports outputting the result as canvas, SVG, Data URI string, or plain text. Thanks to TypeScript typing (built-in types or @types/qrcode), development becomes safe and convenient.

Installation

npm install qrcodenpm install --save-dev @types/qrcode  # for TypeScript

Basic Example: Generating a QR Code to canvas (Browser)

import QRCode from 'qrcode';

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {  if (error) console.error('Generation error:', error);  else console.log('QR code created!');});

Generating to SVG (for Server-Side Rendering)

import QRCode from 'qrcode';

const svgString = await QRCode.toString('https://pythonlib.ru', {  type: 'svg',  color: { dark: '#1a1a2e', light: '#eaeaea' }});console.log(svgString); // Ready SVG code

Configuration Options

• width — width of the QR code in pixels (default 256).
• margin — margin from the edge (in modules, default 4).
• color.dark / color.light — colors of modules and background.
• errorCorrectionLevel — error correction level: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
• type — output format: 'png', 'svg', 'utf8'.

2. qrcode-generator — Lightweight Alternative

The qrcode-generator library (npm package: qrcode-generator) offers a minimalistic API and requires no dependencies. It is ideal if you just need to get a QR code matrix or generate it in a custom format.

Installation

npm install qrcode-generator

Example: Creating and Drawing on canvas

import QRCode from 'qrcode-generator';

const qr = QRCode(0, 'M'); // type (0 = auto) and correction levelqr.addData('https://pythonlib.ru');qr.make();

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;const ctx = canvas.getContext('2d')!;const size = qr.getModuleCount();const cellSize = 10;canvas.width = size * cellSize;canvas.height = size * cellSize;

for (let row = 0; row < size; row++) {  for (let col = 0; col < size; col++) {    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);  }}

Getting a Text Representation (for Debugging)

const qr = QRCode(0, 'M');qr.addData('Hello TypeScript!');qr.make();console.log(qr.createASCII()); // Outputs QR code to console as characters

3. Library Comparison

Also in library

Warp for Rust: Complete Guide with Examples Data Validation in C# (.NET): Libraries and Approaches Sending SMS in PHP: Overview of API Libraries for Integration Nodemailer Hangfire for C# (.NET): Complete Guide with Examples

Recommendations

PDF Generation in Java with iText

PDF Generation in Rust: Library Overview and Code Examples

Testing in Kotlin: Frameworks and Tools for Quality Code

SceneKit for Swift: Complete Guide with Examples