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.

<qr-code data-value="https://vanilla-breeze.dev"> https://vanilla-breeze.dev </qr-code>

Attributes

Attribute	Type	Default	Description
`data-value`	string	textContent	Text or URL to encode. Falls back to element text content.
`data-size`	number	`200`	Canvas size in pixels.
`data-color`	CSS color	currentColor	Foreground (module) color.
`data-background`	CSS color	transparent	Background color.
`data-error-correction`	0–3	`1` (M)	Error correction level: 0=L, 1=M, 2=Q, 3=H.

Custom Sizes

Small

100px

Medium

200px (default)

Large

300px

<qr-code data-value="https://example.com" data-size="100">URL</qr-code>  <qr-code data-value="https://example.com" data-size="200">URL</qr-code>  <qr-code data-value="https://example.com" data-size="300">URL</qr-code>

Custom Colors

Override the foreground and background colors to match your brand.

https://example.com

<qr-code data-value="https://example.com" data-color="#1a5276" data-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.

const qr = document.querySelector('qr-code'); // Get as image data URL const dataUrl = qr.toDataURL('image/png'); // Use in an img tag or download link const 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 an aria-label describing the QR content.
The original text serves as a fallback for non-visual users.