šŸ’” UIX Forge - template cards, badges, rows, picture-elements, sections and add Sparks

Here is a potential feature request looking for upvotes (as Darryn expects 10 upvotes before adding it to Github):

When using UIX forge "Wrap":light_bulb: button in YAML code editor, in case the existing element already has templates, I think it may be helpful to auto-transform these into nested templates (eg {{ to <<), so they remain processed at the level they were before wrapping.

In my experience indeed, when I forge-wrap an existing card/row, most of the times I want the pre-existing templates to stay processed by the card/row. Shifting their processing to the forge level is sometimes an option of course, but often breaks them due to different context/scoping and requires a deeper revision.

So I thought the default wrapping behaviour, perhaps making it more beginner-friendly, should be to have existing templates stay processed at the level they were before wrapping. Changing their processing level should be the more advanced options that requires more editing (instead of the opposite currently).

It’s just an idea of course - not difficult anyway to manually replace {} with <> when needed. Amazed by the incredible Swiss Army knife that Uix has become !

1 Like

:megaphone: UIX 8.3.0 released :light_bulb:

UIX Forge features/fixes:

  • Fix possible console error on first load of forged element when mold is row.
  • Change Spark and Broker tooltip defaults to align with Home Assistant defaults, except arrow size is kept at 8px. See docs for updated defaults and vars to use to change.
  • badge spark
1 Like

UIX Forge Design proposal for feedback: layered config and UI editing.

A follow up on on going request for UI editing in UIX Forge which on exploring the concept also gives rise to layered config approach, separating an element’s base and template overrides, which would be required to support UI editing.

If you are keen, please review the design spec HERE. All input appreciated. :folded_hands:

Just to share my first encounter with uix-forge:

I have a blind friend who controls and monitors his heat pump, solar panels, etc. with home assistant. I’ve build a few dashboards for him, no visual information, mainly just simple tile cards with label and state info.

His problem with navigating those tile card with voice-over on his iPhone is that when he swipes to a tile, first the button information is read out (label + state), next swipe reads the label info and next swipe the state info. So in fact, for him all information was read out twice.

With a little help from ChatGPT I created a uix-forge, now with a single swipe the button is entered and label + state info is read out. Next swipe goes to next tile-card, the separate reading/speaking of individual label and state info is suppressed.

So a real QoL improvement for him using his dashboards.

Many kudos to Darryn for the excellent work.

6 Likes

I built a foundry file that hosts a bunch of macros and forges designed for laying out some guest management pages for HA systems that are used with rental properties. They work really well. I would love to be able to forge a dashboard and have it auto-create dedicated views using all of these cards so I don’t have to manually create each of the dedicated views.

I personally have several systems that only have one view that would be needed, but I manage several others that have 4 - 10 of these views! Anytime I need to tweak the layout I’m having to go and touch lots of views manually instead of just uploading a new foundry file to the systems and forcing a refresh.

I did try, at one point, to wrap a dashboard in a strategy: custom:uix-forge declaration but HA refused to let me save telling me that the strategy doesn’t exist (which I expected). It would be really awesome if I could effectively build my own custom dashboard strategies for easy sharing to systems.

So reading between the lines, would it be that you would wish for a custom dashboard strategy that includes forge cards, perhaps foundries and billets inline in the strategy definition, then ultimately when using the strategy you would just define/override billets.

Also, would this be a full dashboard strategy or just a view strategy. If doing one I would likely do both, and possibly also section strategy as they would all make sense.

Once you confirm the above I will work out a draft spec to review and discuss (it would be in a GitHub discussion).

1 Like

All of the above? :sweat_smile:

I know I’m asking something very much for my specific situation, but for my specific use case it would be a dashboard strategy that that encompasses sub-views. For me, I would define one or two variables and an entity or auto-entity glob and everything can be fully calculated from that.

The foundry that I’ve created and am using on 9 (yes 9!) different HA systems is publicly available here: homeassistant-blueprints/uix-forge at main Ā· tykeal/homeassistant-blueprints Ā· GitHub

There are effectively two uses of it:

  • A main dashboard auto-entities card (see Figure 1) that is a general overall collapsed view and that has a click action to go to a sub-view where I then have
  • All of the below defined in the view (see Figure 2)
    • A series of badges
    • Two uses of the current_guest forge.
    • An Atomic Calendar Revive card that consumes a calendar that can be calculated off of the same entity that would be driving all of this view

All of those forges and other cards in the sub-view could be calculated based on a single entity coming into the sub-view. I already do a lot of that sort of calculation in the current_guest forge card that I built. It’s a vertical stack composite of heading, mushroom-template-cards, and entities cards. so you can perhaps have an idea of what I’m shooting for here.

Here’s what the main dashboard (auto-guest_card forge) card looks like rendered in an HA with multiple rental listings
It was defined like this:

type: custom:uix-forge
foundry: auto-guest_card
entity: sensor.r*_check_in

Here’s what a rendered sub-view looks like. Everything on that page could easily have been calculated from the sub-view path which came from the auto-guest_card on the main dashboard

. The Current and upcoming sections are the current_guest forge that I only had to stick on variable into.

They were both defined as:

type: custom:uix-forge
foundry: current_guest
entity: sensor.rental_control_r22_event_0
forge:
  billets:
    doors:
      - frontdoor
      - r22

and

type: custom:uix-forge
foundry: current_guest
entity: sensor.rental_control_r22_event_1
forge:
  billets:
    doors:
      - frontdoor
      - r22

Some of the other HA systems I manage the doors billets are a lot larger with some exception cases (like a particular unit having an extra door that the others don’t have) or some where there is just a single front door and no other doors.

But in general if I could just do the following on a dashboard definition I’m pretty certain I could come up with a way to calculate everything else (hopefully)

strategy: custom:uix-forge
entity: sensor.suite*check_in
forge:
  billets:
    common_doors:
      - main_door
      - rear_door
   private_door_pattern:
      - s[[:digit:]]_*

Assuming I can use macros in billets I should be able to permute what I already have to work with a union of the common_doors billet and then something that takes the private_door_pattern and generates the finalized billet that would be consumed by the current_guest forge, or I rework that to be smarter in some way :slight_smile: Admittedly the pattern thing is very aspirational, as I just added more regex to what I’m doing :rofl: :sweat_smile:

1 Like

Thanks for sharing. So basically strategy with billets

No, macros not available in billets. You would need to use a macro wherever you use the billet.

After switching from card-mod to UIX for styling I wanted to give my dashboard a make-over and also use UIX forging. More specifically, I currently use a lot of mushroom cards for their templating capability, and a good starting point was my set of mushroom template badges, which were styled by card-mod and wrapped in a mod-card. The idea was to replace them by combining core badges with UIX and get a performance boost.

Sure enough, I got rid of the mod-card, was able to replicate all the styling (theme and state-dependent stuff such as icon animations) and I can forge / template the icon and name. I thought I was done until I realised the standard badge does not have a YAML entry for the state / primary text, it gets that from its entity (in my mushroom badge this was the content entry) and can thus not be replaced by a template.

Of course, I could create a template sensor and feed that as the entity to my badge but that is not the cleanest of solutions. Or am I missing something?

PS. do people experience significant performance increases with UIX forge, looking for a good excuse to clean an otherwise fine dashboard :wink:

:megaphone: UIX 8.4.0 Released :light_bulb: :partying_face:

Forge related features:

  • form spark with out of the box placement for use with UIX Forge blank card or forged markdown element. Event and Javascript UIX actions are form aware and will merge in form data to event/javascript data.
1 Like

Badges can show name as state using state_content: name

type: custom:uix-forge
forge:
  mold: badge
element:
  type: entity
  show_name: false
  show_state: true
  show_icon: true
  entity: sun.sun
  icon: |
    {{ "mdi:ab-testing" }}
  state_content: name
  name: |
    {{ "Test Name" }}

My developer resoponse is that performace will be gated by backend rsponding to templates. In Frontend templates are cached and kept in cache for 20s so if you go surfing around views/dashboards everything is nice and snappy. Overall UIX has seen lots of performance improvements across its lifetime - if you don’t use icon or entity styling via theme CSS vars you can get a micro improvement by turning off those options.

I was not very clear, I would like to show the state and the name, and template both. Unless I missed something I cannot template the state, only the name.


As for the performance, I always find a good reason to template every card, so I end up using a lot of mushroom cards (I also have a couple apexcharts wrapped in config template but those are hugely complicated and I don’t really want to rework those). I suspect the mushroom cards on the other hand can rather easily be transformed to standard cards with UIX forge. I also card mod all these mushroom cards and was wondering whether UIX style / forge with e.g. a standard tile card would perform better in that case.

Great work on UIX btw!

1 Like

For bagde config yes, but if you really wanted to you could use the search spark to achieve a replacement for both starting with a known name (I have templated that but it could be static).

type: custom:uix-forge
forge:
  mold: badge
  sparks:
    - type: search
      for: hui-entity-badge $
      query: state-display
      actions:
        replace_text:
          find: |
            {{ 'Name' }}
          replace: | 
            {{ 'Test State Replace' }}
    - type: search
      for: hui-entity-badge $ ha-badge $
      query: span.label
      actions:
        replace_text:
          find: |
            {{ 'Name' }}
          replace: | 
            {{ 'Test Name Replace' }}
element:
  type: entity
  entity: sun.sun
  show_name: true
  name: |
   {{ 'Name' }}
  state_content: name

Screenshot 2026-10-08 at 9.52.12 am

As always, any card that supports a direct style will apply faster than UIX which styles async. As for template performance, UIX has the slight upperhand with the caching already mentioned. Forge extras are easy inline macro config, billets, Foundries etc.

Thank you. :folded_hands:

1 Like

That is very cool, implemented it and pasted the full YAML below in case anybody else wants to see how far UIX can push a modest native heading badge :slight_smile:

type: custom:uix-forge
forge:
  mold: badge
  sparks:
    - type: search
      for: hui-entity-badge $
      query: state-display
      actions:
        replace_text:
          find: name
          replace: >
            {% set PV = states('number.systeem_vermogen') | float(0) | round(0)
            %}

            {% if states('sensor.wh_warmepumpe_betrieb') in
              ['heatpump_operationmode_defrost', 'heatpump_operationmode_oilrecirculation'] %}
              {{ state_translated('sensor.wh_warmepumpe_betrieb') }} 
            {% elif PV > 0 and
            states('sensor.wh_warmepumpe_leistungsanforderung') |

            float(0) > 0 %}
              {{ 'PV-' ~ (PV - 1000) }}
            {% else %} 
              {{ state_translated('sensor.wh_warmepumpe_betrieb') }} 
            {% endif %}
    - type: search
      for: hui-entity-badge $ ha-badge $
      query: span.label
      actions:
        replace_text:
          find: name
          replace: >
            {% if states('select.wh_system_system_operation_mode') ==
            'sys_operationmode_cooling' %}
              {{ 'werking' }}
            {% elif is_state('timer.summer_timer', 'active' ) %} {% set seconds
            = as_timestamp(state_attr('timer.summer_timer','finishes_at')) -
            as_timestamp(now()) %} {% set minutes = (seconds / 60) | round %} {{
            minutes | string + ' mins' }} {% elif
            is_state('sensor.wh_statistik_tagesarbeitszahl_heute', 'unknown' )
            %}
              {{ 'COP : na' }}
            {% else %}
              {{ 'COP : ' + states('sensor.wh_statistik_tagesarbeitszahl_heute') }}
            {% endif %}
element:
  type: entity
  name: name
  state_content: name
  entity: sensor.wh_warmepumpe_betrieb
  show_name: true
  color: var(--iconColor)
  icon: >
    {% if states('sensor.wh_warmepumpe_betrieb') ==
    'heatpump_operationmode_defrost' %}
      {{ 'mdi:snowflake-melt' }}
    {% elif states('sensor.wh_warmepumpe_leistungsanforderung') | float(0) > 0
    %}
      {{ 'local:material-symbols-light--mode-fan-outline-rounded' }}
    {% else %}
      {{ 'local:material-symbols-light--mode-fan-off-outline-rounded' }}
    {% endif %}
  tap_action:
    action: more-info
  double_tap_action:
    action: more-info
    entity: sensor.wh_statistik_tagesarbeitszahl_heute
  hold_action:
    action: more-info
    entity: select.wh_system_system_operation_mode
  uix:
    style:
      ha-badge $: >
        {% set werking = states('sensor.wh_warmepumpe_betrieb') %}

        {% if werking == 'heatpump_operationmode_oilrecirculation' %}
          {% set perc = 70 %}
        {% elif werking == 'heatpump_operationmode_defrost' %}
          {% set perc = 0 %}
        {% else %}
          {% set perc = states('sensor.wh_warmepumpe_leistungsanforderung') | float(0) %}
          {% if states('select.wh_system_system_operation_mode') == 'sys_operationmode_cooling' and states('sensor.wh_warmepumpe_betrieb') != 'heatpump_operationmode_hotwater' %}
            {% set perc = perc / 2 %}
          {% endif %}
        {% endif %}

        {% if perc > 0 %}
          ::slotted([slot="icon"]), ha-icon, ha-state-icon { 
            animation: spin {{ (0.3 / perc * 100 + 0.15) ~ "s"}} linear infinite;
          }
        {% endif %}

          @keyframes spin {
            0% { transform: rotate(0deg);}
            100% { transform: rotate(359deg);}
          }

        {% if states('sensor.wh_warmepumpe_betrieb') ==
        'heatpump_operationmode_defrost' %}
          ::slotted([slot="icon"]), ha-icon, ha-state-icon { 
            animation: cloudy 8s ease-in-out infinite, rainy 1.5s infinite;
          } 
        {% endif %}

            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }  
            @keyframes rainy {
              50% { clip-path: polygon(0 0, 100% 0, 100% 80%, 71% 80%, 50% 55%, 29% 80%, 0 80%); }
            }
1 Like

@tykeal An update on how I plan to move towards Strategy Dashboard / Views / Sections.

Step 1: is to confirm, code and make avilable layered config, where an element_base will sit alongside element. Any templates and config in element_base passes through unchanged. While this will not be key for Strategies, it does mean that this option is available, which will be important now we are seeing more template options available in stock Frontend (e.g. visibility conditions). This is up to PR review stage

Step 2: Once leyered config is available, next will be UI editing of Forge elements (card/badge/row). This is a piece that may close out 9.0.0 as a version - no final decision. Not related to Strategy spcifically unless we go a visual route. Its mainly code development time blocker.

Step 3: FInalise a spec for Stategies, work out any staging of development and progress to implementation. I epxect this could be up to a month before we are here.

2 Likes

Thank you for the update! This all sounds very exciting and I look forward to it!

1 Like

Again I can install it on 2026.9 even if displayed as Requires Home Assistant 2026.10.0 or greater. Same in new browser_mod. Is the prerequisite not correctly set or ignored from HA/HACS?

As per the last time we discussed this, it’s a HACS issue. UIX and Browser Mod have the correct HACS.json. If this bothers you please submit an issues to HACS.

I have in mind, that last time one of those updates missed the requirement setting. I only wanted to inform you, that this is the case as well. Don’t know, waphat to report to HACS if this is working for all of my other installed integrations without problems. I had at least 4 in the last months, where HACS deferred the updates as needed. I cannot report it there, that only uix and browser mod have the problems. What should they fix?

HACS.json is correct in both repos.

Not sure, could even be an issue with your local environment in some way. As discussed last time, I believe it is timing related. If you want to discuss this further please open a discussion on GitHub and I can guide you through what to raise with HACS.