⚡Web Tools

QR Code Generator bauen

QR Codes generieren und scannen in deiner App

QR Codes sind ueberall. Ob fuer Payments, Links, WiFi-Zugaenge oder Visitenkarten. Mit ein paar Zeilen Code baust du einen Generator und Scanner direkt in deine Web-App.

Pro-Tip — Der schnelle Weg
Generiere QR Codes serverseitig als SVG statt als Bild. SVGs sind scharf bei jeder Groesse und brauchen weniger Speicher als PNGs.
Seite 1
1

QR Code Library installieren

qrcode ist die beliebteste Library fuer QR-Generierung in JavaScript. Klein, schnell und ohne Abhaengigkeiten. Fuer React gibt es qrcode.react.

npm install qrcode.react


import { QRCodeSVG } from 'qrcode.react';


function QRGenerator({ url }: { url: string }) {
 return <QRCodeSVG value={url} size={256} level="H" />;
}
2

Dynamische QR Codes

Lass den Nutzer Text oder URLs eingeben und generiere den QR Code in Echtzeit. Mit einem State-Hook aktualisiert sich der Code bei jedem Tastendruck.

const [input, setInput] = useState("");


return (
 <div>
 <input value={input} onChange={e => setInput(e.target.value)} />
 {input && <QRCodeSVG value={input} size={256} />}
 </div>
);
3

QR Code als Download

Wandle den SVG QR-Code in ein PNG um und biete ihn als Download an. Der Nutzer kann ihn dann drucken oder teilen.

function downloadQR() {
 const svg = document.querySelector('svg');
 const svgData = new XMLSerializer().serializeToString(svg!);
 const canvas = document.createElement('canvas');
 const img = new Image();
 img.onload = () => {
 canvas.getContext('2d')?.drawImage(img, 0, 0);
 const a = document.createElement('a');
 a.download = 'qrcode.png';
 a.href = canvas.toDataURL();
 a.click();
 };
 img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
}
4

QR Scanner einbauen

Nutze die Kamera API zusammen mit einer Scanner-Library um QR Codes in Echtzeit zu lesen. html5-qrcode macht das in wenigen Zeilen.

npm install html5-qrcode


import { Html5QrcodeScanner } from 'html5-qrcode';


const scanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: 250 });
scanner.render(
 (text) => console.log('Gescannt:', text),
 (err) => console.warn(err)
);
5

Styling und Branding

Passe Farben an dein Branding an und fuege ein Logo in die Mitte des QR Codes ein. Der Error-Correction-Level H erlaubt bis zu 30 Prozent Verdeckung.

<QRCodeSVG
 value={url}
 size={256}
 fgColor="#1a1a2e"
 bgColor="#ffffff"
 level="H"
 imageSettings={{
 src: "/logo.png",
 height: 50,
 width: 50,
 excavate: true
 }}
/>
Seite 2
Warum das funktioniert
  • QR Codes sind universell lesbar auf jedem Smartphone
  • Generierung und Scanning laufen komplett clientseitig
  • SVG-Ausgabe ist perfekt scharf bei jeder Druckgroesse
  • Kombinierbar mit jeder Art von Daten von URLs bis WiFi
Tipps
  • Error-Correction H fuer QR Codes mit Logo verwenden
  • Teste den QR Code immer mit verschiedenen Scanner-Apps
  • Maximale Datenlaenge beachten, URLs vorher kuerzen
  • Weisser Rand um den QR Code verbessert die Lesbarkeit
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen