Quickstart

The fastest path to a widget on screen is a custom widget — no build step, no TypeScript.

1. Make sure TeamHUD is running

Launch the TeamHUD app. Leave it running; the overlay live-watches your custom-widget folders and reloads on save.

2. Create a widget folder

Custom widgets live in a watched folder — your personal one survives app updates:

~/.teamhud/custom-widgets/my-widget/
  widget.json
  index.html

Minimal widget.json:

{
  "name": "My Widget",
  "html": "index.html",
  "size": { "width": 300, "height": 220 }
}

A starter index.html:

<!doctype html>
<body>
  <div id="app" class="teamhud-interactive" style="padding: 12px; color: var(--th-text-primary);">
    Hello from my widget.
  </div>
</body>

The overlay picks up the folder within ~1.5 s and shows a hub for it. Edit index.html and it hot-reloads.

3. Keep going

• Build your first custom widget — theming with --th-* tokens, settings, and the shared UI classes.
• Build your first plugin — the full TypeScript/Lit path, when you need in-app data.