diff --git a/source/lovelace/yaml-mode.markdown b/source/lovelace/yaml-mode.markdown index e05d2ecb584..ef586d091e7 100644 --- a/source/lovelace/yaml-mode.markdown +++ b/source/lovelace/yaml-mode.markdown @@ -1,16 +1,28 @@ --- title: "Lovelace YAML mode" -description: "Advanced users can switch on the advanced YAML mode." +description: "Advanced users can switch on YAML mode for editing the Lovelace UI." --- -It is possible to write your Lovelace config in YAML instead of via the UI. To do so, you will need to configure the Lovelace integration to be in yaml mode by adding the following to your `configuration.yaml`: +It is possible to customize your Home Assistant interface by writing in YAML instead of via the UI. To do so, you configure the Lovelace integration to be in yaml mode by adding the following to your `configuration.yaml`: ```yaml lovelace: mode: yaml ``` -Restart Home Assistant for the mode to be changed. Create a new file `/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation. +Restart Home Assistant for the mode to be changed. Create a new file `/ui-lovelace.yaml` and add your Lovelace configuration. A good way to start this file is to copy and paste the "Raw config" from the UI so your manual configuration starts the same as your existing UI. + +- Go into the `Overview` tab. +- Click the three dots menu (top-right) and click on `Configure UI`. +- Click the three dots menu again and click on `Raw config editor`. +- There you see the config for your current Lovelace UI. Copy that into the `/ui-lovelace.yaml` file. + +Once you take control of your UI via YAML, the Home Assistant interface for modifying it won't be available anymore and new entities will not automatically be added to your UI. + +When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button in the menu at the top of the UI. + +To revert back to using the UI to edit your Lovelace interface, remove the `lovelace` section from your `configuration.yaml` and copy the contents of your `ui-lovelace.yaml` into the raw config section of Home Assistant and restart. + As a super minimal example, here's the bare minimum you will need for this to work: @@ -87,14 +99,3 @@ views: content: > Welcome to your **Lovelace UI**. ``` - -Your previously customized Lovelace UI won't be modifiable anymore and won't follow after you start writing code in the `/ui-lovelace.yaml` file, but you can easily import it if you wish. - - - Go in the `Overview` tab. - - Go in the three dots menu (top-right) and click on `Configure UI`. - - Go in the three dots menu again and click on `Raw config editor`. - - There you see the config for your actual Lovelace UI, you can copy that into the `/ui-lovelace.yaml` file. - -Navigate to `/lovelace`. When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button in the menu at the top of the UI. - -To revert back to using the UI to edit your Lovelace interface, remove the `lovelace` sections from your `configuration.yaml` and copy the contents of your `ui-lovelace.yaml` into the raw config section of Home Assistant and restart.