HypeVault

Overlays

HypeVault overlays are rendered in your browser source in OBS. Each widget is its own URL — no canvas editor, no scene model, no extra software to install.

How it works

When you enable a widget in Dashboard → Widgets, HypeVault generates a short signed URL like:

https://overlays.hypevault.io/o/<widgetId>/<token>

That URL renders the widget in a tiny static page. Drop it into OBS as a browser source and the widget connects to HypeVault's real-time event bus over WebSocket. New events show up instantly.

Adding to OBS

  1. In OBS, under Sources, click + → Browser.
  2. Name the source (e.g. "Alerts").
  3. Paste the widget URL.
  4. Set the width and height to the dimensions listed above the URL on the widget config page.
  5. Click OK.
Tip
OBS browser sources cache aggressively. If you change a widget's config and don't see it update, right-click the source → Refresh cache of current page.

One widget per browser source

Each widget is intentionally a separate source so you can position alerts in one corner, the goal bar across the top, the game on a side scene, and the activity ticker on a bottom strip — without anything constraining the others. Move them between scenes freely.

Custom HTML/CSS/JS widget (Paid tier)

Paid streamers can upload a custom widget with arbitrary HTML/CSS/JS. The widget runs in a sandboxed iframe with the HypeVault event bus injected, so you can react to any event you want with completely custom visuals.

Watermarks

Free-tier overlays display a small Powered by HypeVault watermark in a corner. The Paid tier removes it entirely.