QR Code

QR code generator with configurable colors and download support.

← Back to components GitHub Repo Playground

Basic Usage

Generate QR codes from text or URLs.

<qr-code data="https://lit.dev"></qr-code> <qr-code data="Hello World!" size="150"></qr-code>

Interactive Generator

Enter text to generate a QR code in real-time.

<qr-code data="https://github.com/manufosela"></qr-code>

Custom Colors

Customize foreground and background colors.

<qr-code data="Blue QR" color="#3b82f6" background="#eff6ff" size="150"></qr-code> <qr-code data="Green QR" color="#22c55e" background="#f0fdf4" size="150"></qr-code> <qr-code data="Purple QR" color="#8b5cf6" background="#faf5ff" size="150"></qr-code> <qr-code data="Dark Mode" color="#f8fafc" background="#1e293b" size="150"></qr-code>

Color Picker

Choose custom colors interactively.

<qr-code data="Custom Colors" color="#000000" background="#ffffff"></qr-code>

Error Correction Levels

Higher levels allow more damage tolerance but increase QR size.

L - 7%

M - 15%

Q - 25%

H - 30%

<qr-code data="Level L" error-correction="L"></qr-code> <qr-code data="Level M" error-correction="M"></qr-code> <qr-code data="Level Q" error-correction="Q"></qr-code> <qr-code data="Level H" error-correction="H"></qr-code>

Different Sizes

QR codes can be generated at various sizes.

<qr-code data="Small" size="80"></qr-code> <qr-code data="Medium" size="150"></qr-code> <qr-code data="Large" size="250"></qr-code>

Download QR Code

Download the generated QR code as a PNG image.

// JavaScript const qr = document.querySelector('qr-code'); qr.download('my-qrcode.png'); // Or get as data URL const dataUrl = qr.toDataURL();

Use Cases

Common QR code applications.

Website URL

Email

Phone

WiFi

<!-- WiFi QR code format --> <qr-code data="WIFI:T:WPA;S:NetworkName;P:password;;"></qr-code> <!-- vCard format --> <qr-code data="BEGIN:VCARD VERSION:3.0 N:Doe;John TEL:+1234567890 END:VCARD"></qr-code>