# Building a custom design for streamoverlay.app
A **design** is an installable overlay you author with HTML, CSS, and JavaScript. Other streamers can install your design into their own OBS with one click. This guide is also intended to be readable by an LLM — paste the whole file into Claude / ChatGPT / Gemini and ask it to build the design you want.
The live editor is at `https://streamoverlay.app/templates` → **+ New ▾**.
---
## Quick start
1. Go to **`https://streamoverlay.app/templates`**.
2. Click **+ New ▾** → pick **Empty**, **Default**, or **Example**.
3. Enter a name and pick a **kind** (`custom`, `alerts`, `chat`, `goal`, `eventlist`, `labels`, `leaderboard`, `counter`, `countdown`, `tipjar`, `emoterain`).
4. Edit four panes: **HTML body**, **Style** (CSS), **Script** (JS), **Config schema** (optional JSON).
5. Click **Publish** to mint a new immutable version.
6. Install on your own channel via the **Install** button on the design row.
7. Copy the resulting overlay URL on the **My Overlays** page and paste it into OBS as a Browser Source.
---
## The four editor panes
### HTML body
You author what goes **inside ``**. The platform wraps it in a complete document with a UTF-8 charset, the viewport meta, `style.css` linked, and your `main.js` loaded as a module. So:
```html