StreamElements Hot Reload (HMR)

About

StreamElements Hot Reload (HMR) is a development tool designed to streamline the overlay creation workflow for StreamElements creators and developers by enabling real-time hot reload functionality. This Chrome extension works in conjunction with the official VS Code extension (https://marketplace.visualstudio.com/items?itemName=VygandasEidukisExtensions.stream-elements-hmr-server) to provide a seamless development experience.

Traditional overlay development requires constant manual refreshing to see code changes take effect, which interrupts your workflow, breaks your focus, and wastes valuable development time. This extension eliminates that friction by automatically updating your overlay preview the moment you save your work. When connected to the local development server provided by the VS Code extension, any changes you make to your overlay code are instantly reflected in the browser without manual page refreshes, significantly accelerating the development process by providing immediate visual feedback as you work.

The extension injects a lightweight control panel into StreamElements overlay pages where you can configure your local WebSocket server port and manage your connection. Once connected, you can focus entirely on your code while the extension monitors your connection status, detects widget selection, and provides clear visual feedback throughout your development session. Whether you're fine-tuning CSS animations, debugging JavaScript functionality, or adjusting layout styles, you'll see results instantly.

Developers benefit from faster iteration cycles, reduced context switching, and a more efficient development experience. The companion VS Code extension is required to run the local WebSocket server that enables hot reload functionality. This Chrome extension connects exclusively to localhost and does not collect or transmit any user data. It operates only on StreamElements overlay editor pages and remains inactive on all other websites.

This tool is ideal for developers who regularly create or maintain StreamElements overlays in Visual Studio Code and want to optimize their development workflow.