developers.home-assistant/docs/frontend_creating_custom_ui.md

title
Creating custom UI

State card

If you would like to use your own State card without merging your code into home-assistant-polymer you can create your own implementation.

Put the element source file and its dependencies in www/custom_ui/ directory under your Home Assistant configuration directory.

For example if creating a state card for the light domain named state-card-my-custom-light put state-card-my-custom-light.html in www/custom_ui/.

That file should implement <state-card-my-custom-light> tag with Polymer.

In state-card-my-custom-light.html you should use <link rel="import"> to import all the dependencies not used by Home Assistant's UI. Do not import any dependencies used by the Home Assistant UI. Importing those will work in development: 1 mode, but will fail in production mode.

1. In the customize: section of the configuration.yaml file put custom_ui_state_card: state-card-my-custom-light.
2. In the frontend section use extra_html_url to specify the URL to load.

Example:

configuration.yaml:

homeassistant:
  customize:
    light.bedroom:
      custom_ui_state_card: state-card-my-custom-light

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-my-custom-light.html

www/custom_ui/state-card-my-custom-light.html:

<script>
{
  // show the version of your custom UI in the HA dev info panel (HA 0.66.0+):
  const _NAME = 'My custom light';
  const _URL = 'https://home-assistant.io/developers/frontend_creating_custom_ui/';
  const _VERSION = '20180312';

  if (!window.CUSTOM_UI_LIST) window.CUSTOM_UI_LIST = [];
  window.CUSTOM_UI_LIST.push({
    name: _NAME,
    url: _URL,
    version: _VERSION
  });
}
</script>
<dom-module id='state-card-my-custom-light'>
  <template>
    <style>

    </style>
    <textarea>[[_toStr(stateObj)]]</textarea>
  </template>
</dom-module>

<script>
class StateCardMyCustomLight extends Polymer.Element {
  static get is() { return 'state-card-my-custom-light'; }

  static get properties() {
    return {
      // Home Assistant object
      hass: Object,
      // inDialog is true if shown as more-info-card
      inDialog: {
        type: Boolean,
        value: false,
      },
      // includes state, config and more information of the entity
      stateObj: Object,
    };
  }

  _toStr(obj) {
    return JSON.stringify(obj, null, 2);
  }
}
customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
</script>

Some browsers don't support latest ECMAScript standards, these require a separate ES5 compatible file (extra_html_url_es5).

For more possibilities, see the Custom UI section on our Examples page.

More info dialog

Introduced in Home Assistant 0.69.

Similar to the custom State card, if you would like to use your own More info dialog you can create your own implementation.

Following a similar example, if creating a more info dialog a light named more-info-my-custom-light put more-info-my-custom-light.html in www/custom_ui/.

1. In the customize: section of the configuration.yaml file put custom_ui_more_info: more-info-my-custom-light.
2. In the frontend section use extra_html_url to specify the URL to load.

Example:

configuration.yaml:

homeassistant:
  customize:
    light.bedroom:
      custom_ui_more_info: more-info-my-custom-light

frontend:
  extra_html_url:
    - /local/custom_ui/more-info-my-custom-light.html