Introducing Hass-Panel: A Modern React-Based Control Panel for Home Assistant

General
1

Hey everyone! I’m thrilled to share my latest project, Hass-Panel, a new control panel I’ve developed for Home Assistant. Built with React and utilizing the Home Assistant WebSocket API, Hass-Panel is designed to enhance your smart home experience with a sleek and functional interface.

What Makes Hass-Panel Special?

  • Fully Responsive: Works seamlessly on both mobile and desktop devices.
  • Customizable Layout: Drag-and-drop interface for easy rearrangement of cards.
  • PWA Support: Install it like a native app on your desktop for quick access.
  • Dark Mode: Enjoy a beautiful UI with dark mode support.
  • Configuration Sync: Built-in WebDAV support for syncing configurations across devices.

Supported Devices & Features

Hass-Panel currently supports a wide range of devices and features, including lights, air conditioners, curtains, sensors, cameras, scenes, and more. Regular updates are planned to expand its capabilities further.

Installation Options

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

    • Go to Supervisor → Add-on Store.
    • Add the repository: https://github.com/mrtian2016/hass-panel.
    • Install “Hass Panel” and start the add-on.
    • Access it from your sidebar!

  2. Using Docker
    bash
    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

  • Layout Customization: Show/hide cards, drag-and-drop arrangement, customizable card sizes, and responsive design adaptation.
  • WebDAV Configuration Sync: Auto-sync or manual sync for configurations stored as config.json.

Looking for Help?

If you encounter any issues, here are some troubleshooting tips:

  1. Configuration Not Working? Double-check your entity IDs and refresh the page.
  2. Device Showing as Offline? Verify Home Assistant connection, check entity existence, and confirm device online status.
  3. Missing Icons? Ensure icon names are correct and supported.

Contributing

I welcome contributions from the community! 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!

I hope Hass-Panel can enhance your Home Assistant experience. Looking forward to your feedback and suggestions!