> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streamwizard.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Your first widget

> From New Widget to an alert firing in the preview, in ten minutes.

## 1. Create it

**Dashboard → Overlay Editor →** open an overlay **→ Widgets → Library →
My Widgets → New Widget**. Name it and you land in the code editor. The
starter code is a working follow alert; you're editing, not starting from
zero.

## 2. Look around

Left side: HTML, JS, Fields, and Extra CSS tabs. Right side: live preview on
a checkerboard (that's the transparency you'll have over your stream).

## 3. Fire a test event

Hit the **Follow** button above the preview. The starter alert animates in,
holds, and fades out. Sub, Cheer, and Raid buttons send those payloads.
**Connect** switches to real events from your channel.

## 4. Change something

In the JS tab, find `'just followed!'` and make it say something else. The
preview hot-reloads about half a second after you stop typing. **Ctrl+S**
formats and saves.

## 5. Put it on an overlay

Back in the overlay editor: **Widgets → Library → My Widgets →** your widget
**→ Add to canvas**. Position it, save, done. It's now live wherever that
overlay runs.

## Where to next

* [Fields](/widgets/fields): settings anyone can change without reading code.
* [Event reference](/widgets/api/events): every payload, exactly as it arrives.
* [State](/widgets/state): keep counters and totals between streams.
* [Publishing](/widgets/publishing): share your widget with everyone.