Quickstart

Build

Quickstart

Get a widget on your overlay in about five minutes, with no build step and no TypeScript.

The fastest path is a custom widget.

1. Run TeamHUD. Launch the app and 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

3. Add a minimal widget.json.

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

4. Add 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.

Keep going

Build your first custom widgetTheming with --th-* tokens, settings, and the shared UI classes.

Build your first pluginThe full TypeScript/Lit path, when you need in-app data.