Local-file overlay • Timed automation • Hotkeys

Lower thirds that feel native to your production.

Build unlimited lower thirds inside OBS Studio, style them with HTML/CSS templates, then trigger them via a clean dock, hotkeys, or timed automation. No webserver. No ports. Just a portable local file Browser Source.

Download plugin Watch the core video

Unlimited

Lower thirds per profile

Local file

Predictable browser source

Race-safe

Show/hide animation lifecycle

Important update for older installs

The built-in local webserver and scene binding are removed. SLT now generates a fixed lt.html and swaps your selected Browser Source to a local file. If you used http://127.0.0.1:..., replace it with the local file workflow.

Why streamers install Smart Lower Thirds

Lower thirds are not just decoration they provide clarity and retention: who is speaking, what segment is live, what to do next. SLT lets you run that layer reliably without touching your scene layout.

Unlimited lower thirds

Create a library for guests, segments, sponsors, socials, and rotating CTAs each with its own template and settings.

Templates (HTML/CSS/JS)

Design your look with web tech. Import/export packs, reuse across shows, and keep assets portable.

Dock + hotkeys

Trigger show/hide instantly from the dock or map hotkeys for Stream Deck-friendly control.

Timed automation

Auto-show every X seconds for Y seconds. Great for rotating socials, sponsors, or reminders.

Position presets

Bottom-left/right, top-left/right, center, plus top-center and bottom-center presets.

Lifecycle-safe animations

Race-safe show/hide logic prevents flicker when a trigger happens during an animation.

Videos

Start with the core walkthrough, then continue with the demo and additional setup tips.

Core walkthrough: templates, browser source selector, and the new local-file artifact workflow.

Workflow in OBS

Designed to be “set and forget”: one Browser Source in your scene, then everything is controlled from the dock.

1) Pick your output directory

SLT writes the generated overlay artifacts to disk: lt.html, lt-styles.css, lt-scripts.js, plus state files.

Generated files

lt.html lt-styles.css lt-scripts.js lt-state.json lt-visible.json

2) Select a target Browser Source

New workflow: select an existing Browser Source from the plugin UI. SLT can automatically swap it to the generated local file and enforce the configured width/height.

Browser source config

is_local_file = true local_file = lt.html width / height

3) Trigger lower thirds

Show/hide via the dock, map hotkeys, or enable timed automation. Optional: enable Dock Exclusive Mode to keep only one lower third visible at a time.

Dock: click show/hide instantly
Hotkeys: show/hide/toggle per item
Timed: repeat every X sec, visible for Y sec (set X=0 to disable)

Reliable on-air behavior

The overlay polls lt-visible.json and runs a race-safe animation state machine: show/hide intents cannot “fight” each other, and template hooks can run before/after transitions.

__slt_beforeHide() optional hook

__slt_onShown() optional hook

Parent <li> listens for its own animation end only

Placeholders

Templates are plain HTML/CSS/JS. SLT injects values at generation time and scopes CSS under each lower third’s {{ID}}. Recent additions include {{OPACITY}} and {{RADIUS}}.

Placeholder	Meaning	Where
`{{ID}}`	Unique lower third instance ID	HTML / CSS / JS
`{{TITLE}}`	Main line (name, topic, headline)	HTML
`{{SUBTITLE}}`	Secondary line (role, handle, description)	HTML
`{{BG_COLOR}}`	Background color	HTML / CSS
`{{TEXT_COLOR}}`	Text color	HTML / CSS
`{{FONT_FAMILY}}`	Font family (fallback to Inter)	HTML / CSS
`{{PROFILE_PICTURE_URL}}`	Profile picture URL (local relative path). If unset resolves to `./`.	HTML
`{{OPACITY}}`	Opacity (0–100) you can apply in CSS (e.g., via `rgba` or `opacity`)	CSS
`{{RADIUS}}`	Border radius value (0–100) used by your templates	CSS

Example usage

.slt-card{
  border-radius: {{RADIUS}}%;
  background: {{BG_COLOR}};
  color: {{TEXT_COLOR}};
}

Opacity example

.slt-card{
  /* if you store BG_COLOR as hex, keep opacity separate */
  opacity: calc({{OPACITY}} / 100);
}

Install

Install, enable the dock, select a Browser Source, and you are ready to trigger lower thirds.

Quick steps

Download the latest release for your OS.
Install (or copy the plugin files to your OBS plugins folder).
Restart OBS Studio.
Enable the Smart Lower Thirds dock from Docks.
In SLT settings: choose Output Directory.
Select your Target Browser Source (from the dropdown) and set width/height.
Create your first lower third, then trigger it from the dock or hotkeys.

Get releases Watch videos

Support & resources

If SLT helps your production, you can support development and grab template packs.

Template shop Ko‑fi PayPal

Credits

Animate.css for CSS animations
MiniZip for template pack zip handling