A fully local stream overlay system — no cloud, no third-party dependencies. Design scenes in a desktop editor, serve them to OBS as a single browser source.
Uses Streamer.bot for real-time events (chat, emotes, scene switching). Renders everything to a single HTML5 canvas for minimal OBS memory usage.
- Visual Scene Editor — Drag and drop modules, resize and position visually
- Multi-Scene Support — Different layouts for Gaming, Just Chatting, BRB, etc.
- OBS Scene Switching — Overlay layout changes when OBS switches scenes (via Streamer.bot)
- Live Preview — Simulate chat, emotes, audio visualiser, and webcam in the editor
- Built-in Web Server — Serves overlays directly to OBS, no separate setup
- Live Reload — Save in the editor, OBS updates instantly
- Media Library — Upload and manage images/videos, drag onto scenes
- Modular Architecture — Drop a folder into
www/modules/to add custom modules - Canvas Rendering — All modules render to a single canvas for consistent output
- Per-Instance Settings — Multiple webcams, images, videos, audio visualisers per scene
- Download the latest installer from Releases
- Launch CanvasUI Stream Manager
- In OBS, add a Browser Source with the URL shown in the editor toolbar
- Design your scenes, hit Save — OBS updates live
Full documentation is in the Wiki:
git clone https://github.com/barkermn01/CanvasUI.git
cd CanvasUI/editor
npm install
npm run devSee the Developer Guide for module creation, schema system, and architecture details.
cd editor
npm run buildOutput: editor/dist/CanvasUI Setup x.x.x.xxx.exe
LGPL-3.0 — See LICENSE for details.
The core application is licensed under the GNU Lesser General Public License v3. Third-party modules that communicate through the public module API (window.Modules, editorRegister, info.json schema) are NOT considered derivative works and may use any license.
