StreamElements HMR Server
⚠️ WORK IN PROGRESS: This extension requires a companion Chrome extension that is not yet published. The Chrome extension is currently under development and will be available soon.
A VS Code extension that provides instant hot reload for StreamElements widgets. Edit your widget files in VS Code and see changes instantly reflected in your StreamElements overlays without manual refreshing or re-uploading.
Features
- Instant Hot Reload: Automatically pushes your local widget changes to StreamElements overlays in real-time
- WebSocket Server: Broadcasts file changes to connected browser clients via WebSocket
- File Watching: Monitors
widget.html, widget.css, widget.js, and widget.json files
- Status Bar Integration: Shows server status and connected client count
Usage
Starting the Server
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P)
- Run the command:
SE HMR: Start Server
- The status bar will show "SE HMR: Running (8080)"
Or click the status bar item in the bottom-right corner to start/stop the server.
File Structure
Place your widget files in your workspace:
workspace/
├── widget.html
├── widget.css
├── widget.js
└── widget.json
When files change, the server broadcasts a JSON message:
{
"html": "<!-- content of widget.html -->",
"css": "/* content of widget.css */",
"js": "// content of widget.js",
"fields": "{ /* content of widget.json */ }"
}
Chrome Extension Integration
Use with the StreamElements HMR Chrome Extension to inject live updates directly into your StreamElements overlay editor.
Commands
SE HMR: Start Server - Start the WebSocket serverSE HMR: Stop Server - Stop the WebSocket serverSE HMR: Restart Server - Restart the WebSocket serverSE HMR: Change Port - Change the WebSocket server port
Extension Settings
This extension contributes the following settings:
streamElementsHmr.port: WebSocket server port (default: 8080)streamElementsHmr.autoStart: Automatically start server when opening workspace (default: false)
License
MIT
