Home Assistant Large Clock

This recipe is my version of providing a "large clock" face in the home assistant dashboard.

Enable serving local static files:

  • Create directory www in your config directory.
  • Restart home assistant.
  • Static files are now available as http://homeassistant.local:8123/local/.

Place the HTML with your clock in a file i.e. $config/www/clock.html. I am using this:

Then add a webpage card:

type: iframe
url: /local/clock.html
aspect_ratio: 45%

Obviously you can fully exercise your HTML to get your clock to look exactly like you want.

I wrote this because I couldn't get the markdown card to style properly. Also, I wasn't keen on installing the time and date sensor which is required for the clock examples based on the picture elements card.

Other implementations: