QR Code in JavaScript: Generate, Decode, and Use in Web Apps

Learn to generate and decode QR codes with JavaScript in the browser and on the server. Practical examples cover libraries, images, webcams, and accessibility.

JavaScripting Team

March 13, 2026·5 min read

DOM Frontend HTML AJAX JavaScript Libraries

QR in JS - JavaScripting — Photo by geraltvia Pixabay

Quick AnswerFact

QR codes in JavaScript can be generated and decoded directly in the browser or on the server. Use lightweight libraries like QRCode.js or node-qrcode to encode strings, URLs, and payloads, then decode with a compatible reader. This guide covers browser-based generation, webcam scanning, and simple decoding workflows using standard JavaScript APIs.

Quick Setup for QR Code in JavaScript

QR codes are compact two-dimensional barcodes that encode data into a grid of black and white modules. In modern web apps you can build a complete QR workflow with JavaScript by combining generation, decoding, and UI. The browser APIs (Canvas, WebRTC, ImageData) let you render codes and read them from images or video without leaving the page. This section gives you a practical mental model and a starting point you can adapt to your project. Remember to keep payloads small for quick rendering and reliable scanning across devices. As you follow along, you’ll see how the QR ecosystem around JavaScript has matured to support client-side generation, server-side fallbacks, and accessible UX.

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>QR in JS</title>
  </head>
  <body>
    <div id="qrcode"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
      // Basic data that will be encoded
      const data = "https://example.com/signup?ref=new";
      // Render a QR code into the #qrcode container
      new QRCode(document.getElementById("qrcode"), {
        text: data,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff"
      });
    </script>
  </body>
</html>

What this demonstrates: you can embed a meaningful payload (URL, text, or structured data) and render a scalable QR in the browser with no server round trips. This pattern keeps UX snappy and makes it easy to generate codes for user flows such as invites, tickets, or account linking.

wordCountToInt as of analysis: 0

Steps

Estimated time: 1.5–2 hours

1
Choose generation approach
Decide if you’ll generate QR codes client-side for fast UX or server-side for data-heavy payloads. For most front-end apps, client-side generation with a lightweight library offers the best balance of speed and simplicity.
Tip: Prefer client-side generation for instant previews and offline capabilities.
2
Include a QR library
Add a small, well-supported library such as QRCode.js for browser rendering or a Node package for server-side generation. Keep the dependency minimal to reduce bundle size and maintenance overhead.
Tip: Check library license and last publish date before adopting.
3
Render the code
Create a simple function that initializes the QR code in a container with given data and dimensions. Make the API stable so you can reuse it across pages.
Tip: Abstract the renderer behind a small utility to keep code clean.
4
Implement decoding
Add decoding support using a library like jsQR to scan from a video stream or image. Extract the data and validate it on the client or server.
Tip: Handle errors gracefully if a frame doesn’t contain a QR code.
5
Test across devices
Test on multiple devices and browsers to ensure the code renders correctly and can be scanned reliably across different cameras and lighting.
Tip: Verify high-contrast color schemes for accessibility.
6
Publish and monitor
Deploy to your hosting or CDN and monitor scanning success, fallback behavior, and any user feedback to refine payload sizes and error correction levels.
Tip: Use analytics events to track QR code generation and scanning flow.

Pro Tip: Choose a library with a permissive license and a small footprint to minimize bloat.

Warning: Never embed highly sensitive data in a QR code intended for public scanning; use tokens with limited lifetimes and server-side validation.

Note: If you support offline scenarios, consider generating codes that encode safe, short payloads and provide a fallback URL.

Prerequisites

Required

JavaScript knowledge (ES6+)
Required
Node.js 14+ (for server-side examples)↗
Required
A modern browser with Canvas and Web APIs
Required

Optional

Code editor (e.g., VS Code)↗
Optional
Access to CDN or npm registry for libraries
Optional

Keyboard Shortcuts

Action	Shortcut
CopyCopy selected text or code from the page	`Ctrl`+`C`
PastePaste into your editor or input field	`Ctrl`+`V`
FindSearch within the current page	`Ctrl`+`F`
Format documentFormat code in your editor	`Ctrl`+`⇧`+`F`
Comment selectionComment a selected block in many editors	`Ctrl`+`K Ctrl`+`C`

Questions & Answers

What is a QR code and why use it with JavaScript?

A QR code is a compact two-dimensional barcode that encodes data. In JavaScript, you can generate and decode QR codes in the browser or on the server to enable quick sharing of links, credentials, or payloads directly in your web apps.

Which libraries are recommended for client-side QR code generation?

For browser-based generation, popular choices include QRCode.js and similar lightweight libraries. They render scalable QR matrices into DOM elements and support simple configuration like size, color, and error correction level.

Can I decode QR codes from a webcam using JavaScript?

Yes. You can capture video frames via getUserMedia, draw frames to a canvas, then pass the pixel data to a decoding library such as jsQR. If a code is detected, you can extract the embedded data and respond in your UI.

Is server-side QR generation necessary?

Server-side generation is optional but useful when payloads are large or when you want to centralize QR generation for security or branding. Node.js libraries can produce data URLs or image files for embedding.

What should I watch for in terms of accessibility?

Provide descriptive alt text and ARIA attributes for QR canvases or containers so screen readers can announce the purpose. Ensure high contrast and responsive sizing for users on different devices.

What common errors should I anticipate?

Common issues include incorrect payload encoding, large payloads that produce dense QR matrices, and failing to load libraries due to network issues. Always validate the scanned data on the server and handle parsing errors gracefully.