qr-code
QR code generator web component with progressive enhancement. Shows text content before JS, then renders a scannable QR code.
Overview
The <qr-code> component generates a QR code from text or a URL. It uses progressive enhancement: the text content is visible before JavaScript loads, then replaced with a scannable QR code canvas.
Basic QR code
<qr-code value="https://vanilla-breeze.dev"> https://vanilla-breeze.dev</qr-code>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value |
string | textContent | Text or URL to encode. Falls back to element text content. |
size |
number | 200 |
Canvas size in pixels. |
color |
CSS color | currentColor | Foreground (module) color. |
background |
CSS color | transparent | Background color. |
error-correction |
0–3 | 1 (M) |
Error correction level: 0=L, 1=M, 2=Q, 3=H. |
Custom Sizes
Size variations
<!-- Small --><qr-code value="https://example.com" size="100">URL</qr-code> <!-- Default --><qr-code value="https://example.com" size="200">URL</qr-code> <!-- Large --><qr-code value="https://example.com" size="300">URL</qr-code>Custom Colors
Override the foreground and background colors to match your brand.
Custom colors
<qr-code value="https://example.com" color="#1a5276" background="#f0f0f0"> https://example.com</qr-code>JavaScript API
| Method | Returns | Description |
|---|---|---|
toDataURL(type?) |
string | Get the QR code as a data URL for download or embedding. |
Export as image
const qr = document.querySelector('qr-code'); // Get as image data URLconst dataUrl = qr.toDataURL('image/png'); // Use in an img tag or download linkconst img = new Image();img.src = dataUrl;Progressive Enhancement
Without JavaScript, the text content inside the element remains visible as a readable fallback. This means the URL or text is always accessible, even if the QR code can’t render.
Accessibility
- The canvas element gets
role="img"with anaria-labeldescribing the QR content. - The original text serves as a fallback for non-visual users.