Inside Component

Overlay Component

The Overlay component is the top-level stream layer. It owns the OBS browser URL, the full-scene stage, and the boxes that decide where sources appear.

What It Controls

An overlay should be added to OBS as one full-scene browser source. NekoBot then uses boxes inside that overlay to show different memes, videos, sounds, text, TTS, and other cues.

Use one overlay for one stream layout. If your OBS scene has a different layout for gameplay, chatting, or BRB, create separate overlays for those scene layouts.

Saved Overlay Selector

Overlay setup page
UI option
What it means
Select saved overlay...
Loads an existing overlay into the editor. The selected overlay controls the stage, boxes, sources, triggers, and OBS URL shown by the rest of the page.
New overlay
Creates a blank overlay definition. Use this when you need a new stream layout or want to keep a setup separate from an existing overlay.
Open Overlay
Opens the overlay viewer page. This is useful for checking what OBS will render, testing the default overlay, or manually copying the viewer URL.
Refresh
Reloads the saved overlay list when it is available. Use it if another page or browser tab changed the overlay list.

Empty State

When no overlays exist, NekoBot shows a message instead of the editor. Create a new overlay first; the name field, stage, and box controls appear after there is an overlay to edit.

Editor Toolbar

UI option
What it means
Overlay name
The saved name for this overlay. Name it after the OBS scene or layout, such as Main Stream, Chatting, or BRB.
Add box
Adds a box to the overlay. A box is where a source appears or plays when a trigger fires.
Save
Writes the current overlay definition to disk. Save after renaming, moving boxes, editing sources, or changing triggers.
Copy OBS URL
Copies the browser-source URL for this overlay. Add that URL to OBS as a browser source that covers the full scene.
Set Default
Makes this the default overlay used by the overlay viewer when no specific overlay is selected.
Delete overlay
Removes the saved overlay definition after confirmation. This deletes the layout and its box configuration, so use it only when the overlay is no longer needed.

Stage

The stage is the visual editing area for the overlay. It represents the stream canvas and lets you place boxes relative to what the audience will see.

  • Stream preview image is the background reference for positioning boxes.
  • Grid helps line up boxes cleanly against the stream layout.
  • Overlay layer contains the boxes that will render in OBS.

The stage is an editor preview. OBS only needs the copied overlay URL; it does not need the setup page itself.

Overlay Inspector

Overlay setup with the Stream Preview Inspector open

Click the empty Stream Preview area on the stage to open the Stream Preview Inspector. This selects the overlay preview itself instead of a box. If you click a box, NekoBot opens the box inspector instead.

UI option
What it means
Stream preview image URL
Sets the background image shown on the setup stage. Use this for an OBS screenshot or scene mockup so boxes can be positioned against the real stream layout.
Show Hint
Shows or hides the helper text on the stage preview. Turn it off once the preview image makes the layout obvious.
Upload image
Uploads a local image and uses it as the stream preview background.
Default
Resets the stream preview image back to the built-in default preview.

Example

  1. Create an overlay named Main Stream.
  2. Add one box in the top-right corner for meme videos.
  3. Add one lower-third box for chat callouts or TTS captions.
  4. Save the overlay.
  5. Copy the OBS URL and add it to OBS as a browser source covering the whole scene.