Custom panel
The panel_custom
integrationIntegrations connect and integrate Home Assistant with your devices, services, and more. [Learn more] allows you to write your own panels in JavaScript and add them to Home Assistant. See the developer documentation on instructions how to build your own panels.
To enable customized panels in your installation, add the following to your configuration.yaml
The configuration.yaml file is the main configuration file for Home Assistant. It lists the integrations to be loaded and their specific configurations. In some cases, the configuration needs to be edited manually directly in the configuration.yaml file. Most integrations can be configured in the UI. [Learn more] file.
After changing the configuration.yaml
The configuration.yaml file is the main configuration file for Home Assistant. It lists the integrations to be loaded and their specific configurations. In some cases, the configuration needs to be edited manually directly in the configuration.yaml file. Most integrations can be configured in the UI. [Learn more] file, restart Home Assistant to apply the changes.
# Example configuration.yaml entry
panel_custom:
- name: my-panel
sidebar_title: TodoMVC
sidebar_icon: mdi:work
url_path: my-todomvc
module_url: /local/my-panel.js
config:
who: world
Store your custom panels in <config>/www
to make them available in the frontend at the path /local
.
Configuration Variables
Friendly title for the panel in the sidebar. Omitting it means no sidebar entry (but still accessible through the URL).
Icon for entry. Pick an icon that from Material Design Iconsmdi:
. For example mdi:car
, mdi:ambulance
, or mdi:motorbike
.
The URL your panel will be available on in the frontend. If omitted will default to the panel name.
The URL that contains the JavaScript of your panel. If used together with module_url
, will only be served to users that use the ES5 build of the frontend.
The URL that contains the JavaScript module of your panel. Loaded as a JavaScript module instead of a script. If used together with module_url
, will only be served to users that use the “latest” build of the frontend.
Set to true
to embed panel in iframe. This is necessary if the panel is using the React framework or if it contains conflicting web components.