A simple and user-friendly Home Assistant smart home control panel

Share your Projects! Dashboards & Frontend
1

Hass-Panel - A Modern React-based Control Panel for Home Assistant

Hey everyone! I’m excited to share Hass-Panel, a new control panel I’ve developed for Home Assistant. It’s built with React and uses the Home Assistant WebSocket API.

Preview
Preview2550×5486 493 KB

What makes Hass-Panel special?

  • :iphone: Fully Responsive: Works great on both mobile and desktop

  • :wrench: Customizable Layout: Drag-and-drop interface for easy customization

  • :rocket: PWA Support: Install it on your desktop like a native app

  • :art: Dark Mode: Beautiful UI with dark mode support

  • :floppy_disk: Configuration Sync: Built-in WebDAV support for syncing across devices

Supported Devices & Features

Currently supports a wide range of devices and features:

  • Lights (individual and group control)

  • Air Conditioners

  • Curtains

  • Sensors

  • Cameras

  • Scenes

  • And more being added regularly!

Available Card Types

  1. Time

  2. Weather

  3. Light Status

  4. Light Overview

  5. Sensors

  6. Media Players

  7. Curtains

  8. Electricity Usage

  9. Router Status

  10. NAS Status

  11. Camera Feed

  12. Climate Control

  13. Motion Detection

  14. Water Purifier

  15. Illuminance

  16. Script Panel

Installation Options

1. As a Home Assistant Add-on (Recommended)

  1. Go to Supervisor → Add-on Store

  2. Add repository: https://github.com/mrtian2016/hass-panel

  3. Install “Hass Panel” from the add-on store

  4. Start the add-on

  5. Access it from your sidebar!

2. Using Docker


docker run \

--name hass-panel \

--restart unless-stopped \

-p 5123:5123 \

-p 5124:5124 \

-v ./webdav:/config/hass-panel/webdav \

-v ./media:/app/media \

-e REACT_APP_HASS_URL=your-hass-instance:8123 \

-e REACT_APP_HASS_TOKEN=your-hass-token \

-e WEBDAV_USERNAME=your-webdav-username \

-e WEBDAV_PASSWORD=your-webdav-password \

-d \

ghcr.io/mrtian2016/hass-panel:latest

Key Features In Detail

:dart: Layout Customization

  • Show/hide any card

  • Drag-and-drop card arrangement

  • Customizable card sizes (desktop)

  • Flexible column layout (3-5 columns)

  • Responsive design adaptation

:arrows_counterclockwise: WebDAV Configuration Sync

Built-in WebDAV service lets you sync your configuration across multiple devices:

  • Auto-sync option available

  • Manual sync when needed

  • Configurations stored as config.json

Looking for Help?

Common Issues

  1. Configuration not working?

  • Double-check your entity IDs

  • Try refreshing the page

  1. Device showing as offline?

  • Verify Home Assistant connection

  • Check if entity exists

  • Confirm device is online

  1. Missing icons?

  • Verify icon names

  • Check if using supported icons

Contributing

Your contributions are welcome! Feel free to submit Pull Requests or Issues on GitHub.

Let me know if you have any questions or need help setting it up! I’m happy to assist.

4 Likes
2

I could add the repo to my HA Add-ons, but after that I couldn’t find the add-on to install in the list.

Something went wrong I think.

3

Worked for me. Did you refresh page after adding repo?

4

I did and it installed. Though figuring out now, what I eed to enter at the configuration.
Is that your home assistant username, password and nothing more than that?

I keep getting an error “Error: hass_url and hass_token must be set”.

The hass token isn’t set, but it wasn’t nessecary according the docs. What should that be set to?

5

Try to add Long-Lived Access Tokens

6

I did… It worked.
Logs say it started, but when I click the “pass panel” link in the navigation it’ll always returns a blank page.

7

my gmail [email protected]