NWD Stream Overlay

A transparent 1920×1080 OBS overlay for Negev Web Developers meetup livestreams.

It provides a branded top bar (logo, community name, talk title, speaker), a left info panel with a blinking LIVE badge, and a bracketed picture-in-picture camera frame — all with a transparent background so it layers cleanly over your slides and camera in OBS.

The talk title and speaker name are editable live from within OBS and persist across scene switches, refreshes, and restarts.

Features

• 🎨 Branded chrome — gradient top strip, logo, grid/dot textures, gold accents
• 🔴 Animated LIVE badge
• 🎥 Bracketed picture-in-picture camera frame
• ✏️ Live-editable talk title & speaker name (no HTML editing mid-stream)
• 💾 Edits persist via localStorage across scene switches, refreshes, and OBS restarts
• 📐 Auto-scales to fit any window/canvas size
• 🧩 Mockup layer to preview source placement (toggleable)

Usage in OBS

You can point OBS at the hosted version (recommended) or a local file.

Hosted (URL)

The overlay auto-deploys to GitHub Pages on every push to main:

https://negev-web-dev.github.io/obs-template/

1. Add a Browser Source in OBS and choose URL.
2. Paste the URL above.
3. Set Width to 1920 and Height to 1080.
4. Layer it above your slides/screen-share and camera sources.

First-time setup: in the repo, go to Settings → Pages and set Source to GitHub Actions.

Local file

1. Add a Browser Source in OBS pointing to NWD Stream Overlay.dc.html (Local file).
2. Set Width to 1920 and Height to 1080.
3. Layer it above your slides/screen-share and camera sources.

Editing the title & speaker

1. Right-click the browser source → Interact.
2. Click the talk title or speaker name and type. Changes appear live.
3. Press Enter to confirm (fields stay single-line).

Text is saved to the browser source's localStorage, so it stays in place across scene switches, refreshes, and OBS restarts.

Layout

The overlay is designed for a 1920×1080 canvas:

Region	Position / size
Screen share / slides	fills the area right of the left panel
PiP camera feed	24, 770 — 452 × 254
Left info panel	0, 76 — 504 × 980
Top bar (title + speaker)	full width, 76px tall

Development / Preview

This is a DeckCards (.dc.html) component. Open NWD Stream Overlay.dc.html in a browser to preview.

Editor props (with defaults):

Prop	Default	Description
talkTitle	Building the Future of Web	Talk title shown in the top bar
speakerName	Jane Doe	Speaker name shown in the top bar
showMockSources	true	Show placeholder mockups for setup

Set showMockSources to false (or remove the mockup layer) before going live — it only helps you position your OBS sources.

Assets

• uploads/NegevWebDevelopers_logo_2.png — community logo used in the top bar and as a watermark.