Home Assistant Markdown Weather Forecast Card

A comprehensive guide and code sample to display weather forecasts using Markdown cards.

weather dashboard display in home assistant

Highlights

Integration with Weather Entities: Leverage your configured weather integration to pull forecast data from sensors.
Template Iteration: Use templating in your Markdown card to iterate over forecast data, displaying dynamic content.
Customization Options: Customize the display using Markdown syntax, iconography, and YAML configurations.

Overview

Home Assistant supports various ways to display weather data, including dedicated weather cards and custom Markdown cards. This guide provides you with an in-depth explanation and a code sample for creating a Markdown card that retrieves and displays forecast data from your weather integration. By using templating and YAML configurations, you can show the current conditions, temperature, forecast details for several days, and even embed weather icons for enhanced visualization.

Step-by-Step Guide

1. Setup Your Weather Integration

Before creating a Markdown card, ensure that your weather integration is properly configured in Home Assistant. Common integrations include OpenWeatherMap, Dark Sky, or any other supported weather provider. After you have set up the integration, a corresponding weather entity (for example, weather.home or weather.YOUR_WEATHER_ENTITY) will appear in your Home Assistant dashboard under Developer Tools.

Understanding the Entity Data

The weather entity typically holds current conditions along with a collection of forecast data. The forecast information is usually stored in an attribute (often named forecast) that contains an array of objects. Each object represents forecast data for a specific time interval. This data might include:

Date and Time
Temperature
Diverse weather Conditions (e.g., sunny, cloudy, rain)
Humidity, wind speed, and precipitation probability

2. Creating a Markdown Card

A Markdown card in Home Assistant allows you to use YAML and templating with Jinja2 syntax. This enables you to extract and format weather data in a visually appealing way. The following example demonstrates a code snippet to create a Markdown card that iterates through forecast data:

Example YAML Code


# Replace YOUR_WEATHER_ENTITY with your actual weather entity name.
type: markdown
content: >
  ## Weather Forecast

  <b>Current Temperature:</b> {{ states('weather.YOUR_WEATHER_ENTITY') }}  
  <b>Humidity:</b> {{ state_attr('weather.YOUR_WEATHER_ENTITY', 'humidity') }}%  
  <b>Wind Speed:</b> {{ state_attr('weather.YOUR_WEATHER_ENTITY', 'wind_speed') }} km/h  

  <b>Forecast Details:</b>
  {% for forecast in state_attr('weather.YOUR_WEATHER_ENTITY', 'forecast') %}
  ### {{ forecast.datetime }}
  - <b>Condition:</b> {{ forecast.condition }}  
  - <b>Temperature:</b> {{ forecast.temperature }}°C  
  - <b>Precipitation:</b> {{ forecast.precipitation_probability }}%
  {% endfor %}

In this example:

The {{ states('weather.YOUR_WEATHER_ENTITY') }} template expression outputs the current temperature (or status) from your first-level state. Adjust this according to your integration's output.
The state_attr('weather.YOUR_WEATHER_ENTITY', 'forecast') returns the forecast data from your weather entity. By cycling through this array using a {% raw %}{% for %}{% endfor %}{% endraw %} loop, you generate a forecast section that displays each day or time slot’s information.
Use line breaks ( ) and Markdown formatting (such as bold headings) to organize the content.

3. Adding Visual Enhancements

For better visual appeal, you can incorporate weather icons alongside your textual data. Home Assistant allows the use of filters within templates to include an icon that corresponds to the current weather condition.

Example with Icons


type: markdown
content: >
  ## Weather Forecast

  <b>Current Condition:</b> {{ states('weather.YOUR_WEATHER_ENTITY') }} {{ states('weather.YOUR_WEATHER_ENTITY') | icon }}  
  <b>Current Temperature:</b> {{ states('weather.YOUR_WEATHER_ENTITY') }}°C  

  <b>5-Day Forecast:</b>
  {% for forecast in state_attr('weather.YOUR_WEATHER_ENTITY', 'forecast')[:5] %}
  - <b>{{ forecast.datetime }}:</b>  
    - Temperature: {{ forecast.temperature }}°C  
    - Condition: {{ forecast.detailed_condition }} {{ forecast.detailed_condition | icon }}  
    - Precipitation: {{ forecast.precipitation_probability }}%
  {% endfor %}

Here, the | icon filter is applied to the condition to display a relevant icon. Adjust the template code as needed, since not every integration supports a built-in icon filter.

4. Considerations for Display

Although Markdown cards are versatile, there are some points to consider for an optimal display:

Dynamic Height and Responsive Layout

Markdown cards are static by nature; they might not always automatically adjust in height to accommodate large amounts of text. If you find that your forecast text is too lengthy or if the card requires more responsive behavior, consider:

Structuring your data efficiently, perhaps by limiting the number of forecast entries displayed (e.g., using [:5] to show 5 entries).
Utilizing custom cards like the Platinum Weather Card, which support dynamic layouts and additional customization options.

Enhancing Your Setup with a Table

Weather Forecast Data Structure

The table below summarizes the typical components you can display in your weather forecast Markdown card:

Parameter	Description
Current Temperature	Shows the present temperature reading obtained from the weather entity's state.
Humidity	Displays the current relative humidity level.
Wind Speed	Indicates the current wind speed, often in km/h or mph.
Forecast Entries	Iterates over a series of forecast data items, showing information such as condition, temperature, and precipitation probability.
Icons	Optional visual enhancements to represent weather conditions graphically.

Tips for Customization

Utilizing Attributes and Customization Options

Depending on your weather integration, you can expand the functionality of your Markdown card. Here are some thoughts on deeper customization:

Custom Sensors

If your weather integration does not provide all desired forecast details directly, consider using Home Assistant’s template sensors to extract and reformat the weather data. For example, you might create a sensor that compiles forecast information into a single attribute, which can then be displayed effectively on your card.

Formatting and Styling

Make full use of Markdown formatting to adjust header sizes, bold certain data, and separate sections as needed. The versatility of Markdown makes it easy to emphasize key information and improve readability.

Integration with Other Cards

The Markdown card can be combined with other Lovelace cards to form custom dashboards. If you want a more advanced display, you might integrate custom cards (e.g., Platinum Weather Card) alongside your Markdown card.

Additional Example: Full YAML Configuration

The next example combines all elements discussed into a complete YAML configuration for a Markdown card that fetches and formats forecast data:


# YAML configuration for a Home Assistant Markdown Weather Forecast Card
type: markdown
content: >
  ## Weather Forecast

  <b>Current Condition:</b> {{ states('weather.YOUR_WEATHER_ENTITY') }} {{ states('weather.YOUR_WEATHER_ENTITY') | icon }}  
  <b>Current Temperature:</b> {{ states('weather.YOUR_WEATHER_ENTITY') }}°C  
  <b>Humidity:</b> {{ state_attr('weather.YOUR_WEATHER_ENTITY', 'humidity') }}%  
  <b>Wind Speed:</b> {{ state_attr('weather.YOUR_WEATHER_ENTITY', 'wind_speed') }} km/h  

  <b>Forecast Overview:</b>
  {% for forecast in state_attr('weather.YOUR_WEATHER_ENTITY', 'forecast') %}
  ### {{ forecast.datetime }}
  - <b>Condition:</b> {{ forecast.condition }} {{ forecast.condition | icon }}
  - <b>Temperature:</b> {{ forecast.temperature }}°C  
  - <b>Rain Chance:</b> {{ forecast.precipitation_probability }}%
  {% endfor %}

Remember to replace YOUR_WEATHER_ENTITY with your actual weather entity's ID. Review the output of the entity in Developer Tools to ensure the attribute names (like forecast, humidity, and wind_speed) match your configuration.

References

Weather Forecast Card Documentation - Home Assistant
Weather Integration Guide - Home Assistant
Home Assistant Community Forum - Markdown Card Guide
Hass Markdown Card - GitHub Repository
Platinum Weather Card - GitHub Repository