UI eXtension Guides

Create calendar events from anywhere with UIX Broker

2026-10-05T00:00:00+00:00

Home Assistant’s calendar page is a natural place to create an event, but the action can be useful wherever the context happens: a dashboard, a room view, or a button UIX Broker has added to an existing page. This UIX Broker interaction opens Home Assistant’s own Create Event dialog in response to a custom action.

Home Assistant 2026.10.0

Home Assistant 2026.10.0 makes a Create Event button available on the Calendar page again. Use that built-in button when the Calendar page is where you want to work. This method is still useful when the action belongs elsewhere, including on UIX Broker UI directives.

How it works

ha-full-calendar, the element that supplies the dialog, is loaded only when Home Assistant needs it. The interaction below loads it on demand, retains one hidden instance below home-assistant, and calls its internal create-event action. Keeping the instance there is important: Home Assistant receives the resulting show-dialog event from that part of the DOM.

The interaction listens for ll-custom, the event sent by a Lovelace fire-dom-event action. The uix_create_event: true value is the deliberately narrow flag that tells it to open the dialog.

Add the UIX Broker interaction

Add this under uix_broker: in the UIX Broker configuration, or put it in a registered UIX Broker YAML file.

uix_broker:
  - realm: browser
    listen: ll-custom
    anchor: "&home-assistant $$ partial-panel-resolver"
    rules:
      - "@captured.uix_create_event": true
    directives:
      - type: javascript
        id: uix-create-event-js
        code: |
          if (!window.customElements.get('ha-full-calendar')) {
            window.loadCardHelpers().then(helpers => {
              helpers.createCardElement({ type: "calendar" });
            });
          }

          const haShadow = document.querySelector("home-assistant").shadowRoot;
          window.customElements.whenDefined("ha-full-calendar").then(() => {
            let fullCalendar = haShadow.getElementById("uix-full-calendar");
            if (!fullCalendar) {
              fullCalendar = document.createElement("ha-full-calendar");
              fullCalendar.id = "uix-full-calendar";
              fullCalendar.style.display = "none";
              haShadow.appendChild(fullCalendar);
            }

            fullCalendar.hass = anchor.hass;
            // Unset _activeView so _createEvent works outside the calendar panel.
            fullCalendar._activeView = undefined;
            fullCalendar._createEvent();
          });

This uses Home Assistant frontend internals

The interaction calls the private _createEvent() method on Home Assistant’s calendar element. If a future frontend release changes that element or method, inspect the Calendar panel and adjust this interaction.

Trigger it from a dashboard card

Any frontend element that accepts a Lovelace action can trigger the interaction. For example, add the following to a standard Button card:

type: button
name: Create Event
icon: mdi:calendar-plus
tap_action:
  action: fire-dom-event
  uix_create_event: true

The same tap_action can be placed on another card, a custom card, or a card feature that supports actions. It does not need to be on a page containing a Calendar card.

Trigger it from a UIX Broker button

UIX Broker’s UI directives can use the very same action. Add this button directive to an existing interaction that puts controls where you want them; replace the after anchor with the element after which the button should appear.

- type: button
  after: " for the surrounding UI>"
  label: Create Event
  icon: mdi:calendar-plus
  tap_action:
    action: fire-dom-event
    uix_create_event: true

This is the advantage over relying solely on the Calendar page’s button: one reusable event handler can be called by any Home Assistant action surface, including UIX Broker UI directives.

Result

After reloading UIX Broker configuration, use the button or action. Home Assistant opens its native event form, where you select the target calendar and enter the event details.

Map color tokens

2026-10-04T00:00:00+00:00

Home Assistant 2026.10.0 adds theme tokens for the vector map. They let a theme recolor the map independently of the dashboard’s light or dark mode—useful when, for example, a light theme needs the higher contrast of a dark map.

The tokens are based on the map-style feature. The palettes below correspond to the bundled default, colorful, natural, muted, gray, and toner map styles in Home Assistant Frontend 2026.10.0.

Theme YAML uses names without --

Use ha-color-map-land in a theme. Home Assistant exposes it to the map as the CSS custom property --ha-color-map-land.

The available tokens

Theme key	colors on the map
`ha-color-map-land`	Background and land
`ha-color-map-water`	Water
`ha-color-map-green`	Parks, woods, grass, leisure areas, wetlands, and sports grounds
`ha-color-map-area`	Residential, commercial, industrial, agricultural, parking, sand, rock, and similar land-use areas
`ha-color-map-building`	Building fill
`ha-color-map-building-outline`	Building outline
`ha-color-map-road`	Streets
`ha-color-map-road-major`	Motorways and trunk roads
`ha-color-map-road-outline`	Road outlines
`ha-color-map-transit`	Rail, subway, cycle, and foot routes
`ha-color-map-boundary`	Administrative and disputed boundaries
`ha-color-map-label`	Main place and road labels
`ha-color-map-label-halo`	Halo behind main labels
`ha-color-map-label-secondary`	POI, symbol, and house-number labels

What “curated equivalent” means

The bundled map styles have 45 individual color slots. Theme tokens expose 14 intentionally broader controls instead: for example, ha-color-map-green simultaneously colors parks, woods, grass, leisure areas, wetlands, and sports grounds. A single token therefore cannot preserve every separate green shade from the original natural or colorful palette.

The palette blocks below are curated equivalents. Each takes a representative color from the corresponding bundled style and applies it consistently to the feature group controlled by that token. This preserves the style’s overall character while giving themes a compact, practical palette to copy and customise. Use map_style: natural (or another named style) on a card when an exact, feature-by-feature rendition of the bundled cartography is required.

Add a palette to a theme

Add one of the blocks below under the name of your theme. The page theme mode does not change these values: paste the dark block to retain a dark map in a light theme, or paste the light block for the opposite effect.

My map theme:
  # Paste one complete light or dark palette here.
  ha-color-map-land: "#f4efe6"

These are theme-wide

Map tokens affect every vector map while the theme is active. For a one-card adjustment, use the map card’s map_style configuration instead.

Default

Home Assistant’s shipped default map: a warm, restrained palette built on colorful.

Default — light

  ha-color-map-land: "#f4efe6"
  ha-color-map-water: "#bcd9e8"
  ha-color-map-green: "#cfe1bf"
  ha-color-map-area: "#efe8dc"
  ha-color-map-building: "#e7ddca"
  ha-color-map-building-outline: "#dcccb2"
  ha-color-map-road: "#fcfaf8"
  ha-color-map-road-major: "#ebd4ab"
  ha-color-map-road-outline: "#e6dac7"
  ha-color-map-transit: "#e9dfce"
  ha-color-map-boundary: "#d6c3a4"
  ha-color-map-label: "#4a463d"
  ha-color-map-label-halo: "#faf8f5cc"
  ha-color-map-label-secondary: "#8d8676"

Default — dark

  ha-color-map-land: "#191b2c"
  ha-color-map-water: "#27357a"
  ha-color-map-green: "#28504b"
  ha-color-map-area: "#1d2034"
  ha-color-map-building: "#21243c"
  ha-color-map-building-outline: "#2a2e4a"
  ha-color-map-road: "#2b3052"
  ha-color-map-road-major: "#454d7d"
  ha-color-map-road-outline: "#1a1d33"
  ha-color-map-transit: "#2c3150"
  ha-color-map-boundary: "#3b4068"
  ha-color-map-label: "#e7ecf8"
  ha-color-map-label-halo: "#12141fcc"
  ha-color-map-label-secondary: "#959dbd"

Colorful

The unmodified VersaTiles colorful cartography: high contrast and noticeably colored roads, water, and land use.

Colorful — light

  ha-color-map-land: "#f8f4f0"
  ha-color-map-water: "#bfd9f2"
  ha-color-map-green: "#cdd9a9"
  ha-color-map-area: "#f5f1ed"
  ha-color-map-building: "#f2eae2"
  ha-color-map-building-outline: "#dfdbd7"
  ha-color-map-road: "#ffffff"
  ha-color-map-road-major: "#ffcc88"
  ha-color-map-road-outline: "#cfcdca"
  ha-color-map-transit: "#b1bbc4"
  ha-color-map-boundary: "#a6a6c8"
  ha-color-map-label: "#333344"
  ha-color-map-label-halo: "#ffffffcc"
  ha-color-map-label-secondary: "#66626a"

Colorful — dark

  ha-color-map-land: "#282725"
  ha-color-map-water: "#0c1c2a"
  ha-color-map-green: "#383f1f"
  ha-color-map-area: "#2b2826"
  ha-color-map-building: "#312c27"
  ha-color-map-building-outline: "#393734"
  ha-color-map-road: "#525252"
  ha-color-map-road-major: "#694710"
  ha-color-map-road-outline: "#353432"
  ha-color-map-transit: "#474e54"
  ha-color-map-boundary: "#575770"
  ha-color-map-label: "#dedef0"
  ha-color-map-label-halo: "#000000cc"
  ha-color-map-label-secondary: "#9e9ba2"

Natural

An earthy palette with blue water, greens that stand out, and warm road and building colors.

Natural — light

  ha-color-map-land: "#f2edde"
  ha-color-map-water: "#a6cbed"
  ha-color-map-green: "#bbcb87"
  ha-color-map-area: "#eee8e3"
  ha-color-map-building: "#ebe0d4"
  ha-color-map-building-outline: "#d2cdc7"
  ha-color-map-road: "#f7f7f7"
  ha-color-map-road-major: "#f8c581"
  ha-color-map-road-outline: "#c8c6c3"
  ha-color-map-transit: "#abb5be"
  ha-color-map-boundary: "#a0a0c2"
  ha-color-map-label: "#2e2e3f"
  ha-color-map-label-halo: "#ffffffcc"
  ha-color-map-label-secondary: "#625e66"

Natural — dark

  ha-color-map-land: "#272725"
  ha-color-map-water: "#01172b"
  ha-color-map-green: "#3d4614"
  ha-color-map-area: "#2c2925"
  ha-color-map-building: "#342e27"
  ha-color-map-building-outline: "#3e3b37"
  ha-color-map-road: "#525252"
  ha-color-map-road-major: "#694710"
  ha-color-map-road-outline: "#353432"
  ha-color-map-transit: "#474e54"
  ha-color-map-boundary: "#575770"
  ha-color-map-label: "#dedef0"
  ha-color-map-label-halo: "#000000cc"
  ha-color-map-label-secondary: "#9e9ba2"

Muted

A quieter version of the colorful map, with desaturated roads and land use.

Muted — light

  ha-color-map-land: "#f4f0ee"
  ha-color-map-water: "#d0dde9"
  ha-color-map-green: "#d6dcc5"
  ha-color-map-area: "#f0eeec"
  ha-color-map-building: "#eeeae6"
  ha-color-map-building-outline: "#e1dfdd"
  ha-color-map-road: "#f9f9f9"
  ha-color-map-road-major: "#f1d3ab"
  ha-color-map-road-outline: "#d2d1cf"
  ha-color-map-transit: "#bcc2c7"
  ha-color-map-boundary: "#b1b2c6"
  ha-color-map-label: "#41414c"
  ha-color-map-label-halo: "#ffffffcc"
  ha-color-map-label-secondary: "#6e6c71"

Muted — dark

  ha-color-map-land: "#272726"
  ha-color-map-water: "#181f27"
  ha-color-map-green: "#343829"
  ha-color-map-area: "#292827"
  ha-color-map-building: "#2d2b28"
  ha-color-map-building-outline: "#333231"
  ha-color-map-road: "#494949"
  ha-color-map-road-major: "#574328"
  ha-color-map-road-outline: "#323130"
  ha-color-map-transit: "#42464a"
  ha-color-map-boundary: "#4e4e5d"
  ha-color-map-label: "#c6c6d1"
  ha-color-map-label-halo: "#000000cc"
  ha-color-map-label-secondary: "#908e92"

Gray

An achromatic map that keeps attention on markers and labels.

Gray — light

  ha-color-map-land: "#f5f5f5"
  ha-color-map-water: "#d7d7d7"
  ha-color-map-green: "#eaeaea"
  ha-color-map-area: "#f2f2f2"
  ha-color-map-building: "#e9e9e9"
  ha-color-map-building-outline: "#dcdcdc"
  ha-color-map-road: "#fafafa"
  ha-color-map-road-major: "#d6d6d6"
  ha-color-map-road-outline: "#e0e0e0"
  ha-color-map-transit: "#d3d3d3"
  ha-color-map-boundary: "#999999"
  ha-color-map-label: "#2c2c2c"
  ha-color-map-label-halo: "#ffffffcc"
  ha-color-map-label-secondary: "#5f5f5f"

Gray — dark

  ha-color-map-land: "#272727"
  ha-color-map-water: "#000000"
  ha-color-map-green: "#323232"
  ha-color-map-area: "#292929"
  ha-color-map-building: "#2f2f2f"
  ha-color-map-building-outline: "#373737"
  ha-color-map-road: "#393939"
  ha-color-map-road-major: "#3a3a3a"
  ha-color-map-road-outline: "#2c2c2c"
  ha-color-map-transit: "#383838"
  ha-color-map-boundary: "#666666"
  ha-color-map-label: "#ededed"
  ha-color-map-label-halo: "#000000cc"
  ha-color-map-label-secondary: "#a2a2a2"

Toner

A crisp, high-contrast style: mostly white in light mode, nearly black in dark mode, with strongly defined transport features.

Toner — light

  ha-color-map-land: "#ffffff"
  ha-color-map-water: "#d8e7f7"
  ha-color-map-green: "#dfe7ca"
  ha-color-map-area: "#fffcfa"
  ha-color-map-building: "#fbf6f2"
  ha-color-map-building-outline: "#eceae7"
  ha-color-map-road: "#ffffff"
  ha-color-map-road-major: "#f2b561"
  ha-color-map-road-outline: "#b5b3af"
  ha-color-map-transit: "#87929c"
  ha-color-map-boundary: "#727197"
  ha-color-map-label: "#000000"
  ha-color-map-label-halo: "#ffffffcc"
  ha-color-map-label-secondary: "#3e3e3e"

Toner — dark

  ha-color-map-land: "#121211"
  ha-color-map-water: "#161f27"
  ha-color-map-green: "#262a19"
  ha-color-map-area: "#161413"
  ha-color-map-building: "#1c1916"
  ha-color-map-building-outline: "#252322"
  ha-color-map-road: "#6d6d6d"
  ha-color-map-road-major: "#895d18"
  ha-color-map-road-outline: "#33312f"
  ha-color-map-transit: "#5d656d"
  ha-color-map-boundary: "#7c7c9b"
  ha-color-map-label: "#ffffff"
  ha-color-map-label-halo: "#000000cc"
  ha-color-map-label-secondary: "#c4c4c4"

Tweak from a known base

Copy a complete palette first, then replace only the keys you need. For example, this starts with the dark colorful palette and makes water and motorways more vivid:

Colorful dark, blue water:
  # Include the dark Colorful palette above, then override these values.
  ha-color-map-water: "#103b66"
  ha-color-map-road-major: "#9a6217"

Theme values may use any CSS color Home Assistant can resolve, including rgb(), hsl(), named colors, and values built from other theme variables. Keep the alpha component on ha-color-map-label-halo where possible: it preserves the intended relationship between labels and the map beneath them.

Using UIX Broker to customize config/logs to open raw and focused standalone

2026-09-06T00:00:00+00:00

With the archiving of the Home Assistant Community Add-on: Log Viewer, Home Assistant may wish for a similar log viewing experience in a single focussed page using as much viewing space as possible for raw logs. This collection of UIX Broker interactions allows for just that by i. setting the System → Logs to open in a new page, ii. adding a button for secondary focussed log adjustable by input_select entity, iii. setting kiosk mode to the logs view and removing back button, and iv. setting raw more for core logs and turning off wrap lines by default.

Each UIX Broker interaction is explained separately. See Full interaction file to get full yaml to copy and paste into UIX Broker UI config or YAML file.

System → Logs link and additional button

Interaction listens in Browser realm to uix-broker-ready, uix-update and uix-update-custom-system-panel events. uix-broker-ready is fired on page load when UIX Broker is ready as well as when UIX Broker config is updated or UIX Broker YAML files reloaded. uix-update is fired after navigation when the panel state is ready. uix-update-custom-system-panel is a custom event used for notifying this interaction that entities used in javascript directive have changed. See Entity state subscription. The interaction is not reentrant so if it is already running when any of the listener events fire, it will not run twice and the current run will continue to completion.
The interaction anchor used is absolute compact select_tree form for home-assistant DOM element.
A panel rule is used to match when the fullUrlPath is config/system. Ths is the page where the Logs link shows.
A Host-element rule is used to only match if not running on Companion App, in which case hass.auth.external will be present.
A property directive is used with anchor being the Logs link. It’s target is set to _blank to open in a new tab.
A javascript directive to prepare button config, including setting by input_select entity if available. Examples of both quoted and camelCase variables are used. See the following directive for how these object variables are used.
A button directive to show an additional UIX Broker button to open up the secondary log set by input_select or hard coded value in 6 above. CSS variables are used to style the button based on config returned in 6.

uix_broker:
  - realm: browser #1
    reentrant: false
    listen:
      - uix-broker-ready
      - uix-update
      - uix-update-custom-system-panel
    anchor: "&home-assistant" #2
    rules:
      - type: panel #3
        path: fullUrlPath
        match: "config/system"
      - anchor: "&home-assistant" #4
        match: "{!.hass.auth.external}"
    directives:
      - type: property #5
        anchor: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item"
        set: target
        value: "_blank"
      - type: javascript #6
        id: config_path
        code: |
          const rawProvider = hass.states['input_select.log_provider']?.state;
          const provider = rawProvider ? rawProvider : 'supervisor';
          return {
            path: `/config/logs?provider=${provider}`,
            label: `Open ${provider.charAt(0).toUpperCase() + provider.slice(1)} logs`,
            icon: 'mdi:package-variant',
            'icon-color': 'red',
            backgroundColor: 'red',
            backgroundOpacity: '0.08'
          };
      - type: button #7
        after: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item div.content"
        # label: "@config_path.label" # Uncomment for label
        icon: "@config_path.icon" # comment if using label
        color: "@config_path['icon-color']"
        tap_action:
          action: url
          url_path: "@config_path.path"
        style: # Remove styles if using label and consider button variant and appearance config
          "--uix-icon-button-background-color": "@config_path.backgroundColor"
          "--uix-icon-button-background-opacity": "@config_path.backgroundOpacity"
          "--uix-button-border-color": '@config_path["icon-color"]'

System Logs

Config logs panel customizations

Listens in Browser realm to uix-broker-ready which is fired on page load when UIX Broker is ready as well as when UIX Broker config is updated or UIX Broker YAML files reloaded.
The interaction anchor used is absolute compact select_tree form for home-assistant DOM element.
A panel rule is used to match when fullUrlPath is config/logs
A search rule is used to provide a break glass way of viewing config logs without any customizations. e.g. /config/logs?noUixBroker
A property directive is used to set the ha-config-logs element to be in raw (details) mode. When logs can be condensed like for core provider, this forces the log view to be raw (details).
A property directive is used to set line wrap to false. This is set on error-log-card element which is used for raw (details) logs.
An event directive is used to fire an event on window to set Home Assistant Frontend Kiosk mode. This removes the sidebar.
A property directive is used, with its own rules, to set a default provider if one is not provided by URL search string provider=. Change to suit what you wish default to be. Here it is core.
A property directive is used to set the inline style of the back button to none. This makes the log fully standalone, removing temptation to browse elsewhere and, say, make this a duplicate dashboard tab.
A call directive is used to call style.setProperty on the home-assistant element to set --error-log-card-height. The call here sets it to calc(100vh - 255px + 32px) to account for the 16px top/bottom margin removed by the theme in (11).
Theme styling is added to the uix-config-yaml UIX Theme variable to reduce error-log-card margins to 0 and remove card borders.

  - realm: browser #1
    listen: uix-broker-ready
    anchor: "&home-assistant" #2
    rules:
      - type: panel #3
        path: fullUrlPath
        match:
          operator: contains
          value: "config/logs"
      - type: search #4
        path: noUixBroker
        match:
          exists: false
    directives:
      - type: property #5
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _detail
        value: true
      - type: property #6
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage div.content error-log-card"
        set: _wrapLines
        value: false
      - type: event #7
        target: window
        name: hass-kiosk-mode
        data:
          enable: true
      - type: property #8
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _selectedLogProvider
        value: "core" # Get list of provider from inspecting ha-core-logs and look at _logProviders property
        rules:
          # only apply this directive if the provider does not exist as a search string
          - type: search
            path: provider
            match:
              exists: false
      - type: property #9
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage $ div.toolbar div.toolbar-content ha-icon-button-arrow-prev"
        set: style.display
        value: "none"
        # Remove below directive if not theming reduced margin for the error log card
      - type: call #10
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --error-log-card-height
          - calc(100vh - 255px + 32px)

Theme for reduced margin for error-log-card

(11) Add the following to your UIX Theme.

  uix-config-yaml: |

    "ha-config-logs $ error-log-card $": |
      div.error-log-intro {
        margin: 0px;
      }
      ha-card {
        border: none;
      }

Config Logs

Entity state subscription

If you are using an input_select entity to adjust the provider for the button, it will not subscribe to updates as the javascript directive, like the template directive, does not perform any entity state subscription. To enable a subscription you can create a Server realm to Browser realm interaction to listen for state_changed updates in the Server realm and then fire an custom update event to the Browser.

If you are not using input_select.log_provider you do not need this interaction. The config logs interaction above has a default of supervisor hardcoded which you can adjust.

Listen in server realm

  - realm: server
    enabled: false
    listen: state_changed
    anchor: "&home-assistant"
    directives:
      - type: event
        name: uix-update-custom-system-panel
        rules:
          - type: captured
            path: data.entity_id
            match:
              or:
                - input_select.log_provider

Full YAML config

Full YAML config combining all the YAML code above into one file. If you are adding to an already configured UI Broker UI, or an existing YAML registered UIX Broker file, leave out uix_broker which will already be in the UI config/YAML file.

uix_broker:
  - realm: browser #1
    reentrant: false
    listen:
      - uix-broker-ready
      - uix-update
      - uix-update-custom-system-panel
    anchor: "&home-assistant" #2
    rules:
      - type: panel #3
        path: fullUrlPath
        match: "config/system"
      - anchor: "&home-assistant" #4
        match: "{!.hass.auth.external}"
    directives:
      - type: property #5
        anchor: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item"
        set: target
        value: "_blank"
      - type: javascript #6
        id: config_path
        code: |
          const rawProvider = hass.states['input_select.log_provider']?.state;
          const provider = rawProvider ? rawProvider : 'supervisor';
          return {
            path: `/config/logs?provider=${provider}`,
            label: `Open ${provider.charAt(0).toUpperCase() + provider.slice(1)} logs`,
            icon: 'mdi:package-variant',
            'icon-color': 'red',
            backgroundColor: 'red',
            backgroundOpacity: '0.08'
          };
      - type: button #7
        after: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item div.content"
        # label: "@config_path.label" # Uncomment for label
        icon: "@config_path.icon" # comment if using label
        color: "@config_path['icon-color']"
        tap_action:
          action: url
          url_path: "@config_path.path"
        style: # Remove styles if using label and consider button variant and appearance config
          "--uix-icon-button-background-color": "@config_path.backgroundColor"
          "--uix-icon-button-background-opacity": "@config_path.backgroundOpacity"
          "--uix-button-border-color": '@config_path["icon-color"]'
  - realm: browser #1
    listen: uix-broker-ready
    anchor: "&home-assistant" #2
    debug: true
    rules:
      - type: panel #3
        path: fullUrlPath
        match:
          operator: contains
          value: "config/logs"
      - type: search #4
        path: noUixBroker
        match:
          exists: false
    directives:
      - type: property #5
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _detail
        value: true
      - type: property #6
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage div.content error-log-card"
        set: _wrapLines
        value: false
      - type: event #7
        target: window
        name: hass-kiosk-mode
        data:
          enable: true
      - type: property #7
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _selectedLogProvider
        value: "core" # Get list of provider from inspecting ha-core-logs and look at _logProviders property
        rules:
          # only apply this directive if the provider does not exist as a search string
          - type: search
            path: provider
            match:
              exists: false
      - type: property #9
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage $ div.toolbar div.toolbar-content ha-icon-button-arrow-prev"
        set: style.display
        value: "none"
        # Remove below directive if not theming reduced margin for the error log card
      - type: call #10
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --error-log-card-height
          - calc(100vh - 255px + 32px)
  - realm: server
    listen: state_changed
    anchor: "&home-assistant"
    directives:
      - type: event
        name: uix-update-custom-system-panel
        rules:
          - type: captured
            path: data.entity_id
            match:
              or:
                - input_select.log_provider

Styling adaptive popover dialogs - date picker example

2026-07-15T00:00:00+00:00

Home Assistant Frontend 2026.5 brought in a new adaptive popover dialog. It is like standard dialogs but on desktop shows a smaller dialog in place targeted to the element using the dialog, and on mobile uses a bottom sheet. The date picker dialog now uses adaptive popover dialog.

UI eXtension can style the adaptive popover using uix-dialog-yaml theming.

The example below shows an entities row with a date entity which will show the adaptive popover. The theme styling sets selected date(s) to red, and hover to red with opacity of 0.2. The theme yaml selector uses UIX Styling Host/element path selection to only target dialogs of type-dialog-date-picker.

CSS selectors

The CSS selector for hover, calendar-month:not(.dummy)::part(button selected):hover, includes a class .dummy that never exists. This is so this CSS selector always matches at a higher specificity (0,2,2) than the hover CSS, calendar-month::part(button):hover (0,1,2), that sets the background with opacity 0.2, which is already using !important to override the standard CSS. This technique can be used when you need to make sure that a CSS selector will get higher specificity as the :not(.dummy) class selector will always add +1 for class specificity.

uix-date-picker-selection: # theme name
  uix-theme: uix-date-picker-selection # setting UIX theme to theme name

  uix-dialog-yaml: |
    "&.type-dialog-date-picker": |
      calendar-month::part(range-inner),
      calendar-month::part(range-start),
      calendar-month::part(range-end),
      calendar-month::part(selected),
      calendar-month::part(selected):hover,
      calendar-month:not(.dummy)::part(button selected):hover {
        background-color: red !important;
      }
      calendar-month::part(button):hover {
        background-color: rgba(255, 0, 0, 0.2) !important;
      }

Styling date picker adaptive popover dialog

Using UIX Forge more-info spark combined with UIX actions

2026-07-15T00:00:00+00:00

Elements used:

UIX Forge more-info spark
more-info UIX action

A vertical-stack is used with a heading card containing badges that use UIX actions to show specific more-info pages - history, settings and related.

The example YAML is for a grid section in a Sections dashboard.

type: grid
cards:
  - type: vertical-stack
    cards:
      - type: heading
        icon: mdi:weather-partly-cloudy
        heading: Weather
        badges:
          - type: button
            icon: mdi:chart-box-outline
            tap_action:
              action: fire-dom-event
              uix:
                action: more-info
                data:
                  entity: weather.demo_weather_south
                  view: history
          - type: button
            icon: mdi:cog-outline
            tap_action:
              action: fire-dom-event
              uix:
                action: more-info
                data:
                  entity: weather.demo_weather_south
                  view: settings
          - type: button
            icon: mdi:information-outline
            tap_action:
              action: fire-dom-event
              uix:
                action: more-info
                data:
                  entity: weather.demo_weather_south
                  view: related
        tap_action:
          action: more-info
          entity: weather.demo_weather_south
        heading_style: title
      - type: custom:uix-forge
        forge:
          mold: card
          sparks:
            - type: more-info
              entity: weather.demo_weather_south

More-info spark in vertical stack with heading card and more-info action badges

Developer tools migration

2026-07-08T00:00:00+00:00

Starting in Home Assistant 2026.8, Developer Tools will be renamed to Tools. This change will impact UIX Styling using the theme item uix-developer-tools(-yaml).

As the current Developer Tools panel (ha-panel-developer-tools) and new Tools panel (ha-panel-tools) are both config panels (ha-panel-config), which can be styled in theme with uix-config(-yaml), the following changes will take place in UIX Styling.

The theme item uix-developer-tools(-yaml) will cease to apply in Home Assistant 2026.8 as ha-developer-tools-panel will cease to exist.
There will be NO direct replacement theme item.
The new Tools panel (ha-panel-tools) can be styled using uix-config(-yaml).

You can prepare for this change now by swapping out any existing uix-developer-tools(-yaml) theme item with a uix-config(-yaml) theme item, as shown in the example theme code below.

Existing theme example, changing card heading color on the YAML tab to red.

  uix-developer-tools-yaml: |
    developer-yaml-config $ ha-card $: |
      :host {
        --ha-card-header-color: red;
      }

New theme code which will work prior to and after 2026.8 is released.

  uix-config-yaml: |
    ha-panel-developer-tools,ha-panel-tools $:
      developer-yaml-config $ ha-card $: |
        :host {
          --ha-card-header-color: red;
        }

Home Assistant output

Using UIX Forge tooltip and attribute sparks for tooltips

2026-04-12T00:00:00+00:00

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses the attribute spark and the tooltip spark to add rich, customizable tooltips to Home Assistant cards and elements.

Forge elements

All UIX Forge documentation will describe the card, row, badge, section, picture-element as element as indeed, a forged element is not restricted to being a card, but can be any type supported by UIX Forge mold type

The attribute spark lets you set or remove HTML attributes on elements inside a forged element’s shadow DOM. The tooltip spark adds a fully featured tooltip — with placement, delay, skidding, and CSS control — powered by UIX Forge.

Scenario 1: Adjust a title attribute with the attribute spark

A browser will display a native tooltip for any element that has a title attribute. The attribute spark can target an element by CSS selector and change its title attribute to any value you choose.

In the example below a tile card is forged and the attribute spark adds a title attribute whose value is a Jinja template. The template uses relative_time to show how long ago the entity last changed, producing a browser native tooltip that updates each time the card renders.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: attribute
      attribute: title
      action: add
      value: |
        {{ relative_time(states[config.element.entity].last_changed) }} ago
element:
  type: tile
  entity: light.bed_light

Home Assistant output — adjusted title tooltip

Native browser tooltips have limited styling and behaviour options. A better approach is to use the attribute spark to remove the existing title attribute first, then add the tooltip spark to provide a fully featured replacement.

In this example a weather forecast card is forged. The attribute spark removes the native title from the location name element, and the tooltip spark adds a wind speed tooltip to the temperature/attribute area using Jinja templates to pull live state attributes.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: attribute
      for: "hui-weather-forecast-card $ div.name"
      attribute: title
      action: remove
    - type: tooltip
      for: "hui-weather-forecast-card $ div.temp-attribute"
      content: "Wind: {{ state_attr(config.element.entity, 'wind_speed') }} {{ state_attr(config.element.entity, 'wind_speed_unit') }} ({{ state_attr(config.element.entity, 'wind_bearing') }})"
element:
  show_current: true
  show_forecast: false
  type: weather-forecast
  entity: weather.carlingford
  forecast_type: daily

Home Assistant output — tooltip spark replacing native title

Removing the title attribute first

Always remove the native title attribute before adding the tooltip spark to avoid both appearing at the same time.

The tooltip spark provides show_delay and hide_delay options (in milliseconds) to control how quickly the tooltip appears and disappears. This is useful when tooltips should only show after intentional hover, or should linger longer after the cursor leaves.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      content: "I appear after a short pause and stay a little longer"
      show_delay: 600
      hide_delay: 300
element:
  type: tile
  entity: sun.sun

Home Assistant output — tooltip with custom show and hide delays

Delay tips

A show_delay of 400–600 ms is a good starting point for cards where you want to avoid the tooltip flashing during normal interaction. Use a small hide_delay (100–200 ms) to let the cursor move away without the tooltip feeling sticky.

Scenario 4: Rich CSS styles, placement, and skidding

The tooltip spark also supports placement control and positional fine-tuning with placement, skidding, and distance options. These allow you to position the tooltip relative to the element and nudge it along or away from the element. Custom CSS can be applied with UIX Styling on the forge to create rich visual tooltip designs.

The supported placements are top, bottom, left, and right (with optional -start and -end variants such as top-start or bottom-end).

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      content: "Rich styled tooltip — bottom right"
      placement: bottom-end
      skidding: 50
      distance: 8
      show_delay: 400
      hide_delay: 150
  uix:
    style: |
      :host {
        --uix-tooltip-background-color: #4a4aff;
        --uix-tooltip-content-color: #e0e0ff;
        --uix-tooltip-border-width: 1px;
        --uix-tooltip-border-style: solid;
        --uix-tooltip-border-color: #4a4aff;
        --uix-tooltip-border-radius: 8px;
        --uix-tooltip-padding: 0.85em;
        --uix-tooltip-box-shadow: 0 4px 16px rgba(74, 74, 255, 0.4);
      }
element:
  type: tile
  entity: sun.sun

Home Assistant output — richly styled tooltip with custom placement

Placement and skidding

skidding shifts the tooltip along the axis of the placement edge (e.g. left/right for top or bottom placements). distance controls how far away from the element the tooltip appears. Both accept positive and negative values.

Testing dialogs in the browser console

2026-04-11T00:00:00+00:00

When developing or troubleshooting UIX dialog styles it is useful to be able to trigger dialogs on demand without navigating to the relevant part of the UI. This guide provides a centralized, linkable reference of browser console snippets that let you do exactly that.

Open the browser developer tools with F12 (or Cmd ⌥ I on macOS) and paste any of the snippets below into the Console tab.

Trigger a UIX update notification

The following dispatches a persistent hass-notification event on the root element, simulating the banner that appears when UIX has been updated.

document.querySelector("home-assistant").dispatchEvent(new CustomEvent("hass-notification", { detail: { message: "UIX has been updated", duration: -1, dismissable: true }, bubbles: true, composed: true }));

duration: -1 keeps the notification visible until it is manually dismissed. Change the message value to test other notification texts.

Trigger an alert dialog

window.cardHelpers exposes the same dialog helpers that Home Assistant cards use internally. The following opens an alert dialog:

window.cardHelpers.showAlertDialog(document.querySelector("home-assistant"), { title: "Restart Home Assistant?", text: "Some text" });

Replace title and text with the values you want to test. The dialog type class reported in the DOM will be type-dialog-box, which you can use to scope CSS in your UIX theme.

Finding the dialog type class

With the dialog open, open the Elements panel in developer tools and inspect the last child of the shadow root. The outer element is the dialog parent (e.g. ). Its type class (e.g. type-dialog-box) can be used to scope your UIX theme CSS.

Trigger a confirmation dialog

A confirmation dialog (with Cancel and Confirm buttons) can be opened with showConfirmationDialog:

window.cardHelpers.showConfirmationDialog(document.querySelector("home-assistant"), { title: "Restart?", text: "Are you sure you want to restart Home Assistant?", confirmText: "Restart", dismissText: "Cancel" });

Inspect UIX variables on a dialog element

Once a dialog is open and visible in the Elements panel, select the inner dialog element (e.g. ha-dialog) and run the following in the Console to see all UIX variables including params:

$0._uix[0].variables

$0 refers to the currently selected element in the Elements panel. The params object contains the values passed to the dialog, such as title and text, which you can use in UIX Jinja2 templates to target a specific dialog.

Styling the dialogs you are testing

For a complete guide on how to style dialogs using UIX themes — including template examples and shadow DOM targeting — see Styling dialogs with UI eXtension.

Using UIX Forge event and button sparks to change inline tile card feature

2026-04-11T00:00:00+00:00

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses UIX Forge to forge a tile element with inline feature which can be changed using the event spark and button spark.

Forge elements

Template macros

This guide relies heavily on template macros. To first understand the macros and their output, a markdown card will be used as the forged element. This is a good way to check your macros are working as expected before proceeding to use in any final solution.

Four macros are used in the final solution. They are:

feature_options(): Returns an array of lookup dicts to provide an icon and a feature. Uses returns: true returns method as the macro returns an array.
feature_max_index(): Returns the length of the array returned by feature_options() minus 1 to give a zero-based index. Also uses the returns method as the macro returns an integer.
feature_next_index(index): Returns the next zero-based index available in the array, rolling over back to start of the array. Takes a param of index and uses returns method as the macro returns an integer.
feature_item(index, key): Returns the item by key of the dict at the index in the feature_options() array. It takes params of index and key.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {%- do returns(options) -%}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
element:
  type: markdown
  content: |
    **feature_options()**: {{ feature_options() }}

    **feature_max_index()**: {{ feature_max_index() }}

    **feature_next_index(0)**: {{ feature_next_index(0) }}
    **feature_next_index(1)**: {{ feature_next_index(1) }}

    **feature_item(0, 'icon')**: {{ feature_item(0, 'icon') }}
    **feature_item(0, 'feature')**: {{ feature_item(0, 'feature') }}

    **feature_item(1, 'icon')**: {{ feature_item(1, 'icon') }}
    **feature_item(1, 'feature')**: {{ feature_item(1, 'feature') }}

Macro testing output

Switch to tile element

Now the macros are well defined and ready to be used we can start building the forged tile element. Here a static index is used for feature_item(). This will change once the event spark is added.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(0, 'feature') }}"
  features_position: inline

Forged tile cards

Output with two copies of the forge code, one as per above, and one changing the index from 0 to 1

Add event spark

Next we will use the event spark for the forged element to be able to use data received from fire-dom-event.

The event spark needs a forge_id. Here the ID used is made up of a prefix and the entity from the element config.

In the forged element we now use data from the event spark as input to feature_item(). As per event spark guidelines, our event data will not be available when first loaded, so default(0) is used. The data will also come as a string so we cast to int.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}"
  features_position: inline

Use buttons to test

First up, we will use two standard buttons to test the solution so far. We need to send 0 and 1 as index to the forge_id light_tile_light.bed_light with uix_forge fire-dom-event.

Two buttons will be used using the YAML below.

show_name: true
show_icon: false
type: button
name: Feature Index 0
grid_options:
  columns: 6
  rows: 1
tap_action:
  action: fire-dom-event
  uix_forge:
    - forge_id: light_tile_light.bed_light
      data:
        index: 0 # one button with 0, one button with 1

Using buttons to send spark event data

Full solution

Now that testing with external buttons show that the event spark is working, we can now use a button spark to add a button adjacent to the inline feature to change the inline feature.

The button spark has the following specific config:

after: is set to hui-tile-card $ hui-card-features.
icon: is set to {{ feature_item(feature_next_index(uixForge.event.index | default(0) | int), 'icon') }}
forge_id: of the fire-dom-event for uix_forge is set to light_tile_{{config.element.entity}} to match the event spark’s forge_id.

Finally we style the forged tile element to adjust the spacing of the tile to give the feature more room and have the tile icon and the button added to take minimal space.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
    - type: button
      after: hui-tile-card $ hui-card-features
      icon: >-
        {{ feature_item(feature_next_index(uixForge.event.index | default(0) |
        int), 'icon') }}
      color: grey
      tap_action:
        action: fire-dom-event
        uix_forge:
          - forge_id: light_tile_{{config.element.entity}}
            data:
              index: >-
                {{ feature_next_index(uixForge.event.index | default(0) | int)
                }}
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}"
  features_position: inline
  uix:
    style: |
      ha-tile-icon {
        flex: 0;
      }
      ha-tile-info {
        flex: 1;
      }
      hui-card-features {
        flex: 2;
        padding-right: 0px !important;
      }

Full solution

Extra - features as an object

Up until now we have used and set features as a string, assigning the output from feature_item(index, 'feature') to - type: under features:. To extend the solution we can use features as an object. Careful construction of the object is needed here as it is set as a Python dict.

Changes required:

feature in the options array becomes an array with a single dict. For simple features the dict is { 'type': 'feature-string' }
features requiring more than just type can be added as a dict as the sole member of the array. In the example here, a custom feature of a button is used.
feature_item() now returns an object rather than a string and uses returns method.
features: config uses the output from feature_item() macro directly.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': [ { 'type': 'light-brightness' } ] }, 
            {'icon': 'mdi:invert-colors', 'feature': [ { 'type': 'light-color-favorites' } ] },
            {'icon': 'mdi:cog', 'feature': [ { 'type': 'custom:service-call', 'entries': [ { 'type': 'button', 'icon': 'mdi:cog', 'thumb': 'default', 'tap_action': { 'action': 'more-info', 'target': { 'entity_id': 'light.bed_light' }, 'data': {} } } ] } ] }
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {% do returns(feature_options() | length - 1) %}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      returns: true
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%}  {%- set option = options[index][key] -%} {% do
        returns(option) %} {%- endif -%}
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
    - type: button
      after: hui-tile-card $ hui-card-features
      icon: >-
        {{ feature_item(feature_next_index(uixForge.event.index | default(0) |
        int), 'icon') }}
      color: grey
      tap_action:
        action: fire-dom-event
        uix_forge:
          - forge_id: light_tile_{{config.element.entity}}
            data:
              index: >-
                {{ feature_next_index(uixForge.event.index | default(0) | int)
                }}
element:
  type: tile
  entity: light.bed_light
  features: |
    {{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}
  features_position: inline
  uix:
    style: |
      ha-tile-icon {
        flex: 0;
      }
      ha-tile-info {
        flex: 1;
      }
      hui-card-features {
        flex: 2;
        padding-right: 0px !important;
      }

Full solution

Using UIX Forge event spark to change a camera view

2026-04-06T00:00:00+00:00

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses UIX Forge to forge a picture view element which can be changed from section header badge buttons using the event spark.

Forge elements

Template entities in picture-entity cards

With UIX Forge, all forged element configs accept templates. This includes using a template for the element’s entity. To show this in the most basic form, we can include a simple string template for the entity and camera_image in a picture-entity card.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ 'camera.camera_1' }}"
  camera_image: "{{ 'camera.camera_1' }}"

picture-entity - Camera 1

Now change to another camera by adjusting the string template. This is to show how we will build up to using the event spark to change this using an event.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ 'camera.camera_2' }}"
  camera_image: "{{ 'camera.camera_2' }}"

picture-entity - Camera 2

Add event spark

The event spark config includes a forge_id. This allows the event spark to receive event data sent by Home Assistant Frontend events using fire-dom-event.

After adding an event spark, the forged element’s uixForge variable will include an event dictionary which will include the event data sent by a Home Assistant Frontend event. By default the event dictionary will be empty so any templates will need to handle this with either default() handling or using similar logic to handle data not being in the dictionary on first view.

For the picture-element the following is updated to implement the event spark:

Add event spark with forge_id: picture_camera.
Add templates with defaults for entity and camera_image.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event # event spark
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  # entity and camera_image use template with default to camera.camera_1
  entity: "{{ uixForge.event.entity | default('camera.camera_1') }}"
  camera_image: "{{ uixForge.event.entity | default('camera.camera_1') }}"

Add button badges

Now the picture-entity is ready to update its entity and camera_image from Home Assistant Frontend event using action: fire-dom-event from any Home Assistant element or any custom element that supports fire-dom-event actions which is the majority of custom elements.

For the picture-entity example, we add some button badges to a heading card inserted before the picture-element. We use three badges with different icons, and different data for our forge_id in the uix_forge config for fire-dom-event action. Once this done, the button badges can be used to control the camera entity and image.

type: heading
heading: Cameras
heading_style: title
badges:
  - type: button
    icon: mdi:numeric-1-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_1
  - type: button
    icon: mdi:numeric-2-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_2
  - type: button
    icon: mdi:numeric-3-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_3

picture-entity - dynamic camera views

Update to use a macro

As the same template is used for entity and camera_image a macro can be used to save having the default in multiple places. While this actually extends the number of lines of yaml config, it moves the default cameras image to one place in the config.

Macros and variables

Jinja macros are isolated from the where they are used so any variables you wish to use need to be a param of the macro

The macro added uses a param of uixForge which will be passed through from the updated template used for entity and camera_image.

type: custom:uix-forge
forge:
  mold: card
  macros:
    camera_entity:
      params:
        - uixForge
      template: "{{ uixForge.event.entity | default('camera.camera_1') }}"
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ camera_entity(uixForge) }}"
  camera_image: "{{ camera_entity(uixForge) }}"

UI eXtension Guides

Create calendar events from anywhere with UIX Broker

How it works

Add the UIX Broker interaction

Trigger it from a dashboard card

Trigger it from a UIX Broker button

Result

Map color tokens

The available tokens

What “curated equivalent” means

Add a palette to a theme

Default

Default — light

Default — dark

Colorful

Colorful — light

Colorful — dark

Natural

Natural — light

Natural — dark

Muted

Muted — light

Muted — dark

Gray

Gray — light

Gray — dark

Toner

Toner — light

Toner — dark

Tweak from a known base

Using UIX Broker to customize config/logs to open raw and focused standalone

System → Logs link and additional button

Config logs panel customizations

Theme for reduced margin for error-log-card

Entity state subscription

Full YAML config

Styling adaptive popover dialogs - date picker example

Using UIX Forge more-info spark combined with UIX actions

Developer tools migration

Using UIX Forge tooltip and attribute sparks for tooltips

Scenario 1: Adjust a title attribute with the attribute spark

Scenario 2: Remove the title attribute and add the tooltip spark

Scenario 3: Adjust tooltip show and hide delay times

Scenario 4: Rich CSS styles, placement, and skidding

Testing dialogs in the browser console

Trigger a UIX update notification

Trigger an alert dialog

Trigger a confirmation dialog

Inspect UIX variables on a dialog element

Styling the dialogs you are testing

Using UIX Forge event and button sparks to change inline tile card feature

Template macros

Switch to tile element

Add event spark

Use buttons to test

Full solution

Extra - features as an object

Using UIX Forge event spark to change a camera view

Template entities in picture-entity cards

Add event spark

Add button badges

Update to use a macro