QR Code Generator in TypeScript: qrcode Library

QR Code Generator in TypeScript: qrcode Library and Its Usage

QR codes have become an integral part of the modern web and mobile applications. They are used for quickly sharing links, contact information, text, Wi-Fi passwords, and much more. In the TypeScript and JavaScript ecosystem, there is a powerful and easy-to-use library called qrcode that allows you to generate QR codes directly in the browser or on the server (Node.js). In this article, we will thoroughly cover how to install, configure, and use this library to create QR codes in TypeScript.

What is the qrcode library?

The qrcode library is a popular npm package written in JavaScript and fully compatible with TypeScript. It allows you to generate QR codes in various formats: as a data string, as SVG, as Canvas (for the browser), or as a PNG image (for Node.js). Key advantages:

Support for all QR code versions (1 to 40).
Configurable error correction (L, M, Q, H).
Works both in the browser and in the Node.js environment.
Full TypeScript support — types are included in the package.
Simple and intuitive API.

Installation

To get started, install the package via npm or yarn:

npm install qrcode

yarn add qrcode

If you are using TypeScript, no additional types are required — they are already built into the package.

Basic example: generating a QR code as a string

The simplest way to get a QR code is to generate it as a string with data (e.g., a URL). For this, the toString method is used:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

In this example, the QR code is output to the console as ASCII art. This is convenient for debugging or demonstration.

Generating a QR code as SVG (for the web)

To embed a QR code on a web page, the SVG format is best — it scales without loss of quality and is easily stylable via CSS.

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // Insert svgString into the DOM, e.g., via innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

You can also use promises instead of callbacks:

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

Generating a QR code as Canvas (for the browser)

If you need to embed a QR code into a canvas element (e.g., for further processing or downloading), use the toCanvas method:

import QRCode from 'qrcode';

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

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('QR code successfully rendered on canvas');});

The width parameter sets the canvas width (the height is calculated automatically).

Generating a QR code as PNG (for Node.js)

For server-side generation (e.g., to save the image to disk), use toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('QR code saved as qrcode.png');});

You can also set the color of the modules and background, size, and error correction level.