`<bmx-qr-code>`

A QR code for a link, a Wi-Fi network, a contact card, a payment reference or any text, made in the page: square, rounded or dotted modules, your own colours, and a logo in the middle if you want one.

10 properties · 1 events · 3 methods · 4 parts

Example

The third has a logo in the middle: with a logo the code is made at the highest error correction, so it still scans.

A Wi-Fi code for the office

Network Password

Show markup

<div class="row" style="gap: 24px; flex-wrap: wrap; align-items: flex-start">
  <bmx-qr-code value="https://www.binarymission.co.uk/" show-value></bmx-qr-code>
  <bmx-qr-code value="https://www.binarymission.co.uk/" module-style="rounded" style="--bmx-qr-code-color: #0b3d91"></bmx-qr-code>
  <bmx-qr-code id="ex-qr-logo" value="https://www.binarymission.co.uk/" module-style="dots" style="--bmx-qr-code-color: #5f3dc4"></bmx-qr-code>
</div>
<p class="note">The third has a logo in the middle: with a logo the code is made at the highest error correction, so it still scans.</p>

<h3>A Wi-Fi code for the office</h3>

<div class="row" style="gap: 12px; flex-wrap: wrap; align-items: center">
  <label for="ex-qr-ssid">Network</label>
  <input id="ex-qr-ssid" value="Acme Guest" />
  <label for="ex-qr-pass">Password</label>
  <input id="ex-qr-pass" value="welcome-2026" />
  <button type="button" id="ex-qr-save">Save PNG</button>
</div>
<p style="margin-top: 12px"><bmx-qr-code id="ex-qr-wifi" size="200" module-style="rounded" label="QR code to join the Acme Guest Wi-Fi network"></bmx-qr-code></p>

<script type="module">
  await customElements.whenDefined('bmx-qr-code');
  const mark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#5f3dc4"/><path d="M18 46V18h14a8 8 0 0 1 0 16H18m14 0h2a6 6 0 0 1 0 12H18" fill="none" stroke="#fff" stroke-width="6" stroke-linejoin="round"/></svg>`;
  document.getElementById('ex-qr-logo').logo = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(mark)}`;
  const wifi = document.getElementById('ex-qr-wifi');
  const ssid = document.getElementById('ex-qr-ssid');
  const pass = document.getElementById('ex-qr-pass');
  const esc = s => s.replace(/([\;,:"])/g, '\\$1');
  const update = () => (wifi.value = `WIFI:T:WPA;S:${esc(ssid.value)};P:${esc(pass.value)};;`);
  ssid.addEventListener('input', update);
  pass.addEventListener('input', update);
  update();
  document.getElementById('ex-qr-save').addEventListener('click', () => wifi.download('png', 'wifi'));
</script>

THE LOGO RAISES THE ERROR CORRECTION

A logo covers modules, and a QR code reads only because it can rebuild the ones it cannot see. With a logo the code is made at level H, which survives about 30% of it missing, and the logo is kept to logo-size (a fraction of the width, at most 0.3) so that it never covers more than that.

THE FINDERS STAY SQUARE-ISH

The three big corner squares are how a camera finds the code. With dotted modules they are still drawn as solid rounded squares rather than as rings of dots, which scanners struggle with.

ACCESSIBILITY

The code is an image named "QR code: " and what it holds, unless label says otherwise. show-value prints the value underneath, for anyone who cannot scan it - a link a screen-reader user can follow, for example, is better given as a link next to the code as well.

Properties

Property	Attribute	Type	Default	Description
`errorCorrection`	`error-correction`	`BmxQrErrorCorrection`	`'M'`	How much damage the code survives: `L` (7%), `M` (15%), `Q` (25%) or `H` (30%). Raised to `H` when there is a logo.
`fileName`	`file-name`	`string`	`'qr-code'`	The file name `download` offers.
`label`	`label`	`string`	—	The accessible name. Default: "QR code: " and the value.
`logo`	`logo`	`string`	—	A picture for the middle of the code. From another site, it must allow cross-origin use for `toPng` to include it.
`logoSize`	`logo-size`	`number`	`0.22`	How wide the logo is, as a fraction of the code (0.1 to 0.3).
`margin`	`margin`	`number`	`4`	The quiet zone around the code, in modules. Scanners want 4; less only on a plain light ground.
`moduleStyle`	`module-style`	`BmxQrModuleStyle`	`'square'`	`square`, `rounded` or `dots`.
`showValue`	`show-value`	`boolean`	`false`	Print the value under the code.
`size`	`size`	`number`	`160`	The width and height, in CSS pixels, quiet zone included.
`value`	`value`	`string`	`''`	What the code holds: a link, or any text.

Events

Event	Detail	Description
`bmxQrCodeError`	`BmxQrCodeErrorDetail`	Fired when the value cannot be made into a QR code (it is too long).

Methods

Method	Signature	Description
`download`	`download(format?: BmxBarcodeFileFormat, name?: string) => Promise<void>`	Offers the code to the reader as a file.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The code as a PNG at `scale` times its size on screen. Null when there is nothing drawn, or when a logo from another site does not allow it.
`toSvg`	`toSvg() => Promise<string \| null>`	The code as a standalone SVG document, in the colours it is shown in, logo included. Null when there is nothing drawn.

CSS shadow parts

Part	Description
`error`	Why the value could not be drawn.
`frame`	The box around the code.
`svg`	The drawn code.
`value`	The printed value, with `show-value`.

CSS custom properties

Property	Description
`--bmx-qr-code-background`	The ground and quiet zone. Default white in every theme.
`--bmx-qr-code-color`	The modules. Default black in every theme, because cameras read dark on light.
`--bmx-qr-code-radius`	The frame's corner radius.