Recording Overlay
A browser page designed to be captured by OBS (or similar software) as a browser source. It adds timecode, scene name, and other live show information directly into the recorded video — burned in at capture time, without needing to edit the footage afterward.
Add it as a browser source in OBS at the correct resolution, and the overlay updates live during the show.
Layout
Section titled “Layout”The info panel can be positioned at the top or bottom of the screen (configurable in preferences). It spans the full width with a dark semi-transparent background, and contains up to four configurable slots across two rows (two slots per row):
- Top row (left and right) — typically used for primary info like timecode and scene name
- Bottom row (left and right) — typically used for secondary info like wall clock and show name
The panel style controls the visual appearance of the info panel. Floating gives the panel a rounded border and a soft glow, detached from the screen edge. Legacy uses a full-width bar without any floating effect.
In addition to the info panel, the overlay can display a Cue Waterfall and a Theater Numberline — both are optional and configured separately in preferences.
Each of the four slots can display one of the following:
| Slot content | Description |
|---|---|
| Timecode | Current TC value in HH:MM:SS:FF format |
| Range or Scene | Range name if ranges are defined, otherwise scene name + elapsed time |
| Range | Current range/scene name only |
| Scene | Scene name + elapsed time |
| Scene Name | Scene name only (no elapsed) |
| Scene Elapsed | Elapsed time since scene started |
| Show Name | The show name from settings |
| Wall Clock | Current wall-clock time (YYYY-MM-DD HH:mm:ss) |
Default slot order: Timecode → Range or Scene → Wall Clock → Show Name.
Preferences
Section titled “Preferences”Move the mouse to reveal the CueCollab icon in the top-right corner, then click it to open preferences.
Info Panel
Section titled “Info Panel”| Preference | Description |
|---|---|
| Panel Position | Place the info panel at the top or bottom of the overlay |
| Panel Style | Floating or Legacy layout. |
| Slot 1–4 | Choose what each slot displays |
| Slot 1–4 Color | Custom text color per slot |
| Slot 1–4 Size | Custom font size in pixels per slot |
| Background Color | Background color for the overlay panel |
Cue Waterfall
Section titled “Cue Waterfall”An optional side panel showing upcoming timecode cues in a scrolling waterfall — the same view as the Waterfall Display, but embedded inside the overlay.
| Preference | Description |
|---|---|
| Show Waterfall | Enable or disable the cue waterfall panel |
| Waterfall Items | Number of upcoming cues to display (default 15) |
| Waterfall Width | Width of the waterfall panel as a percentage of the overlay width |
| Waterfall Side | Position the waterfall panel on the left or right side |
| Waterfall Show Tags | Only show cues matching these tags. Leave empty to show all. |
| Waterfall Hide Tags | Hide cues matching these tags. |
| Keep Last Cue | The last confirmed cue stays visible and counts up until the next cue is called. |
| Show Blocks | Show the upcoming blocks between the cues. |
Theater Numberline
Section titled “Theater Numberline”An optional horizontal line drawn across the overlay at a configurable position — useful for marking a reference line such as a stage edge, curtain line, or camera boundary in the recorded video.
| Preference | Description |
|---|---|
| Show Numberline | Enable or disable the numberline |
| Start X / Y | Start point of the line as percentages of the overlay width/height |
| End X / Y | End point of the line as percentages of the overlay width/height |
| Color | Line color (defaults to white) |
| Amount | Number of evenly-spaced tick marks drawn along the line (default 8) |
OBS Setup
Section titled “OBS Setup”- In OBS, add a Browser Source and point it to the
/recording/overlayURL on your CueCollab server. - Set the browser source width/height to match your recording resolution (e.g. 1920×1080).
- Enable “Shutdown source when not visible” and “Refresh browser when scene becomes active” for clean behavior.
- Configure the overlay layout and colors from a regular browser tab, then copy the full URL (with all query parameters) into OBS.
The overlay background is semi-transparent by default — the video behind it shows through.
Configuring Preferences from inside OBS
Section titled “Configuring Preferences from inside OBS”Rather than opening a separate browser tab to configure the overlay, you can adjust preferences directly inside OBS:
- In the Sources panel, select the overlay browser source.
- Click the Interact button in the toolbar (or right-click the source → Interact). This opens an interactive browser window showing the live overlay.
- Resize the Interact window to make it larger so the preferences panel is easy to work with.
- Move the mouse over the overlay to reveal the CueCollab icon in the top-right corner, then click it to open preferences.
- Adjust slots, colors, waterfall, and other settings. Changes apply immediately.
- Close the Interact window when done — OBS will use the updated URL automatically.
- URL-based preferences. All preferences are stored in the URL — once configured, the link can be copied directly into OBS as the browser source URL so it reopens with the same layout every session.
- Use Hybrid MP4 in OBS. Set OBS output format to Hybrid MP4, not standard MP4. This is required for reliable in-browser streaming in the Review module.
- Match the resolution exactly. Set the OBS browser source width and height to match your recording resolution — mismatched dimensions will crop or letterbox the overlay.
- Floating layout on wide screens. Enable Floating Layout on 1920px+ displays for a polished look with a rounded, glowing panel instead of a full-width bar.