Skip to content

Installation

Alex RAMIREZ edited this page Oct 9, 2026 · 3 revisions

🇫🇷 Version française

Installation

Maquette is a single JavaScript file, maquette-card.js: the card, its editor, the English and French texts and the demo are all inside. Nothing else to install, no integration, no add-on.

Requirements

  • Home Assistant 2023.9 or later (the version declared to HACS). See FAQ › Which Home Assistant version?
  • A recent browser or the Home Assistant companion app: Chrome / Edge 111+, Safari 16.4+ (iOS 16.4+), Firefox 121+ (the card uses color-mix() and :has()). Maquette is developed and tested with Chromium-based browsers.
  • To edit the plan: a Home Assistant administrator account. Other users see the plan but never the editor.

With HACS (custom repository)

  1. In Home Assistant, open HACS.
  2. Menu ⋮ › Custom repositories.
  3. Repository: https://github.com/TooMuhtsh/maquette-card, type Dashboard, then Add.
  4. Search for Maquette in HACS, open it and click Download.
  5. Reload the browser (or close and reopen the app) when HACS asks for it.

HACS adds the dashboard resource for you. Updates then show up in HACS like any other card; 0.2.0 is a stable version, the Pre-release switch is not needed.

Manual installation

  1. Download maquette-card.js from the assets of the latest release (GitHub › Releases).
  2. Copy it to /config/www/maquette-card.js (the www folder of your configuration; create it if needed, then restart Home Assistant once so that /local/ is served).
  3. Settings › Dashboards › ⋮ › Resources › Add resource:
    • URL: /local/maquette-card.js
    • Resource type: JavaScript module
  4. Reload the browser.

The Resources menu only appears with Advanced mode turned on in your user profile.

To update manually, replace the file and change the resource URL to force the browser to fetch it again, for example /local/maquette-card.js?v=2.

Check that it is loaded

  • In the editor, ⚙ Settings shows the installed version under its title (Maquette 0.2.0), with links to the Documentation and to Report an issue.
  • The browser console (F12) also prints a blue MAQUETTE 0.2.0 banner when the file is loaded.
  • In a dashboard, Add card lists Maquette and Maquette — demo.
  • Settings › Dashboards › Add dashboard offers Maquette (a blank plan) and Maquette — demo (in Home Assistant versions that list custom dashboard strategies; otherwise add the card to any dashboard).

Next step

Getting started: your first plan in a few minutes.

Clone this wiki locally