Skip to content

Layout and dynamic widgets

Grid and blank

{"id":"lights","type":"grid","columns":2,"cell_width":150,"cell_height":86,"gap":6,"widgets":[{"id":"kitchen","type":"light","entity":"light.kitchen"},{"id":"spacer","type":"blank"}]}

grid nests arbitrary widgets. Options: columns, cell_width/column_width, cell_height/row_height, cell_aspect_ratio, gap/margin, widgets. Children may set row, col, rowspan/row_span, colspan/col_span, individual sizes and min_height. Numbers are dp; strings accept dp or percentages. blank creates an empty grid cell and only supports common grid, theme and condition options.

Tabbed card

tabbed_card, tabbed-card, custom:tabbed-card nest cards under a local tab bar. options.defaultTabIndex selects the initial tab. tabs contains objects with attributes (label, icon, minWidth) and card. Global attributes merge with local attributes; local values win.

Auto entities

{"id":"cheap-fuel","type":"custom:auto-entities","filter":{"include":[{"entity_id":"sensor.*_e10","area":"entry"}],"exclude":[{"state":"unavailable"}]},"sort":{"method":"state","numeric":true,"count":10},"card":{"type":"custom:flex-table-card","columns":[{"name":"Station","data":"friendly_name"},{"name":"Price","data":"state","decimals":3}]}}

Aliases: auto_entities, auto-entities, custom:auto-entities. Options: card, card_param (default entities), static entities, filter.include, filter.exclude, show_empty, else, unique, sort. Rules support entity_id, domain, state, name, attributes, area, device, integration, label, last_changed, last_updated, not, or, and, glob */?, regex /.../ and comparisons <, <=, =, !=, >=, >.

The integration evaluates registry, state, selection and sorting work server-side, replaces the filter with concrete entities and transfers only required states. Sorting supports method (entity_id, domain, name, state, attribute, last_changed, last_updated), attribute, reverse, ignore_case, numeric, first, count. State-dependent queries are recompiled after relevant state changes.

Flex table

flex_table, flex-table-card, custom:flex-table-card show entities as a table. Options: title, columns, sort_by, disable_header_sort, strict, max_rows, clickable, auto_format. entities is a list or an object with include/exclude. Columns: name, id, data, hidden, align, width, weight, prefix, suffix, multi_delimiter, fmt, decimals, no_auto_format. data uses state/attribute dot notation and comma-separated selectors. fmt offers number and duration; JavaScript modify is never executed.

Assist button

assist_button, voice_assistant_button, push_to_talk use global voice configuration. Options: title, icon, wake_icon, listening_icon, icon_size, text_size, state_size, show_state, min_height, padding. push_to_talk_mode from voice_assistant chooses hold or toggle. Colour and state text show idle, wake word, recording, processing, response and error.