Quick start · Docs

Pick the path that matches your project. Each one gives you the full scanner UI: camera preview, viewfinder, highlights, torch and camera controls, and a success toast.

Note: Browsers only allow camera access in a secure context: https:// or http://localhost. Opening the file directly or using a LAN address like http://192.168.1.20 will fail with an insecure-context error. For local testing, run a static server such as npx serve . and open http://localhost:3000.

Script tag

No build step. The ESM bundle includes everything and registers the elements when it loads.

<!doctype html>
<html lang="en">
  <body>
    <qrgen-scanner symbologies="qr,ean13,code128" mode="single" style="height: 420px"></qrgen-scanner>
    <p id="result">Point the camera at a code</p>
    <script type="module">
      import "https://rockyljewell.github.io/QR-GEN/sdk/qrgen.js";
      document.querySelector("qrgen-scanner").addEventListener("scan", (event) => {
        document.querySelector("#result").textContent = event.detail.barcode.data;
      });
    </script>
  </body>
</html>

In single mode the scanner pauses after the first code and shows a Scan again button. Remove mode="single" to keep scanning continuously. See Script tag & CDN for the classic-script build and version notes.

npm and a web component

npm install qrgen-sdk

Note: Until the first npm release is published, install the latest build with npm install https://rockyljewell.github.io/QR-GEN/downloads/qrgen-sdk.tgz.

import "qrgen-sdk/elements";

const scanner = document.createElement("qrgen-scanner");
scanner.setAttribute("symbologies", "qr,ean13,code128");
scanner.style.height = "420px";
scanner.addEventListener("scan", (event) => {
  const { barcode } = event.detail;
  console.log(barcode.symbology, barcode.data);
});
document.body.append(scanner);

This works with any bundler (Vite, webpack, Parcel, esbuild). The element is framework-agnostic, so the same code runs in Angular, Svelte and plain HTML. Every attribute, property and event is listed in Web Components.

React

import { useState } from "react";
import { QRGenScanner } from "qrgen-sdk/react";

export function Scanner() {
  const [code, setCode] = useState("");
  return (
    <div>
      <QRGenScanner symbologies={["qr", "ean13"]} mode="single" style={{ height: 420 }} onScan={(_, barcode) => setCode(barcode.data)} />
      <p>{code || "Point the camera at a code"}</p>
    </div>
  );
}

Using Next.js? Put this component in a file that starts with "use client". See Next.js. For Vue, see Vue & Nuxt.

No camera? Scan an image

scanImage() decodes codes in a file, blob, image, canvas or URL, and returns every code it finds:

import { scanImage } from "qrgen-sdk";

document.querySelector("input[type=file]").addEventListener("change", async (event) => {
  const barcodes = await scanImage(event.target.files[0]);
  console.log(barcodes.map((b) => `${b.symbologyName}: ${b.data}`));
});

Next steps

Scan faster by limiting symbologies to the ones you need.
Turn scanned text into data with parseContent(): URLs, Wi-Fi credentials, contacts, product codes and GS1.
Scan many codes at once with batch scanning.
Match your brand with UI customization.
Using a coding agent? Install the Agent Skills so it knows the API.