martin888/hass-panel repository overview

⁠Hass-Panel

English | 简体中文⁠

A React-based smart home control panel that uses the Home Assistant Websocket API and supports deployment as a Home Assistant OS (HAOS) addon.

⁠Video Preview

⁠Preview Image

⁠Discussion Group

⁠Key Features

• 📱 Responsive design, supports both mobile and desktop
• 🔧 Highly configurable with drag-and-drop layout
• 🚀 PWA support, can be installed on desktop
• 🎨 Beautiful user interface with dark mode support
• 🔌 Rich device support:
  • Light control
  • AC control
  • Curtain control
  • Sensor monitoring
  • Camera viewing
  • Scene control
  • More devices coming soon...

⁠Installation

⁠Docker Method

docker run \
  --name hass-panel \
  --restart unless-stopped \
  -p 5123:5123 \
  -v ./data/:/config/hass-panel \
  -e REACT_APP_HASS_URL=http://your-hass-instance:8123 \
  -e REACT_APP_HASS_TOKEN=your-hass-token \ # Optional, if token authentication is needed
  -d \
  ghcr.io/mrtian2016/hass-panel:latest

Environment Variables:

• REACT_APP_HASS_URL: Home Assistant instance address
• REACT_APP_HASS_TOKEN: Home Assistant long-lived access token (optional)

⁠Docker Method Beta

docker run \
  --name hass-panel \
  --restart unless-stopped \
  -p 5123:5123 \
  -v ./data/:/config/hass-panel \
  -d \
  ghcr.io/mrtian2016/hass-panel:latest-beta 

Environment Variables:

• REACT_APP_HASS_URL: Home Assistant instance address
• REACT_APP_HASS_TOKEN: Home Assistant long-lived access token (optional)

⁠Home Assistant Addon Method

Or manually add:

1. In Home Assistant's sidebar, click "Configuration" -> "Add-ons" -> "Add-on Store"
2. Click the three dots in the top right corner, select "Repositories"
3. Add repository URL: https://github.com/mrtian2016/hass-panel
4. Click "Add" and refresh the page
5. Find and install "Hass Panel" in the add-on store
6. After starting, it can be accessed from the sidebar

⁠Feature Configuration

⁠Supported Card Types

1. Time Card
2. Weather Card
3. Light Status Card
4. Light Overview Card
5. Sensor Card
6. Media Player Card
7. Curtain Card
8. Electricity Card
9. Router Card
10. NAS Card
11. Camera Card
12. Climate Card
13. Motion Card
14. Water Purifier Card
15. Illuminance Card
16. Script Panel

⁠Card Management

• Support show/hide control
• Support drag-and-drop sorting
• Support custom size (desktop)
• Support add/edit/delete cards
• Support custom layout (3-5 columns)
• Support responsive layout

⁠Development

# Install dependencies
npm install

# Start development server
npm start

# Build production version
npm run build

⁠FAQ

1. Configuration not taking effect

   • Verify entity ID is correct
   • Try refreshing the page

2. Device shows offline

   • Check Home Assistant connection
   • Verify entity ID exists
   • Confirm device is online

3. Icons not showing

   • Check if icon name is correct
   • Confirm using supported icons

⁠Contributing

Pull Requests and Issues are welcome!

⁠License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). This means:

• You can freely use, modify, and distribute this software
• If you modify and distribute this software, you must:
  • Make your modified source code available to all users
  • License your modifications under AGPL-3.0
  • State your changes
• Any network use (like web applications) counts as distribution
• All derivative works must also be licensed under AGPL-3.0

For more details, see the full license text⁠.

⁠Star History

⁠Sponsorship

If you find this project helpful, feel free to sponsor!