Lovelace Alarm Clock

In the quest for a perfect Alarm Clock, I’m getting closer, thanks to home assistant.

This card was designed for a tablet which I use on my nightstand with a resolution of 1280px on 800px.
The idea is to have a really minimalistic, readable clock with some Home Assistant love.

Screenshots love…


  • This card is still in beta and it scratches my own itch. No support/guarantees/… It may eat your dog or the alarm may not go off and you can thus miss a date with the love of your live, …
  • I tried to solve the alarm in the backend using timers, … but did not succeed due to some outstanding bugs. So, this means that the logic to fire the alarm is in the frontend. If you close your browser, it will not go off. But, since it was designed for an always on tablet (for me a Nexus 7 2013 which is always running and has this constantly open), it appears to work


User interface

The card exists out of two parts:

  • the clock part (65% of the height of the screen) with:
    • the clock of course
    • the options to setup alarms
    • the option to override/update the next alarm
    • a nap timer option
  • the lower part (35% of the height of the screen) which:
    • can show up to 3 other home-assistant cards
    • shows the snooze and dismiss button when the alarm is ringing

a non-disturb mode is activated when clocking on the clock, which then makes the clock 100% of the screen

Alarm - and PreAlarm options

  • You can define multiple entities that will turn on when the alarm goes off, including lights, input_booleans, scripts and media_players. Configuration is as follows:
    - entity_id: input_boolean.alarm_clock
    - entity_id: media_player.gpm_desktop_player
  • You can also specify pre-alarm options, think off having your Philips Hue light slowly starting an half hour before the alarm. Configuration is as follows:
    - entity: script.start_lights_bedroom_slowly
      when: '-00:30'
    - entity: light.bathroom
      when: on_dismiss
      service: light.turn_on # not necessary as default is homeassistant.turn_on

Holiday integration

But wait, that’s not all! It also integrates with:

  • a holiday calendar so that when you have a holiday the next day, your alarm will automatically disable.
  • the workday sensor so that when you have a holiday the next day, your alarm will automatically disable.


  • 2018-09-07: more features…
  • 2018-09-05: first beta release

Installation instructions

can be found on


In my example, the configuration also uses Simple Weather Card


The card now also supports full screen mode where only the clock is shown to have even less distraction while sleeping.

To enable it, just click on the clock…

Fantastic project!

This might be a very newbie question - however - do you call this as a separate page on your tablet, or do you just call it via the frontend on a separate tab/view?

Would love to see this integrated with wake-up lights from Hue/Trådfri and Sonos playlist firing when alarm goes off. Probably possible to do on service/actions with some modification?


I tried to install this (on hassio), and it works sort of …

Mostly I get a lot off errors:

Thu Sep 06 2018 19:13:59 GMT+0200 (Central European Summer Time)

https://xxx/frontend_latest/app-1fe7ad4f.js:2:12805 Uncaught ReferenceError: flatpickr is not defined

Does that look/sound familiar, did I miss something ?

I am happy to share more info with you. I just don’t know what I am looking for.

What tablet are you using? Does the tablet stay awake at all times?

Hi @s.takens,

sorry for that - I missed something in the installation instructions. I fixed them on github. Concretely, there were some resources missing. It should be as follows:

  - url:[email protected]/min/moment.min.js
    type: js
  - url:
    type: js
  - url:
    type: css

Hi Petro,

I’m using a nexus 7 2013 tablet with the latest chrome.

It indeed stays awake all the time.


1 Like

Hi @tottow,

since there is an input_boolean changing from state, you can do all the automations you want (including starting Sonos, …)

Other integrations (starting a script x minutes before the alarm, e.g. to start your wakeup light) are on my wish list… I’ll keep you posted.


Thanks! I’ll have a look at it. Never worked with boolean before so I’ll give it a go.

Ref my question on how you get this up on the tablet, so you just navigate to frontend and use a view? Or is it possible to call a full web page only?


It is indeed a view (e.g. http://home-assistant:8123/lovelace/4?kiosk&no_scrollbar) and with kiosk mode, I hide the top navigation from home_assistant.

@tottow Good news: I added some features you may like :slight_smile:

You can now choose what should happen when the alarm goes off, including starting a media_player. You can also specify pre-alarms, which allows you to slightly turn on your hui lamps a specified time before the alarm.

Fantastic! I need to try this one out asap. Thank you very much!! :grin::grin:

Hi again, just checking - is this the code you are using for kiosk?

Seems to be the “only” way to put lovelace into kiosk mode…


I used your custom card but since 0.84, i have this in my log.
I’ve updated already

2018-12-14 23:32:51 ERROR (MainThread) [frontend.js.es5.201811211] Uncaught TypeError: Cannot read property 'attributes' of undefined

So. Not having used Lovelace before 0.86 and therefore without a lovelace.yaml file - how do I make this nifty alarm clock work?

#nevermind I looked, tried, learned and conquered! :smiley_cat:


Does anyone use this card with 0.89 ?
With the migration of the custom components, I’m not sure how to make it work.

It may of interest to skin this:
Universal Persistent Timer
It can add a timer to anything including multiple scripts, lights etc. with separate start and stop actions, and will resume in the event of downtime and requires no programming skills once installed. All lights, switches etc can be accessed from auto populated lists; and you can specify days of the week, repetitions, intervals, and much more. Timers can be paused, backed up and give activation notifications etc.

Hello rdehuyss

Thank you for a, probably very nice alarm card.
I’m seeing the strangest thing though. I set the alarm, and it counts down nicely “a few more minutes / seconds…”. And then at the alarm time, nothing happens, other than it suddently starts to count up - ex. 2 minutes after alarm time, it says 2 more minutes of wonderfull sleep…"

Any idea, why nothing happens, and that it on top of that starts counting up ?


Before alarm time:

after alarm time:

but no alarm (I’ve asked it to call a script that turns on my bedroom Sonos)

Ahh, figured it out myself. The JS code stumbled, because I didnt have the “/local/icons/weather_icons/animated/thunder.svg” for the weather card, and dont have the holidays declared /entered. If I comment out these two it works.


Nice work - it fits my needs, didn’t test it without holidays.