Frame — a wall dashboard for Home Assistant

From the Reddit post: this repo came out of Wes Bos inspired me to go full Home Assistant on r/homeassistant. The full version of Frame runs on my own wall every day, with a lot more pages and content than you'll find here. This is "just" the starter: the core layout, the shared runtime and a set of optional modules, ready for you to build your own on top of.

A calm, paper-and-ink dashboard for a tablet on the wall. A big clock, the weather and what to wear, who's home, the next event with a countdown and your week, plus lights, blinds, locks, windows and room climate, all readable from across the room.

It's built from button-card templates and layout-card, with a small shared runtime. A Setup page checks your install, finds the example entities you still need to replace and writes the YAML for you from your own Home Assistant.

	House: scenes that show their state ("2 of 4 on"), light tiles in the colours of the lamps that are on (tap toggles, drag dims, hold for details; a room's tile opens all its lamps), blinds as sliders, a lock, open windows and doors, and room climate with 24-hour sparklines.
	Tap for details: climate tiles show the day's low and high, the 3-hour trend and the target temperature. Sparklines show values on touch.
	Drag to dim: the fill follows your finger and the level is set when you let go. Blinds work the same way.
	Weather: two painted children next to the clock, dressed for the day: coat or T-shirt, umbrella, sunhat, wind-blown scarves. Tap the weather for the whole day over a sky that matches it: the parts of the day, 24 hours, the next days, sunrise, wind and UV.
	Room window: tap a room's light tile for every lamp in it, each one tap, drag and hold like the tile. "All off" for the room.
	Colours: tap a lamp's round icon for the white levels it can do and a palette by hue.
	Countdown: the next birthday or holiday with a painted picture and the days to go; tap it for the next ones. School holidays from a calendar.
	Clock menu: the small clock in the rail holds the pages you rarely need (Energy) and the way to Settings. An optional Ask button opens Assist in Frame style, big enough to read from across the room.
	Setup page: checks resources, fonts, theme and weather, then lists every entity in the dashboard that doesn't exist in your Home Assistant yet, with likely matches.
	YAML generator: people, calendars, lights by area, covers, climate, scenes and contacts, built from what your Home Assistant already has. Copy, paste, done.

Add what fits your home: each is a folder in optional/ that adds a page or a card, installed with one command. The Setup page shows which ones match what your Home Assistant already has.

	Calendar: day, 3 days, week and month. Tap to add, hold and drag to move, edit and delete, with undo.
	Energy: straight from your energy dashboard settings. Use, solar, grid, self-sufficiency, per hour and per day, and electricity prices with the cheapest hours marked.
	Planes overhead: Flightradar24 aircraft fly across the screen in their real direction. Tap the tag for a flight card over a flight through the clouds.
	The flight card shows route and progress, delay, landing time, aircraft, altitude and speed.
	Health: tap a person for their activity rings, weight, heart rate, HRV and last night's sleep stages, each with 30 days. From Apple Health via the iPhone app Health Auto Export; the README walks through the setup.
	Scenes: tap a room's light tile for every lamp in it, their colours, and scenes as pictures: white light, morning, evening, and dynamic ones that let the colours wander between the lamps.
	Kitchen timer: tap the clock, turn the dial or tap "Pasta". It runs in Home Assistant, rings on your speakers and every tablet, and floats in a corner while it counts down.
	Rubbish with painted bins and a "put out tonight" reminder, appliances while they run or are finished, and a mini player.
	Music: what's playing, big, following whichever player is on.
	Cameras: live tiles with motion; tap for full screen.
	Screensaver: a photo slideshow (WallPanel) with clock, weather and the next event.

It works on phones too. Under 768 px everything becomes one scrolling column and the rail turns into a top bar.

docs/modules.md lists every option. The optional modules bring their own templates, documented in their READMEs.

You need Home Assistant 2024.4 or newer, HACS with button-card and layout-card, and optionally kiosk-mode to hide the header and sidebar.

1. Get the repo onto your Home Assistant and run ./install.sh (add optional modules by name: ./install.sh calendar energy).
2. Register the dashboard in configuration.yaml and add two resources: /local/frame/frame.js?v=1 and the Google Fonts stylesheet.
3. Restart Home Assistant, open Frame in the sidebar and go to Setup.

The full walkthrough, with copy-paste snippets, is in docs/getting-started.md. Running ./install.sh again later updates the code but keeps your settings and views.

• Your household: people, calendars and weather live in templates/frame.yaml. The Setup page generates them for you.
• Your rooms: edit views/*.yaml and paste in the cards the Setup page writes. The rail lists every view on its own, using its title and icon.
• Colours, fonts, language and your own modules: see docs/customizing.md. Dates and numbers already follow your Home Assistant locale, and every UI string can be overridden.

dashboard/            → /config/frame
  frame.yaml          the dashboard: loads every file in templates/ and views/
  templates/          frame.yaml (your household), core.yaml (modules), setup.yaml
  views/              10-home, 20-house, 90-setup (in file name order)
www/frame/            → /config/www/frame: frame.js (runtime), frame.css, weather.js, room.js, assist.js, grain.png, wx/ and countdown/ (pictures)
themes/frame.yaml     → /config/themes
optional/*/           the same layout per module
install.sh            copies all of it

button-card evaluates each template's JavaScript on every render. Frame keeps its shared helpers (formatting, calendar, forecast, history, sparklines, light colours) in www/frame/frame.js, loaded once per page. The stylesheet is parsed once and shared by every card instead of being copied into each one. This keeps an older wall iPad responsive with 50+ cards on screen.

Built with Claude Code running Claude Opus 5.5. Claude wrote the code, the docs and the screenshot tooling together with me, starting from my own Frame dashboard.

The design started from the idea behind wesbos/photo-frame-dashboard. Type is Archivo and Instrument Serif. Icons are Material Design Icons. The flight card's clouds follow mrdoob's WebGL clouds. The plane, bin and countdown pictures, the children and the skies were generated for this project. The light scenes come from Hypfer/hass-scene_presets and are downloaded on install. The screenshots use demo data; the camera and slideshow photos are from Pexels and Unsplash.

MIT, see LICENSE.