Skip to content

Visual Editor

Andrew Blackburn edited this page Jun 28, 2026 · 1 revision

Visual Editor

Each Orbit card includes a visual editor. Most configuration can be completed without writing YAML.

YAML remains useful for:

  • Large grouped cards
  • Complex popup content
  • Advanced Browser Mod actions
  • Templates
  • Advanced SVG colour overrides

Common Editor Features

The editors support:

  • Entity pickers
  • Area picker for Area Card
  • Name picker for Area and Status names
  • Composed names using area, entity, device, floor, and custom text
  • Native mode selector for Status Card
  • Filtered entity pickers
  • Segmented controls for slots/items
  • Add/remove/reorder controls for grouped items
  • Wrap and separate-card layout controls
  • Interactions sections
  • Icon source toggles
  • Icon picker with Icons and Files tabs
  • Colour fields with Color and Theme tabs
  • Clear buttons for configurable fields
  • Card version display

Interactions Section

The Interactions section is collapsible and uses Home Assistant style action selectors.

Actions can be added as needed. Defaults are shown clearly, for example:

  • Default (More info)
  • Default (Toggle)
  • Default (Nothing)

When an action has no configured value, the card uses its default behaviour.

Choosing Nothing intentionally disables that interaction.

Popup actions remain an advanced YAML-only feature.

Name Picker

Area and Status cards use a name picker with:

  • Composed
  • Custom

Composed names can include Home Assistant context such as area, device, entity, and floor.

Area Card defaults to Area when an area is configured.

Status Card defaults to Entity when a main entity is configured.

Colour Picker

Colour controls have:

  • Color tab for direct colour values
  • Theme tab for theme variables

After selecting a colour, the field shows a preview circle and the selected value.

Theme colours detected from the active Home Assistant theme are marked with T.

Built-in fallback colours are marked with S.

Icon Picker

Icon fields support:

  • MDI icons
  • Orbit bundled icons
  • Local SVG/image files
  • Pasted text/emoji

The Files tab can show files from /local/icons when a local manifest exists.

See Shared Concepts for manifest examples.

Picker Filters

Many entity pickers include quick filters inside the picker.

Examples:

  • Area side buttons: All, Cameras, Lights, Switches
  • Area curve buttons: All, Covers, Lights, Sensors, Switches
  • Area action button: All, Automations, Buttons, Cameras, Scenes, Scripts
  • Status main entity: All, Binary Sensors, Sensors
  • Action Card: All, Automations, Buttons, Cameras, Scenes, Scripts

All always means unrestricted.

Clone this wiki locally