ha-wifi-card

Custom Lovelace card for Home Assistant that displays a WiFi QR code for easy guest network access.

Zero external dependencies — the QR code is generated in pure JavaScript with an embedded Reed-Solomon encoder. No CDN, no network requests.

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.

Installation

Via the Marketplace (recommended)

Click the button below to add the repository directly:

Or manually:

1. Open Settings → Marketplace → Add from link (top right; this needs a GitHub account connected)
2. Add https://github.com/juju35/ha-wifi-card — Type: Dashboard
3. Open Wifi QR Card and click Install
4. Clear your browser cache and refresh

Manual

1. Download wifi-card.js and the wifi-card.i18n.*.js translation files from the latest release
2. Copy them all to /config/www/ (without the translation files, the cards show in English)
3. Go to Settings → Dashboards → Resources → Add resource:
   • URL: /local/wifi-card.js
   • Type: JavaScript Module
4. Clear your browser cache and refresh

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

This is the beginning of the README. Read the rest at the original. Read the full README ↗