Awesome Open Source
Awesome Open Source

Lovelace animated weather card

Originally created for the old UI converted by @arsaboo and @ciotlosm to Lovelace and now adapted to display all informations available in the Météo-France integration.

This card uses the awesome animated SVG weather icons by amCharts.

Weather Card

Thanks for all picking this card up.


You have 2 options, hosted or self hosted (manual). We strongly recommend to install using the first option, as it will update itself (by the way, it needs internet).

The instructions aren't givent to install it self-hosted, as this is a standard installation procedure.


Add the following to resources in your lovelace config:

    type: module

You can also specify a specific tag or version in the URL by adding @x.x :

    url:[email protected]/dist/meteo-france-weather-card.js
    type: module


And add a card with type custom:meteo-france-weather-card:

type: custom:meteo-france-weather-card

Then you can switch to visual editor to see the available options.

You can choose wich elements of the weather card you want to configure, only the weather entity is required for the card to work properly.

If you want to show the sunrise and sunset times, make sure the sun component is enabled:

# Example configuration.yaml entry

This is a basic example of the config for a full-configured card (there is just missing the "icon" attribute, only needed to switch to another icon library) :

type: 'custom:meteo-france-weather-card'
name: Ville
entity: weather.ville
rainForecastEntity: sensor.ville_next_rain
freezeChanceEntity: sensor.ville_freeze_chance
rainChanceEntity: sensor.ville_rain_chance
snowChanceEntity: sensor.ville_snow_chance
thunderChanceEntity: sensor.ville_thunder_chance
alertEntity: sensor.ville_weather_alert
uvEntity: sensor.ville_uv

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Home Assistant (2,320
Weather (1,858
Related Projects