Skip to content

πŸš€πŸš€πŸš€ V2.0 for More User Friendly UI Editor

Choose a tag to compare

@cataseven cataseven released this 12 Jun 16:29
31fdf08

The visual editor got a big usability makeover. Your existing YAML keeps working exactly as before β€” nothing to migrate.

image

✨ What's new

Tabs inside each card

Every card in the editor is now organized into three tabs β€” General, Entities and Scenarios β€” so you only see what you're working on. The Entities and Scenarios tabs show live counters, and the Entities counter turns orange if your filters match nothing.

πŸ“ Editor β†’ open a card β†’ tab bar at the top

Collapsible scenarios

Scenarios are folded into compact rows showing their number, color dot, condition and text. Open one to edit it, duplicate it with the copy button, or reorder with the ↑ ↓ arrows (works on phones and tablets too). A small hint reminds you that the first matching scenario wins.

πŸ“ Card β†’ Scenarios tab

Live preview

While a scenario is open, a preview chip shows exactly how it will look β€” icon, color and text β€” as if that scenario matched right now. Full templates ({% set %}, filters, etc.) are rendered by your Home Assistant server, so even complex texts preview correctly.

πŸ“ Card β†’ Scenarios tab β†’ open a scenario β†’ Preview

One-tap template variables

Chips under the Text field insert ready-made variables like {{ on_count }} right at your cursor. Hover a chip to see its current value.

πŸ“ Card β†’ Scenarios tab β†’ open a scenario β†’ under the Text field

styles:
  - condition: if_any_on
    text: "{{ on_count }} on"
    icon: mdi:lightbulb-on
    color: orange

A single Entities panel

The two old entity boxes are now one panel with three modes β€” All in domain, Only selected, Exclude selected β€” plus a live "N entities match" counter. Switching between modes keeps your selections, so you can compare without re-picking everything.

πŸ“ Card β†’ Entities tab

# Only selected
include:
  - switch.pool

# …or Exclude selected
exclude:
  - switch.garden_lights

Test your template conditions

Each template condition now has a Test Template Condition button that runs it on your server and shows βœ“ true / βœ— false instantly β€” no more saving and guessing. Template fields are also bigger and easier to edit.

πŸ“ Card β†’ Scenarios tab β†’ open a scenario β†’ Template Conditions

styles:
  - condition: if_any_on
    text: Pool is on
    template_conditions:
      - "{{ is_state('input_boolean.guests', 'on') }}"

Smaller touches

  • Quick color presets next to the color picker
  • Cards per Row is now a simple βˆ’ / + stepper (General section)
  • Actions fold into one line ("Tap: More info Β· Hold: Nothing") β€” Card β†’ General tab
  • Card headers show a summary like switch Β· 4 entities Β· 3 scenarios