{"id":19637410,"url":"https://github.com/thomasloven/lovelace-hui-element","last_synced_at":"2025-04-28T09:31:42.897Z","repository":{"id":39647749,"uuid":"249942054","full_name":"thomasloven/lovelace-hui-element","owner":"thomasloven","description":"🔹 Use built-in elements in the wrong place","archived":false,"fork":false,"pushed_at":"2023-11-22T21:08:49.000Z","size":139,"stargazers_count":111,"open_issues_count":4,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-05T08:05:17.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomasloven.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-25T09:55:04.000Z","updated_at":"2025-03-24T08:33:29.000Z","dependencies_parsed_at":"2024-11-11T12:37:18.175Z","dependency_job_id":"2c5e78f9-2b4d-4eb8-a813-1623b96fce55","html_url":"https://github.com/thomasloven/lovelace-hui-element","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Flovelace-hui-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Flovelace-hui-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Flovelace-hui-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Flovelace-hui-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomasloven","download_url":"https://codeload.github.com/thomasloven/lovelace-hui-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251284897,"owners_count":21564691,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T12:34:26.418Z","updated_at":"2025-04-28T09:31:41.260Z","avatar_url":"https://github.com/thomasloven.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/uqD6KHCdJ"],"categories":[],"sub_categories":[],"readme":"# hui-element\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/hacs/integration)\n\nThe Lovelace interface for Home Assistant has three types of objects, those are:\n\n**Cards**\nExamples include `entities`, `glance`, `vertical-stack`, `gauge`, `media-player`.\n\n**Entity rows**\nThe individual rows in an entities card. Examples include `section`, `call-service`, `conditional`, `cast`, but also `sensor-entity`, `toggle-entity`, `climate-entity` and several more that a normal user never have to bother with.\n\n**Elements**\nThe elements used in a picture-elements card. Examples include `state-badge`, `state-label`, `image`.\n\nWhen you select a `type:` for something, what is loaded will depend on where.\nE.g. specifying `type: conditional` in a lovelace view or a stack card will load a conditional card, but specifying `type: conditional` in an entities card will load a conditional entity row.\n\nSometimes you may want to use things in other places, though. That's where `hui-element` comes in.\n\n## Usage\n\nFor installation, updating and debugging instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).\n\nLet's say you want to use the `section` entity row in place of a card.\n\nNormally, a section row configuration may look like:\n\n```yaml\ntype: section\nlabel: Important things\n```\n\nTo make it work as a card, change it to:\n\n```yaml\ntype: custom:hui-element\nrow_type: section\nlabel: Important things\n```\n\nI.e., change `type:` to `row_type:` and add `type: custom:hui-element`.\n\n`hui-element` will then load the correct row and place it wherever you want it.\n\nSimilarly, to put a glance card inside an entities card:\n\n```yaml\ntype: entities\nentities:\n  - light.bed_light\n  - type: custom:hui-element\n    card_type: glance\n    entities:\n      - light.kitchen_lights\n      - light.ceiling_lights\n```\n\n![Skärmavbild 2020-03-25 kl  10 55 26](https://user-images.githubusercontent.com/1299821/77524156-2b0af480-6e87-11ea-8718-b89a57d38dc9.png)\n\n\u003e Note: In some cases, the internal types may need to be used.\n\u003e I.e. to add a media player row as a card, you'd need to specify `row_type: media-player-entity`.\n\n\u003e Note2: It may also work to set `row_type: default` and hui-element will figure out the correct row type by itself.\n\nThe correct types to use can be found in the frontend source code for [cards](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-card-element.ts), [entity-rows](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-row-element.ts) and [elements](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-hui-element.ts).\n\n### A note on card-mod\n\nIf you are using [card-mod](https://github.com/thomasloven/lovelace-card-mod), `hui-element` will be \"transparent\".\n\nI.e. styling `hui-element` itself should be as if styling the element inside it.\n\nEx:\n\n![image](https://user-images.githubusercontent.com/1299821/142607774-3676597d-ae67-4731-adac-0ea981683b5e.png)\n\n```yaml\n- type: entities\n  entities:\n    - type: section\n      label: Default internal styling\n      card_mod:\n        style: |\n          .divider {\n            background-color: red;\n          }\n    - type: custom:hui-element\n      row_type: section\n      label: Hui-element internal styling\n      card_mod:\n        style: |\n          .divider {\n            background-color: green;\n          }\n- type: entities\n  entities:\n    - type: section\n      label: Default styled from card\n    - type: custom:hui-element\n      row_type: section\n      label: Hui-element styled from card\n  card_mod:\n    style:\n      hui-section-row $: |\n        .divider { background-color: blue; }\n      hui-element $: |\n        .divider { background-color: orange;}\n```\n\n## FAQ\n\n**Does this replace the `custom:hui-` trick?**\nYes. That's where the name is from.\nThe `custom:hui-` trick was always a dirty hack that worked by accident rather than design, and since 0.107 it works intermittently at best.\n\n---\n\n\u003ca href=\"https://www.buymeacoffee.com/uqD6KHCdJ\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/white_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n\n\u003c!--\n```\nresources:\n  url: /local/hui-element.js\n  type: module\n```\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasloven%2Flovelace-hui-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasloven%2Flovelace-hui-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasloven%2Flovelace-hui-element/lists"}