🧩 New Custom Card: Embedded View Card – Embed any view into another

Share your Projects! Dashboards & Frontend
1

Hi everyone, :orange_heart:

I’m excited to share a new custom card I’ve built for Home Assistant:
embedded-view-card – a card that allows you to embed any existing view into another, either statically or dynamically, using native Lovelace layouts.

:rocket: What it does

This card lets you reuse entire views inside other views – perfect for building modular dashboards (e.g. menus, headers, footers, room sections, etc.).

You can:

  • Embed a view from the same dashboard
  • Choose the view statically or dynamically (e.g. via input_text)
  • Preserve the original view layout (type: panel, sections, sidebar, etc.)
  • Seamlessly integrate it into grid-based dashboards
  • Use it with or without ha-card wrapper
  • Fully supports YAML and UI dashboards

:clapper: Demo:

Live switching GIF

:hammer_and_wrench: How to use

  1. Install via HACS
    Add the repository manually:
    https://github.com/redkanoon/embedded-view-card
  1. Basic Example (static)
type: custom:embedded-view-card
view_path: areas-bathroom
ha_card: false
  1. Dynamic Example (via input_text)

Helper (must exist)

input_text:
  window_view:
    name: window_view

Card

type: custom:embedded-view-card
view_path_entity: input_text.window_view
ha_card: false

Action (e.g. in a button card)

tap_action:
  action: perform-action
  perform_action: input_text.set_value
  target:
    entity_id: input_text.window_view
  data:
    value: areas-bedroom

Make sure the view exists

title: Bedroom
path: areas-bedroom
type: sections

:point_right: See full setup instructions & details on GitHub:
:link: GitHub Repository

Let me know what you think or if you have feature ideas.
I’d love feedback and would be happy to improve this further!

:fox_face: Redkanoon

5 Likes
2

Looks nice - thanks.

Two comments:

  1. It would be great if I could select views from other dashboard by using a relative path, e.g. ..\office\lights in the view_path (even if I had just the option to type it into the editor).
    This would allow me to create a dashboard that only holds the modules (one per view) and one that builds complete views based on the modules from the other dashboard. This way the pieces don’t get in the way of the whole views.
  2. I’m probably just being a little dense here, but I can’t make the ‘dynamic’ version work - whatever I select from the ‘Entity’ dropdown after picking ‘Dynamic’ in the ‘Select View’ dropdown, all I get is an
    Error loading view: View not found:
    message
    This one might just need a little more explaining.
3

Hi, thanks a lot – I’m really glad you like it!

Regarding your comments:

  1. That was actually my initial idea as well, but I didn’t manage to get it working properly at the time. It’s still on my list though, and I definitely want to come back to it.

  2. You’re right – the dynamic mode could use a better explanation. I’m planning to create a short GIF to demonstrate how it works. In the meantime, feel free to try the YAML version instead. I’ll include the YAML snippets for the helper, the view, and the action to the main post to make it easier to follow.

Thanks for your feedback.
I hope this card will be useful for the community.

:fox_face: Redkanoon

4

Can this be used in ui_minimalist?

5

Yes, embedded-view-card should works with ui_minimalist, as long as it’s used in a standard Lovelace YAML dashboard. Just make sure to disable the default ha-card wrapper if you’re embedding it inside minimalist sections or templates:

type: custom:embedded-view-card
view_path: your-view
ha_card: false

If you give it a try, let me know how it works for you.

1 Like
6

:construction: Development Update :construction:

We’ve made big progress on the Embedded View Card recently:

:white_check_mark: Padding issues with sections and grid layouts are now solved thanks to the new bleed option

:white_check_mark: Cross-dashboard embedding is almost ready – the card can now load views not only from the same dashboard, but also across different dashboards

:white_check_mark: Editor improvements

I plan to publish a new release soon that includes these changes.
Thanks a lot for all your feedback and testing – it really helps to polish the card! :pray:

7

This is a great addition to use for bubble popup! :slight_smile:
Now i can sort everything in tabs and have a nice overview!

Also really interested in cross dashboard becouse “tasks” would be great to be called within a popup hihi :slight_smile:

8

woh! so it means music-assistant, or the new Areas dashboard directly in a bubble card popup!

9

"Yes, starting with v2.1.0 cross-dashboard embedding is possible :jigsaw::rocket:.

Standard and custom dashboards are working, but I haven’t fully tested the auto-generated views like Music Assistant or Map yet. If you try it out, let me know how it works for you – feedback is very welcome!"

Thank you!

:fox_face: Redkanoon

10

"Yes, that’s exactly what I developed it for :jigsaw::rocket:

I’m using it myself in popups and together with the grid layout – works great for organizing everything!

Thanks a lot for the feedback, I’m really glad you like it :slightly_smiling_face:"

:fox_face: Redkanoon

11

:bell: Update v2.1.0 – Cross-Dashboard Embedding

I’m happy to announce that Embedded View Card v2.1.0 is out :tada:

:sparkles: What’s new

  • Cross-Dashboard embedding :jigsaw: → you can now load views not only from the same dashboard, but also from other dashboards
  • Improved padding issues / layout handling with bleed options
  • Editor UI refinements and translations

:point_right: If you try it with your setup, especially with popups or auto-generated views, let me know how it goes – feedback helps improve the card!

Download / install via HACS or directly:
:link: GitHub – Embedded View Card

2 Likes
12

Great enhancement - now I only need to find the time to re-do my complete dashboard setup for all users based on modules. :grinning:

One thing I haven’t been able to try yet is this:

  • I have a view in a dashboard, that’s not visible to all users.
  • Can I link to that view for the dashboard of one user this view is normally not visible for?
  • I assume it’s not, but it would help to keep the dashboards for other users much cleaner, e.g. hide all the ‘modules’ and make only those visible through this card that I want them to see in their own individual dashboard.
13

Hi,

Im using home-maintenance integration and i would like to embedded this. Is it possible in a future update with embedded?

14

Hello
Sorry but it does not propose music assistant, and does not work with generated areas dashboards :disappointed:

Thanks for the effort, don’t hesitate if I can do anything to help!

15

Hello,
thanks for testing!

The card only works with real Lovelace dashboards/views. Panels like Music Assistant, the generated Areas panel, integrations such as Home Maintenance, or even the special lovelace/0 are not Lovelace-based and can’t be embedded. They should already be filtered out in the dashboard dropdown.

If you want to display them inside a dashboard, an iframe card might be the only option.

Thanks a lot for the feedback! :pray:

16

Thanks for the idea — I’ve implemented it in v2.2.0 :tada:

:sparkles: What’s new

  • Enforces Lovelace visible rules: hidden views do not render and show “View not visible for this user”.

:point_right: Would love if you can try it and share feedback!

Download / install via HACS or directly:
:link: GitHub – Embedded View Card

17

oh no!!! :cry:
anyway, great card. keep going!

iframe it will be for me… :stuck_out_tongue:

18

Very good idea and work. Congratulations…
I use this code a little differently.
Panel view
Horizontal stack card
Card1-Live 3D home plan works with three js
Card2-Vertical stack for Embedded View Action Codes “tap action”
Card3-Embedded View card with css (card-mod)

type: custom:embedded-view-card
mode: dynamic
target_entity: input_text.window_view
ha_card: false
card_mod:
  style: |
    :host{
      position: absolute !important;
      z-index: 1;
      right: 100px !important;
      bottom: 50px !important;
      opacity: 0.9;
      height: 50% !important;
      width: 50% !important;
    }

Is it possible to call cards?
Is there a close action? (I used***data: value: dashboard-test/empty)
Some css (bottom, right, left etc) The positioning of the cards behaves differently and cannot find their place properly.
Can anyone advise me how to use CSS (Card-Mod) effectively?
Thank you in advance to those who will help

image
image1643×953 124 KB

19

I’ve started on a modular dashboard setup and ran into an issue:

I haven’t found a setting yet, that works when I want to integrate the module view into an existing view so that it fully lines up with the other cards.

The card on the right

image
image1113×300 9.48 KB

and the card on the bottom

image
image607×630 11.3 KB

are the embedded cards.

I’ve tried a lot of different values for the ‘Bleed inline’ and the ‘Bleed block’ but can’t get it to work so that the embedded view card lines up with the other cards in the view.
I seem to be able to be getting it right for one view or the other, i.e. one or more, but not for all of them.

And then viewing it in the mobile app does something different again - the bottom card is the embedded one:

image
image1080×1400 40.8 KB

Any hints?

20

Hi, thanks a lot for your comment. :orange_heart:

Action support will be implemented in the next version. I’m currently working on it, but unfortunately I’m running out of time at the moment. As soon as it’s available, I will post an update here in the forum.

A dedicated close action is also something I will look into during development. It sounds useful and should be technically feasible, so I’ll test whether it can be added to the next release as well.

Regarding the CSS: I’m not fully sure yet what the exact issue is, and I’m not experienced enough with complex Card-Mod positioning to give reliable advice here. If you can explain a bit more about what happens on your setup, I can try to understand the problem better.