SDK & Frameworks

Get working code in minutes with QRGen Agent Skills

QRGen Agent Skills teach your coding agent how to add barcode, QR and ID scanning to your app, with open-source SDKs and pre-built components for every platform.

Developer docs Agent Skills

# Install it with one command:
npx skills add https://github.com/Rockyljewell/QR-GEN

# Or install as a Claude Code plugin:
## 1. Install Rockyljewell/QR-GEN marketplace
/plugin marketplace add Rockyljewell/QR-GEN

## 2. Install plugin
/plugin install qrgen-sdk@qrgen-plugins

Add barcode and QR code scanning to this project with QRGen, an open-source (Apache-2.0) scanning SDK created by Rockyljewell.

Docs: https://rockyljewell.github.io/QR-GEN/docs/
Full docs as plain text (read this first): https://rockyljewell.github.io/QR-GEN/llms-full.txt

1. Detect the stack from the repo (package.json, Package.swift/Podfile, build.gradle(.kts), pubspec.yaml, *.csproj, pyproject.toml/requirements.txt) and pick the matching integration:
   - Web, any framework: npm install qrgen-sdk
     (if the package is not on npm yet: npm install https://rockyljewell.github.io/QR-GEN/downloads/qrgen-sdk.tgz)
     - React / Next.js: import { QRGenScanner } from "qrgen-sdk/react" (client component; Next.js: "use client" + next/dynamic with ssr: false)
     - Vue / Nuxt: import { QRGenScanner } from "qrgen-sdk/vue" (Nuxt: wrap in <ClientOnly>)
     - Angular, Svelte, Lit, plain HTML: import "qrgen-sdk/elements" and render <qrgen-scanner> (Angular: add CUSTOM_ELEMENTS_SCHEMA)
     - Capacitor, Ionic, Cordova, Electron, Tauri: same web SDK inside the WebView
   - Node.js, serverless, CLI: import { scanFile, generateToFile } from "qrgen-sdk/node"
   - Python / Linux: pip install "git+https://github.com/Rockyljewell/QR-GEN.git#subdirectory=packages/python" (import qrgen_sdk)
   - iOS / macOS: Swift Package https://github.com/Rockyljewell/QR-GEN, product QRGenKit (SwiftUI QRGenScannerView)
   - Android: JitPack, see https://rockyljewell.github.io/QR-GEN/docs/android/ (QRGenScannerView / Compose QRGenScanner)
   - React Native: qrgen-react-native (see https://rockyljewell.github.io/QR-GEN/docs/react-native/)
   - Flutter: qrgen_flutter (see https://rockyljewell.github.io/QR-GEN/docs/flutter/)
   - .NET / MAUI / Xamarin: QRGen.Net (see https://rockyljewell.github.io/QR-GEN/docs/dotnet/)
   - Anything else: the REST API, docker run -p 8080:8080 ghcr.io/rockyljewell/qr-gen, then POST an image to /v1/scan
2. Add a scanner where the user needs it. Web example:
   <qrgen-scanner symbologies="qr,ean13,code128" mode="single"></qrgen-scanner>
   element.addEventListener("scan", (e) => handle(e.detail.barcode.data, e.detail.barcode.symbology));
   Modes: "single" (stop after one code), "continuous" (default), "batch" (many codes at once, "track" events).
3. Only enable the symbologies the app needs (faster and fewer false reads). Ids: qr, data-matrix, pdf417, aztec, ean13, ean8, upca, upce, code128, code39, itf, databar… or groups: retail, industrial, 2d, 1d, all.
4. Camera access needs HTTPS or localhost. On mobile add the camera permission (iOS NSCameraUsageDescription, Android android.permission.CAMERA).
5. For structured data use the parsers: import { parseContent, parseGS1, parseAAMVA } from "qrgen-sdk/parsers" (URLs, Wi-Fi, contacts, GS1 AIs, driver licenses).
6. Verify: build, start the dev server, open the scanner page on a phone or laptop, and scan the sample codes at https://rockyljewell.github.io/QR-GEN/demo/. Add a unit test that feeds a generated code image to scanImage()/scanFile().
7. Credit QRGen as its Apache-2.0 license requires: if the project has an open-source notices file or an "Acknowledgements" / "Open-source licenses" screen, add "QRGen, Copyright 2026 Rockyljewell, Apache License 2.0, https://github.com/Rockyljewell/QR-GEN" there. Keep the copyright headers in any QRGen files you copy. Details: https://rockyljewell.github.io/QR-GEN/docs/credit/

Use only the APIs in the docs above and do not invent options. If something is unclear, fetch https://rockyljewell.github.io/QR-GEN/llms-full.txt.

Platforms

One SDK family, every platform

Same symbology ids, options and result format, so logic and tests move between platforms with the code.

Native mobile

iOSSwiftbeta

AVFoundation + Vision scanner with SwiftUI and UIKit views.

Swift Package: https://github.com/Rockyljewell/QR-GEN

AndroidKotlinbeta

CameraX + ML Kit scanner view and Jetpack Compose component.

implementation("com.github.Rockyljewell.QR-GEN:qrgen-compose:main-SNAPSHOT")

Cross-platform mobile

React NativeTypeScriptbeta

Native camera scanning via VisionCamera, or the zero-setup WebView scanner.

npm install https://rockyljewell.github.io/QR-GEN/downloads/qrgen-react-native.tgz

FlutterDartbeta

Native scanner widget plus a WebView scanner for full symbology coverage.

flutter pub add qrgen_flutter --git-url https://github.com/Rockyljewell/QR-GEN.git --git-path packages/flutter

CapacitorTypeScriptstable

The web SDK runs as-is in Capacitor and Ionic apps.

npm install qrgen-sdk

CordovaJavaScriptguide

Use the web SDK inside Cordova's WebView.

npm install qrgen-sdk

.NETC#beta

Parsers, REST client, local decode/encode and a MAUI scanner page.

dotnet pack packages/dotnet/src/QRGen.Net -o nupkg

XamarinC#guide

Xamarin is end-of-life: use .NET MAUI with the QRGen bridge.

dotnet add package QRGen.Net

TitaniumJavaScriptguide

Embed the hosted scanner in a Titanium WebView.

Ti.UI.createWebView({ url: embedUrl })

Web frameworks

JavaScriptTypeScriptstable

Web SDK with a drop-in scanner element, workers and WebAssembly.

npm install qrgen-sdk

ReactTypeScriptstable

<QRGenScanner> and <QRGenBarcode> components.

npm install qrgen-sdk

Next.jsTypeScriptstable

Client component with dynamic import.

npm install qrgen-sdk

VueTypeScriptstable

Vue 3 components and plugin, Nuxt-ready.

npm install qrgen-sdk

AngularTypeScriptstable

Standard custom element with CUSTOM_ELEMENTS_SCHEMA.

npm install qrgen-sdk

SvelteTypeScriptstable

Works with Svelte 4/5 and SvelteKit.

npm install qrgen-sdk

Desktop, server & Linux

ElectronTypeScriptstable

Camera scanning in the renderer, file scanning in main.

npm install qrgen-sdk

TauriTypeScriptguide

Web SDK inside the Tauri WebView.

npm install qrgen-sdk

Node.jsTypeScriptstable

Scan and generate files on servers and serverless.

npm install qrgen-sdk

PythonPythonbeta

Scan images and webcams, generate codes, run the REST API.

pip install "git+https://github.com/Rockyljewell/QR-GEN.git#subdirectory=packages/python"

LinuxPython · Nodestable

Python + OpenCV webcams, the CLI, or the REST API on any Linux box.

npx qrgen scan photo.jpg

REST APIHTTPstable

Any language, any platform: POST an image, get JSON.

docker run -p 8080:8080 ghcr.io/rockyljewell/qr-gen

Registry releases (npm, PyPI, pub.dev, NuGet, Maven) are on the way. Until then install the web SDK with npm install https://rockyljewell.github.io/QR-GEN/downloads/qrgen-sdk.tgz. Every guide shows the GitHub-based install for its platform.

stable tested in CI · beta logic unit-tested, device testing in progress ·guide integration guide using the web SDK or embed bridge

Quick start

A working scanner in a few lines

Each snippet is a complete integration: camera permission prompt, viewfinder, feedback and a typed result.

Symbologies as simple ids: qr, ean13, retail
single, continuous and batch modes everywhere
Duplicate filter, torch, zoom and camera switching built in

Full quick start

<script type="module" src="https://rockyljewell.github.io/QR-GEN/sdk/qrgen.js"></script>

<qrgen-scanner symbologies="qr,ean13,code128" mode="single" style="height: 420px"></qrgen-scanner>

<script type="module">
  document.querySelector("qrgen-scanner").addEventListener("scan", (e) => {
    console.log(e.detail.barcode.symbology, e.detail.barcode.data);
  });
</script>

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

export function Checkout() {
  return (
    <QRGenScanner
      symbologies={["qr", "ean13"]}
      mode="single"
      style={{ height: 420 }}
      onScan={(barcodes) => addToCart(barcodes[0].data)}
    />
  );
}

import QRGenKit
import SwiftUI

struct ScanScreen: View {
    @State private var code: String?

    var body: some View {
        QRGenScannerView(options: .init(symbologies: ["qr", "ean13"], mode: .single)) { barcodes in
            code = barcodes.first?.data
        }
        .onError { error in print(error.code) }
        .ignoresSafeArea()
    }
}

import dev.qrgen.ScannerOptions
import dev.qrgen.Symbology
import dev.qrgen.compose.QRGenScanner

@Composable
fun ScanScreen(onCode: (String) -> Unit) {
    QRGenScanner(
        options = ScannerOptions(
            symbologies = Symbology.resolve("qr", "retail"),
            mode = ScannerOptions.Mode.SINGLE,
        ),
        onScan = { barcodes -> onCode(barcodes.first().data) },
        onError = { error -> Log.w("scan", error.message ?: "") },
        modifier = Modifier.fillMaxSize(),
    )
}

import { QRGenScanner } from "qrgen-react-native";

export function ScanScreen() {
  return (
    <QRGenScanner
      style={{ flex: 1 }}
      symbologies={["qr", "ean13", "code128"]}
      mode="single"
      onScan={(barcodes) => console.log(barcodes[0].data)}
    />
  );
}

import 'package:qrgen_flutter/qrgen_flutter.dart';

QRGenScanner(
  options: const QRGenScannerOptions(
    symbologies: ['qr', 'ean13', 'code128'],
    mode: QRGenScanMode.single,
  ),
  onScan: (barcodes) => Navigator.pop(context, barcodes.first.data),
)

import qrgen_sdk

for code in qrgen_sdk.scan("label.jpg", symbologies=["qr", "retail"]):
    print(code.symbology, code.data)

qrgen_sdk.save("https://example.com", "qr.png")

docker run -p 8080:8080 ghcr.io/rockyljewell/qr-gen

curl -X POST --data-binary @label.jpg -H "content-type: image/jpeg" \
  http://localhost:8080/v1/scan

{
  "data": "(01)09501101530003(17)271231(10)LOT4815",
  "symbology": "data-matrix",
  "symbologyName": "Data Matrix",
  "contentType": "gs1",
  "isGS1": true,
  "location": {
    "topLeft": { "x": 412, "y": 188 }, "topRight": { "x": 566, "y": 190 },
    "bottomRight": { "x": 564, "y": 344 }, "bottomLeft": { "x": 410, "y": 342 }
  },
  "frameSize": { "width": 1280, "height": 720 },
  "symbologyIdentifier": "]d2",
  "timestamp": 1790000000000
}

One result shape

The same JSON on every platform

A scan from Swift, Kotlin, Dart, TypeScript, Python or C# serializes to the same object, and GS1 data always comes back in human-readable form. Send results to one backend and parse them with the same code.

Core concepts

Feature matrix

What's in each SDK

Feature	iOS	Android	React Native	Flutter	.NET	Python	REST
Pre-built scanner UI					MAUI	–	–
Single & continuous modes							–
Batch tracking							–
Image / file scanning			–	–
GS1 / AAMVA / content parsers			via qrgen-sdk	–
Barcode generation	4 formats		–	–
All 26 symbologies	20	ML Kit set	native set / all via WebView	native set / all via WebView	via REST

iOS reads 20 symbologies through Apple Vision and generates QR, PDF417, Aztec and Code 128 natively (everything else through the REST API). See Symbologies.