QR code implementation guide

JavaScript QR Code Generator

Use this page to build or refine a JavaScript QR code generator for URLs, WiFi credentials, contact cards, and plain text. It focuses on practical code examples and the configuration choices that matter most.

View code examplesOpen the logo QR tool

Common QR code payloads

Most JavaScript QR generators are really doing one job: formatting the input correctly, then passing it to a QR library.

URL QR codes

The simplest case. Encode a landing page, download link, event URL, or app deep link.

WiFi QR codes

Format the SSID, password, and security type correctly so phones can join the network directly from the code.

vCard and contact QR codes

Use vCard or MeCard payloads when you want scanners to save a contact instead of opening a URL.

Configuration checklist

Input planning

  • Choose the payload type first: URL, text, WiFi, phone, email, or contact card.
  • Keep the content as short as possible when scannability matters.
  • Validate user input before sending it into the QR library.

Output planning

  • Pick SVG for responsive display and canvas/PNG for image export workflows.
  • Choose the error correction level based on logo overlays or print damage tolerance.
  • Test dark/light color combinations with at least one iOS and one Android scanner.

Code examples

These snippets cover the three most common implementation paths: browser scripts, React components, and Node.js rendering.

Browser example with qrcode-generator

import QRCode from "qrcode-generator";

function renderQrCode(value) {
  const qr = QRCode(0, "M");
  qr.addData(value);
  qr.make();

  return qr.createSvgTag({ scalable: true });
}

document.getElementById("preview").innerHTML = renderQrCode("https://jsgenerator.com");

React component example

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

export function QrPreview({ value }) {
  const ref = useRef(null);

  useEffect(() => {
    const qr = QRCode(0, "M");
    qr.addData(value);
    qr.make();

    if (ref.current) {
      ref.current.innerHTML = qr.createSvgTag({ scalable: true });
    }
  }, [value]);

  return <div ref={ref} aria-label="QR code preview" />;
}

WiFi payload formatter

function buildWifiPayload({ ssid, password, security = "WPA" }) {
  return "WIFI:T:" + security + ";S:" + ssid + ";P:" + password + ";;";
}

const wifiPayload = buildWifiPayload({
  ssid: "OfficeNetwork",
  password: "StrongPassword123",
  security: "WPA",
});

Use SVG for UI

SVG stays crisp at different sizes and fits well into React or Next.js components without extra image processing.

Use PNG for download

If users need a file, render the QR into canvas and export a PNG after they confirm the final payload and size.

Test real scanners

Always verify the final code with real devices because color, density, and logo overlays can break otherwise valid QR payloads.

Frequently asked questions

How do I generate a QR code in JavaScript?

Choose a QR library, format the content you want to encode, then render the result as SVG, canvas, or PNG in the browser or on the server.

Can I generate WiFi QR codes in JavaScript?

Yes. Format the payload with the correct WiFi schema, then feed that string into the same QR code generator you use for URLs or plain text.

Can I use this in React or Next.js?

Yes. A common approach is to generate the QR inside an effect when the input changes, then inject the SVG into a container or render it through a QR component wrapper.

Need to generate a QR code with a logo?

Use the dedicated with-logo tool when you need brand overlays, high correction defaults, and a ready-to-download PNG. Keep this page for the plain generator workflow and implementation notes.

Open the with-logo tool