Generate QR Codes in JavaScript

QR code libraries handle matrix construction, masking, and error correction for you. Your application still needs to choose suitable error correction, margin, image size, and payload encoding.

Quick Start#

The following example uses the standard JavaScript API or a widely used package for this task.

Using qrcode#

1// npm install qrcode2import QRCode from "qrcode";34const dataUrl = await QRCode.toDataURL("https://toolporta.com", {5  errorCorrectionLevel: "M",6  margin: ,7  width: ,8});910console.log(dataUrl);

Common Operations#

This second pattern covers a common production operation or a safer way to handle real input.

Write a PNG in Node.js#

1await QRCode.toFile("toolporta.png", "https://toolporta.com", {2  errorCorrectionLevel: "M",3  margin: ,4  width: ,5});

Important Notes#

Keep a quiet margin and strong foreground/background contrast. If you add a logo, raise error correction and keep the logo footprint conservative.

Best Practices#

1. Treat external input as untrusted and handle parse/validation errors explicitly.
2. Keep encoding, units, formats, and library-specific mapping rules explicit at system boundaries.
3. Add test vectors that cover empty input, Unicode text, malformed input, and representative production data.

References#

• ISO/IEC 18004 overview
• MDN JavaScript