Editor Guide
The editor has these main areas:
- Toolbar (top) — Open/Save, Settings, Help, server controls, Canvas Settings dropdown
- Scene Tabs (below toolbar) — Switch between scenes, add new ones
- Left Sidebar — Layers panel and Media library
- Canvas (center) — Visual workspace where you position modules
- Right Sidebar — Modules palette and Properties panel
- Play/Stop Controls (above canvas) — Preview animations
Click the + button on the left of the scene tabs bar.
Click a scene tab to switch to it. Each scene has its own module layout.
Click the canvas background (deselect all modules) to see Scene Settings in the Properties panel:
- OBS Scene — The OBS scene name that triggers this layout
- Transition Type — Fade or None
- Duration — Transition time in seconds
Click the ✕ on a scene tab (can't delete the default scene).
Click the ⧉ button on the active scene tab to create a full copy of the scene with all its modules.
Drag a module from the Modules panel (right sidebar) onto the canvas.
Drag an image or video from the Media panel directly onto the canvas. It automatically creates the right module type and sets the source.
Drag image/video files from Windows Explorer directly onto the canvas. They get uploaded to the media library and added as modules.
Click and drag a module on the canvas to reposition it.
Keyboard movement (select a module first):
- Arrow keys — move 5px
- Shift + Arrow — move 20px
- Alt + Arrow — move 1px
Select a module, then drag the handles on its edges/corners.
Select a module to see its properties in the right sidebar:
- ID — Editable name for identifying the module
- Position & Size — X, Y, Width, Height (also editable by typing)
- Module-specific settings — Source file, opacity, fit mode, etc.
Click the ⚙️ [Type] Settings button in Properties to open the full settings panel for that module type (chat styling, visualiser config, etc.)
The Layers panel (left sidebar) shows all modules in the current scene:
- Top of list = rendered on top (highest z-index)
- Bottom of list = rendered behind
- Drag and drop layers to reorder
- Use ▲ ▼ buttons on hover
- 👁 button to toggle visibility (hidden modules stay in config but don't render)
- 🗑 button to delete
Select a module and click the ▶ play button (top-right of the module) to start its simulation.
Click ▶ Play All above the canvas to start all simulations simultaneously. Click ⏹ Stop All to reset.
The chat module simulates live messages when you click the ▶ play button. Test messages are auto-generated during simulation.
Click the 📡 button in the toolbar to open the WebSocket Admin panel. Send raw messages to connected overlay clients for testing chat, emotes, and scene changes.
The Media panel (left sidebar) manages your uploaded files:
- 📁 Upload — Browse for files to add
- 📂 New Folder — Create subdirectories for organisation
- Drag & Drop — Drop files from your computer onto the panel
- Click a file to select it (when a module needs a source)
- 🗑 on hover to delete
Files are stored in www/media/ and referenced as /media/filename.ext in the config.
- ⚡ Save — Quick save to the current file
- 💾 Save As — Save to a new location
- Ctrl+S — Keyboard shortcut for save
- When the server is running, saving automatically reloads all connected OBS browser sources
- Ctrl+Z — Undo
- Ctrl+Y — Redo
- F1 — Open Help panel
- Works for module moves, resizes, additions, deletions, and setting changes