diff --git a/docs/frontend_experiment_index.md b/docs/frontend_experiment_index.md index 32ee1fa1..5c373933 100644 --- a/docs/frontend_experiment_index.md +++ b/docs/frontend_experiment_index.md @@ -3,13 +3,13 @@ title: "Experimental UI" sidebar_label: Introduction --- -Starting with Home Assistant 0.72, we're experimenting with a way of defining your user interface. The aproach is fundamentally different from the current approach. +Starting with Home Assistant 0.72, we're experimenting with a way of defining your user interface. The aproach is fundamentally different from the current approach. The old user interface relied solely on the state machine. This caused trouble as it meant that people wanted to store things in the state machine to control the user interface. That's a big violation of seperation of concern. With the new user interface, we're taking a completely different approach. All user interface configuration will live in a seperate file, controlled by the user. This allows us to build a faster user interface that is more customizable. -The current approach will look at your groups and entities and will sort them on the fly. With our experimental UI, it is purely based on configuration that is provided by the user, defined in `/experimental-ui.yaml`. +![Visual comparison of old configuration versus new configuration](/img/en/frontend/experimental-ui-comparison.png) ## Trying it out -Create `/experimental-ui.yaml`: +Create a new file `/experimental-ui.yaml` and add the following content: ```yaml title: My Awesome Home diff --git a/website/i18n/en.json b/website/i18n/en.json index de48b539..519c51ec 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -92,6 +92,8 @@ "frontend_creating_custom_ui": "Creating custom UI", "frontend_development": "Frontend development", "Development": "Development", + "frontend_experiment_card_types": "Type Of Cards", + "Cards": "Cards", "frontend_experiment_custom_card": "Custom Cards", "frontend_experiment_index": "Experimental UI", "frontend_index": "Home Assistant Frontend", diff --git a/website/static/img/en/frontend/experimental-ui-comparison.png b/website/static/img/en/frontend/experimental-ui-comparison.png new file mode 100644 index 00000000..24dce029 Binary files /dev/null and b/website/static/img/en/frontend/experimental-ui-comparison.png differ