A lightweight, CDN-ready QR Code Generator & Scanner Web Component — one tag, dozens of QR content types, live camera scanning, i18n, and light/dark themes. No framework required.

Basic usage

Switch between Generate and Scan with the tabs, pick a QR content type, fill in the fields, and download the result as PNG or SVG.

<neiki-qr id="qr" data-mode="generate"></neiki-qr>

qr.setType('wifi');
qr.setFields({ ssid: 'HomeNet', password: 'secret123', encryption: 'wpa' });

QR content types

Text, URL, Wi-Fi, email, phone, SMS, WhatsApp, contact card (vCard), calendar event, location, SEPA payment, Czech QR payment (SPD), and Bitcoin — switch instantly with setType().

Scan mode

Uses the browser's native BarcodeDetector API (Chrome, Edge, Opera) for live camera scanning and image upload — no extra libraries loaded. Unsupported browsers show a friendly fallback message.

Themes

Each instance resolves its own theme independently — light, dark, or auto (follows the OS).

light
dark
auto (follows OS)

Internationalization (i18n)

Built-in translations for English, Czech, German, Spanish, French, Polish, Slovak and Ukrainian — switch with setLang() or the lang attribute. Add your own with addTranslations().

qr.setLang('cs');

qr.addTranslations('en', {
  toolbar: { copy: 'Copy to clipboard' }
});

JavaScript API & events

Listen for neiki-qr:change as the user edits fields, or neiki-qr:scan when a code is detected (cancelable — call preventDefault() to handle it yourself instead of the built-in history log).

Event log

CDN-style usage

<script src="https://cdn.neikiri.dev/neiki-qr/neiki-qr.min.js"></script>

<neiki-qr id="qr" data-mode="generate" type="url"></neiki-qr>
<script>
  document.getElementById('qr').setFields({ url: 'https://neikiri.dev' });
</script>