How to Build a JavaScript QR Code Generator (with Code Examples)

QR codes are everywhere: marketing campaigns, Wi‑Fi sharing, event tickets, product labels, and more. As a developer, adding a QR code generator to your JavaScript, React, or Next.js project can make it much easier for users to share links, connect to networks, and scan information with their phones.

In this guide you will build a JavaScript QR code generator step by step using the qrcode-generator library. You will see how the core API works in plain JavaScript, how to wrap it in a reusable React component, and how to integrate it into a Next.js app.

There are many QR code libraries in the JavaScript ecosystem, but qrcode-generator is a popular choice because it is lightweight, has no external dependencies, and supports multiple error correction levels and output formats. It can generate QR codes as SVG, canvas, or even textual representations.

At a high level the QR code generation flow is straightforward: you provide some input data (a URL, Wi‑Fi credentials, contact information, or arbitrary text), choose error correction and size, and let the library render the QR code. The main value comes from wrapping this flow in a predictable API and UI.

To get started in a simple browser environment you can load qrcode-generator from a CDN or install it with npm. A CDN script tag works well for quick prototypes and static pages:

<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/dist/qrcode.min.js"></script>

In modern build setups (such as bundlers and Next.js) you would typically install it via npm or pnpm:

npm install qrcode-generator

Once the library is available you can write a small helper that turns a string into an SVG QR code tag. The core idea is always the same: create a QR instance, add data, call make(), and then choose an output method.

function generateQrSvg(text, typeNumber = 0, errorCorrection = 'M') {
  // typeNumber: 0 lets the library pick the minimum version that fits the data
  const qr = qrcode(typeNumber, errorCorrection);
  qr.addData(text);
  qr.make();

  // Scalable SVG output that can be styled with CSS
  return qr.createSvgTag({ scalable: true });
}

// Example usage in the browser
const container = document.getElementById('qr-code-container');
container.innerHTML = generateQrSvg('https://jsgenerator.com');

Your HTML only needs a simple container element where the QR code will be injected:

<div id="qr-code-container"></div>

With these few lines you already have a working JavaScript QR code generator. Users can type a URL or piece of text into an input, and you can call generateQrSvg() and update the DOM whenever the input changes.

In a React app it often makes sense to wrap this logic in a dedicated component. That way you can control the QR code via props and re-render automatically when the input changes.

import { useEffect, useRef } from 'react';
import qrcode from 'qrcode-generator';

export function QRCodeGenerator({ value, size = 200, errorCorrection = 'M' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!value || !containerRef.current) {
      return;
    }

    const qr = qrcode(0, errorCorrection);
    qr.addData(value);
    qr.make();

    containerRef.current.innerHTML = qr.createSvgTag({ scalable: true });

    const svgElement = containerRef.current.querySelector('svg');
    if (svgElement) {
      svgElement.setAttribute('width', String(size));
      svgElement.setAttribute('height', String(size));
    }
  }, [value, size, errorCorrection]);

  return <div ref={containerRef} />;
}

You can then use this component anywhere in your React UI. A simple form that lets users type a URL and immediately see the QR code might look like this:

import { useState } from 'react';
import { QRCodeGenerator } from './QRCodeGenerator';

export function QrGeneratorExample() {
  const [input, setInput] = useState('https://jsgenerator.com');

  return (
    <div>
      <label htmlFor="qr-input">QR code content</label>
      <input
        id="qr-input"
        type="text"
        value={input}
        onChange={(event) => setInput(event.target.value)}
      />
      <QRCodeGenerator value={input} size={240} errorCorrection="M" />
    </div>
  );
}

In Next.js you can choose between client components (similar to the React example above) and server components that render QR codes on the server. Server-side rendering is useful when you want to embed QR codes into statically generated pages, e.g. download tickets or invoice PDFs.

One simple approach is to create a small server component that calls qrcode-generator during rendering and returns the raw SVG string using dangerouslySetInnerHTML:

// app/components/ServerRenderedQrCode.tsx
import qrcode from 'qrcode-generator';

interface ServerRenderedQrCodeProps {
  value: string;
  size?: number;
}

export function ServerRenderedQrCode({ value, size = 200 }: ServerRenderedQrCodeProps) {
  const qr = qrcode(0, 'M');
  qr.addData(value);
  qr.make();

  const svgTag = qr.createSvgTag({ scalable: true });
  const sizedSvgTag = svgTag.replace('<svg', `<svg width=\"${size}\" height=\"${size}\"`);

  return (
    <div
      aria-label="QR code"
      dangerouslySetInnerHTML={{ __html: sizedSvgTag }}
    />
  );
}

You can then use this component directly in a Next.js route segment or page, for example to render a QR code that points back to the current page, a payment URL, or a deep link into your app.

In production apps you will often go beyond plain text and URLs. For example, Wi‑Fi QR codes follow a specific format that includes the SSID, password, and security type; contact cards can use vCard or MeCard formats. You can write small helper functions that take structured data and output the correctly formatted string before passing it into your QR code generator.

While building your own generator is a great way to understand how QR codes work, there is still a lot of polish involved in shipping a full tool: handling long texts, choosing the right error correction level, letting users download PNGs, styling the SVG, and providing ready-to-use code examples for different frameworks.

If you want to skip that boilerplate and focus on your core product, you can use the QR Code Generator tool on jsgenerator.com at https://jsgenerator.com/tools/qr-code-generator. It wraps qrcode-generator behind a clean UI, supports common use cases like Wi‑Fi and contact cards, and shows copy-paste JavaScript, React, and Node.js snippets that you can drop straight into your own project.