Wi-Fi QR Card

Features

• QR code generated in pure JS (embedded Reed-Solomon algorithm)
• Password hidden by default, revealable with a toggle button (masked again after 30 s or when the card leaves the page), and a button to copy it to the clipboard
• Mini card (wifi-qr-mini-card): one compact row with the network name and a QR code thumbnail that opens the QR code full screen, and a detail button that switches to the full card and back
• Visual editor in the dashboard UI (no YAML needed)
• Light and dark mode, English, French, German, Spanish, Serbian (Cyrillic and Latin), Italian, Dutch, European Portuguese, Polish, Romanian, Danish, Swedish, Bulgarian, Russian, Ukrainian, Hungarian, Slovak, Czech, Slovenian, Latvian and Greek
• Ready for the Marketplace
• Single file, lightweight (~77 KB)

Prerequisites

Home Assistant 2024.8 or later. The card needs no integration, only the name and password of your network.

Configuration

Visual editor#

Add the card from the dashboard (Add card → Wifi QR Card, or Wifi QR Mini Card for the compact version) and fill in the fields: title, logo, SSID, password (or the entities giving them), hidden network, security, QR code size and language (plus the detail button for the mini card). The preview updates live, and empty optional fields are left out of the generated YAML.

Minimal#

type: custom:wifi-qr-card
ssid: MyNetwork-Guest
password: MySecretPassword

Full options#

type: custom:wifi-qr-card
title: Guest WiFi
logo: true
ssid: MyNetwork-Guest
password: MySecretPassword
security: WPA
qr_size: 176

SSID and password from entities#

ssid_entity and password_entity read the network name and the password from an entity's state, for example an input_text helper or the guest WiFi sensor of a router integration. The QR code and the texts update live when the state changes (a rotated guest password, say). While an entity is unknown or unavailable the card uses ssid / password if they are set; with no value at all it names the entity instead of showing a QR code.

type: custom:wifi-qr-card
ssid_entity: input_text.guest_wifi_ssid
password_entity: sensor.router_guest_wifi_password
hidden: true

Mini card#

wifi-qr-mini-card takes the same options and shows the network on one compact row: the header icon, the title, the network name and a small QR code. The password is never shown. Tap the QR code thumbnail to open it full screen, like the big one of the full card. The detail button (top right) switches to the full card; the button or a click anywhere outside the card brings the compact view back.

type: custom:wifi-qr-mini-card
title: Guest WiFi
ssid: MyNetwork-Guest
password: MySecretPassword
zoom: true

Options reference#

How it works

The card generates a WiFi QR code using the standard WIFI:T:<security>;S:<ssid>;P:<password>;; format (WIFI:T:<security>;S:<ssid>;P:<password>;H:true;; for a hidden network). When scanned with a phone camera, the device automatically prompts to join the network — no need to type the password manually.

The characters reserved by this format (\, ;, ,, : and ") are escaped with a backslash in the SSID and the password of the QR code, so any network name or password can be used as is. The card itself shows them unescaped.

The password is stored in clear text in the dashboard configuration, which every Home Assistant user can read: use it for a guest network. With password_entity it is not in the dashboard, but the entity's state is readable by every Home Assistant user too.

The QR code engine is a self-contained JavaScript implementation of the QR code specification (ISO/IEC 18004), including Reed-Solomon error correction, embedded directly in the card source. No external libraries or CDN requests are needed.

Support

If you find this project useful, you can support its development:

Features

• show_title and show_subtitle options (also in the visual editor) hide the header's title and its subtitle (the network name), separately, for a card placed under a section heading of its own (asked in juju35/ha-vehicle-card#72).

Fixes

• Translations: the cards are defined once the page's language file has arrived (at most 1.5 s; Home Assistant builds a card when its element gets defined), so the first render is already translated instead of English then redrawn; until a language file is in, a missing text reads the English one wherever the card has no fallback of its own.

Performance

• Translations load on demand: the bundle keeps English only (86 KB → 55 KB) and each other language is its own wifi-card.i18n.<lang>.js file next to it, fetched the first time a card needs it. Home Assistant loads every dashboard resource on every dashboard, so each page used to download and parse all 22 languages to use one. Until a language file has arrived (a few milliseconds), texts fall back to English, and the cards redraw once it is there.

Maintenance

• Build: scripts/i18n-split.mjs splits the built bundle and rebuilds every table from the split files to check them (the build fails on any difference); src/ keeps every language as before.
• Release: every file of dist/ is attached. Manual installation copies the translation files too.

Fixes

• The full screen QR code no longer shows a focus ring around it (a dark outline drawn by the browser, on phones in particular); Escape still closes it and the focus still returns to the QR code.

What's new

• A copy button next to the eye button copies the password to the clipboard, shows a check mark and announces the result to screen readers, in all 22 languages of the card.
• The full card's name and description in the card picker are now in the Home Assistant language, like the mini card's.

Security

• A revealed password is masked again after 30 seconds, when the card leaves the page and when the mini card folds back to its compact view.

Changes

• The QR code is only rebuilt when the network or its size changes, not on every re-render.
• The QR code's accessible name is translated in all 22 languages of the card.