Area LoveLace Card

How do I install and use the Lovelace area card created by @zsarnett that is mentioned in the details for version 2021.12?

From the notes for version 2021.12.

But that is not all, @zsarnett created a brand new area Lovelace card. This card will use the picture you’ve uploaded for your area, and it automatically populates with entities of devices you have assigned to that specific area.



Nothing to install, it is shipped with HA itself. Just go to your dashboard and the dialog to add a new card and you will see it there.

I love the potensial this card has!

But, it autopopupulates things like switches, that i wouldnt have on feks the kitchen card.
One accidental press on that switch, and all appliances are turned off…
Q: Is there a way to exlude certain items in the YAML for the card?

Also, lights are just grouped as ALL lights.
Q: Is there a way to get all lights to show next to each-other?

Basically, is there a guide or readme on how to customize the card? Or is it just all-auto?

For now, just automatic. It’s a new card edition, so over time more things might get added.

I created this feature request. If you like it. you can upvote :+1:


I can’t seem to get the temperature working - not sure if it requires a specific entity/device or not?

@DarkWader agree with your assessment, what I wonder - I have plenty of integrations that dont have an actual device only an entity but you cannot assign them to areas …

there is an advance dropdown in the settings of an entity where you can assign them to an area.

thanks for the hint - issue identified, integration doesnt support unique_id …

I tried the area card with my office. I have 3 devices that are broadcasting temperature via an entity. 2 are zigbee sensors (bad quality) one is a hmip heating thermostat (good one). It seems, that the shown temperature value in the card is somehow a mix of all 3 values.
How can I choose one specific entity for the temperature? or how do I remove the area from the entity, but not from the device, as I need the motion detector.
Is there any more help/documentation available? The (?) goes to “404”…

1 Like

HI Philip,

really sorry but I am lost… How to add this when in yaml mode?

I tried the card in my UI setup but all it says is

type: area
area: attic

is that all there is to it?

the switch on the right side doesn’t have a tooltip, so I don’t even know which of my entities is configured…

Yes, that is all there is for now, plus the option show_camera: true to show a camera live feed instead of a static image.

Additional iterations will be required to offer more control and better entity selection. E.g. I don’t even get a temperature shown since climate entities apparently are not considered (I assume you have a dedicated temperature entity in your attic?).

yes, here’s the Area card in the Areas panel, having quite a few more entities than a temp sensor and a switch

Schermafbeelding 2021-12-15 om 23.33.57

where it now shows like:

Schermafbeelding 2021-12-15 om 23.37.51

as area card. Why its showing 26.5 degrees is beyond me, because neither of my temp sensors in the attic have a value anywhere close to that…

Schermafbeelding 2021-12-15 om 23.38.40

adding the attic area to a few lights, is immediately reflected in the card, so thats cool:

Schermafbeelding 2021-12-15 om 23.42.42

Still, handling all of those together isn’t so cool…

would you have to source code link for that card, so we can have a peek what it’s doing? this it: frontend/ha-area-picker.ts at 4ebdca2a46c8ed634ea0fc2f108f50bda97442b4 · home-assistant/frontend · GitHub

and the PR Area Card by zsarnett · Pull Request #10141 · home-assistant/frontend · GitHub

I also see a running human icon there when the motion sensor turns on. nice touch :wink:

The new Area card also lacks a documentation page like all other Lovelace cards have.

I also have the issue with the temperature that gets unexplainable value when there are multiple temperature sensors in one area.

The on/off switch works, but you have to be really careful with that. Before you know it you have turned off essential devices that are setup as a switch in that area.

In the end this card has potential but it should be much more configurable.


I agree…

  • I am also seeing erroneous values for temperatures
    • searching through developer tools I have found nothing reporting a similar value to what is displayed.
  • The global all off toggle button is an invitation to a bigger problem

I do like the idea, but it does need some more options for us to customise what can be toggled with the toggle button would be useful.

I thought the AREAS cards were gonna be useful but at the moment far from it unfortunately. I hope they will get some much needed attention for the next release. Just a few thoughts below.

  • lights should open popup to show which lights and not just shut down all of them
  • same for power switches (which is dangerous anyway, switch off fridge and kitchen light !)
  • the movement icon should be there all the time to indicate no movement for an area
  • lots of entities are not listed on the card although put in the area; humidity, lux, smoke
  • I would expect a least a shortcut to the ‘device’ page for an item listed in this area


Give @zsarnett a break, you should not “expect” anything as he made this out of his own time and kindness.
This is the reason it is Open Source, if you want or “expect” more functionality, you can add the changes yourself.
Learn how to work on the development version of HA, make the tweaks, create a Pull Request, if satisfactory it will be merged & then it will be in a future release where someone else can “expect” things. And you will also feel disheartened that your efforts are not appreciated.

You are not forced to use the card in its current state. Be kind.


Thanks for all the feedback everyone. When we release cards they aren’t always going to be the most configurable the first release. Remember. Features can be added. But its hard to remove features. (Breaking Changes)

So for the first release, its all automatically configured. This was decided so that it was an easy card to add. Hearing your feedback on what you want added is great but don’t expect every feature possible added on the first try or ever. Custom Cards can be cloned to have all features if wanted.

We are going to add more and more to coming releases. The area card is going to be a big focus in Q1 for me to update and add features.

Thanks @Mike_M Appreciate the kind words and you are 100% correct. Everything is done in free time for the most part. Try not to expect things and simply ask :slight_smile: Next time that feature may be in there.

Thanks again. Keep feedback coming on what you want to see


Hello everyone,
I have now made a few attempts with the new area card. It would be very nice if these could be resized to better integrate them into the dashboard.
Unfortunately for me these are either too small or too big

Could you help me find the answer? How to change static picture to camera video in Area LoveLace Card?
My configuration in Area LoveLace Card:

- type: area
    area: balkon
    show_camera: true

Configuration in /config/configuration.yaml

  - platform: ffmpeg
    name: balkon
    input: rtsp://vit:[email protected]:554/h265/av_stream

What is wrong?

This object (“camera.balkon”) does not have a unique identifier. What makes it impossible to set the area “balcony” on this entity

1 Like