WLED Live View Proxy is a Home Assistant integration that allows you to see a live preview of your WLED device directly on your Home Assistant dashboard. The integration is user-friendly and automatically configured: simply specify the IP address of your device, and the integration will handle the rest.
WLED.Live.View.Proxy.DEMO.mp4
Important
This integration was created with the help of ChatGPT for collaborative code writing, debugging, and editing. If you hold different views on using AI tools, please consider this. I believe this use is acceptable because the integration is non-commercial, open-source, free, and its goal is to enhance interaction and usability within Home Assistant.
- Inline actions on the card — tap / hold / double-tap with
more-info,toggle,navigate,url,call-service,perform-action. - New schema-based editor (
ha-form) — expandable Interactions and Advanced options. - Lit shim replaces the legacy Polymer bundle.
Show
wled-ws-card.jsnow works fully offline and no longer depends on the CDN or external imports.
-
🧠 JSON API Command Service
Addedwled_liveviewproxy.send_command— a new service for sending JSON commands via WebSocket with optional full state return. -
🎛️ Gradient Rotation Support
Thewled-ws-card.jscard now supports rotating the gradient direction directly in its config.
- Debug logging improved, WebSocket command handling optimized, and LitElement CDN updated with styling fixes.
-
Live Preview:
Using a persistent WebSocket connection, the integration displays the current color scheme of your WLED device in real-time through a dedicated graphical card. The preview is shown as a CSS gradient that updates instantly. Additionally, the card supports adjusting gradient brightness and direction.
-
Unlimited View Sessions:
You're no longer limited to a single WebSocket session for viewing WLED LiveView. You can create as many sessions as your Home Assistant resources allow. The number of active connections is displayed in a dedicated sensor named "WLVP - {WLED name}". This sensor also shows the number of native WebSocket connections of the WLED device itself. -
Automatic Configuration:
The integration doesn't require complex setup. When adding a device, you only need to provide the IP address. Everything else is configured automatically. -
User-Friendly Card for Home Assistant:
The card has a user-friendly interface clearly showing the current WLED effect in real-time, similar to the "peek" feature in the WLED web interface.
-
Secure and Simple Connection:
You don't need to set up nginx proxies, router port forwarding, or publish the WLED web interface online. Everything operates securely within your local network. -
Control Mode:
Enabling control mode updates sensor data instantly and activates device availability notifications. This uses an additional WebSocket connection to your WLED device. It also adds a light entity named "WLVP - {WLED name}", supporting basic operations (on/off and brightness adjustment) via WebSocket.
-
JSON API Command Service:
When Control Mode is enabled, you can send direct JSON API commands to your WLED devices using the dedicated Home Assistant servicewled_liveviewproxy.send_command. This service is particularly convenient for use in automations and scripts, allowing advanced device control and functionality beyond the standard capabilities of the official WLED integration.
Make sure HACS is installed:
If HACS is not yet installed, follow the official HACS installation instructions.
To install WLED Live View Proxy, follow the link below:
- Open Home Assistant and go to HACS:
On the sidebar, find and click the HACS icon. - Add Custom Repository:
- In HACS, go to the Integrations tab.
- Click Add Custom Repository.
- In the popup, enter the repository URL:
https://github.com/danishru/wled_liveviewproxy - Select repository type Integration.
- Click Add.
- Install Integration:
- After adding the repository, HACS will automatically detect the integration release.
- The integration named WLED Live View Proxy will appear in the Integrations section.
- Find it and click Install.
- Wait for the installation to complete.
The integration is now installed and ready to use via HACS!
- Copy the
wled_liveviewproxyfolder into thecustom_componentsdirectory of your Home Assistant configuration. - Restart Home Assistant.
- Add the integration via the web interface:
- Navigate to Settings → Integrations.
- Click Add Integration and select WLED Live View Proxy.
- Enter the IP address of your WLED device.
After installing the integration, you must additionally register the card in the dashboard resources:
- Or navigate to Settings → Dashboards → Resources.
- Add a new resource with the URL
/local/wled-ws-card.jsand set the resource type to module.
Click the link below and follow the configuration wizard instructions for WLED Live View Proxy:
Or open Settings → Integrations in Home Assistant, find WLED Live View Proxy, and follow the setup wizard instructions.
Once minimally configured, a sensor will be created. Next, add the card to your dashboard—it'll appear as "WLED Live View Card". The card features a simple and clear configuration interface, immediately displaying the Live View of the first sensor listed. You can easily select your desired sensor in the provided field. Additionally, you can adjust the gradient brightness. If you encounter issues, enable Info Mode or Debug Mode to view extra information in the browser console.
Important
The card uses LitElement, imported from an external CDN by default. If the card fails to load, it may be due to CDN unavailability (e.g., network restrictions or offline access). In this case, you can modify the import path in the wled-ws-card.js file to use a local or bundled version of LitElement.
Note: Starting from version 0.2.2, this is no longer an issue as the card now works fully offline and no longer depends on the CDN or external imports.
Tip
The card’s style can be customized with lovelace-card-mod. Example of a round card using Card Mod:
type: custom:wled-ws-card
sensor: "<your_entity_id>"
grid_options:
columns: 12
rows: 2
card_mod:
style: |
ha-card {
height: 100px;
width: 100px;
border-radius: 100%;
}Tip
You can also try the card quickly by importing the demo dashboard configuration from
docs/demo.yaml available in the repository.
When Control Mode is enabled, the integration provides access to a special Home Assistant service wled_liveviewproxy.send_command, which allows you to send any WLED JSON API command directly to your device.
This service is especially useful in automations and scripts, where you need precise control over effects, segments, presets, or Nightlight mode. It also returns the full WLED state (state + info), just like a /json/si response — if the command includes "v": true.
Otherwise, the response may be a simple {"success": true} depending on the type of command.
Important
The command is sent as-is — keys are not validated, and there is no error handling if the device responds with an invalid or partial state.
-
Activate Nightlight with fade effect:
action: wled_liveviewproxy.send_command data: targets: device_id: "<your_device_id>" entity_id: "<your_entity_id>" command: {"nl":{"on":true,"dur":30,"mode":1}}
-
Nightlight with sunrise simulation (mode 3) + return full state (
"v": true):action: wled_liveviewproxy.send_command data: targets: device_id: "<your_device_id>" entity_id: "<your_entity_id>" command: {"nl":{"on":true,"dur":45,"mode":3,"tbri":255},"v":true}
-
Activate effect on segment 1 with freeze, custom colors, and palette 0:
action: wled_liveviewproxy.send_command data: targets: device_id: "<your_device_id>" entity_id: "<your_entity_id>" command: {"seg":[{"id":1,"on":true,"col":["ffffff","000000"],"frz":t,"fx":25,"pal":0,"bri":255}]}
-
Custom lighting per segment:
action: wled_liveviewproxy.send_command data: targets: device_id: "<your_device_id>" entity_id: "<your_entity_id>" command: {"seg":[{"id":0,"on":true,"fx":71,"col":["ff00ff"]},{"id":1,"on":true,"fx":78,"bri":200,"col":["0000ff","00ffc8"],"sx":150}]}
Tip
You can use both device_id and entity_id in the targets field. The service will automatically resolve and dispatch the command to the correct device.
The integration directly connects to your WLED device via the local network, creating a dedicated WebSocket channel. This channel transmits real-time effect data. The data is then converted into a clear CSS gradient displayed on a graphical card in Home Assistant. This approach ensures fast updates and ease of use: you instantly see changes without needing external service configurations.
This integration was built with AI assistance, and while I'm not a professional programmer, I understand how this code works and what it achieves. The code might not be fully optimized, and you might have suggestions for improvement. Please join the development, submit pull requests, and help improve the integration!
Regarding security—the WebSocket connection in Home Assistant is generated based on a unique entry_id, and the channel transmits only a CSS gradient string, making its use secure.
This integration was born from a personal need—I wanted a live preview of my WLED light string right from the Home Assistant interface, accessible from anywhere in the world. The standard WLED interface operates over HTTP only, and using an iframe card in Home Assistant doesn't securely embed HTTP content into an HTTPS interface. Thus, the idea emerged to create a WebSocket proxy that securely transmits data through Home Assistant.
The integration was developed with the help of ChatGPT, and the card design was inspired by standard Home Assistant cards, ensuring it feels native and intuitive.
I welcome your suggestions and ideas for improving the integration—please leave your requests via issues. If you liked the integration or found it useful, please star the repository to help increase its visibility!