Skip to content

UIX Forge

UIX Forge provides a way to forge Home Assistant elements allowing for templates for all of the element's configuration, as well as additional advanced augmentation of the element through UIX Forge Sparks.

Home Assistant elements supported are card, badge, row, section and picture-element. Cross-context molds allow embedding one element type in a different parent context, such as a card used as a row inside an entities card — see Cross-context molds.

See Forge for complete forge config reference.

Foundries

A foundry is a server-stored UIX Forge template that lets you define reusable forge, element, and uix configs once and share them across many cards. Reference a foundry with the foundry: key and override only what you need locally.

See Foundries for a full guide including merge behaviour, nested foundries, and management via the integration options.

Sparks

Sparks are optional behaviours that you add to the forge.sparks list. Each spark has a type key and its own options.

Available sparks:

  • 💬 Tooltip — attach a styled tooltip to any element inside the forged element.
  • Button - attach a styled button (ha-button) with actions as a sibling before or after any element within the forged element.
  • 🏷 Attribute — add, replace or remove an attribute of any element within the forged element.
  • ⚡ Event — receive DOM events from fire-dom-event actions and expose their data as template variables.
  • ⭐ Tile Icon — insert a ha-tile-icon element as a sibling before or after any element within the forged element.
  • 🛡 State badge - insert a state-badge element as a sibling before or after any element within the forged element.
  • Grid - apply CSS Grid layout to any container element inside a forged element
  • 🔍 Search - queries a container within a forged element with a CSS selector and optional inner text to find, then apply mutations to the found element(s).
  • Map — preserve the zoom level and centre of a map card across Home Assistant state updates.
  • Lock — overlay a lock icon on any element to block interaction until the user passes a PIN, passphrase, or confirmation challenge.
  • Background — inject a background layer (colour, image, video, or live camera) behind any element within the forged element.
  • Theme — apply a Frontend theme to the forged element or one of its descendants.