Build custom Twitch overlays and alerts in HTML and CSS, powered by live data tags, real-time controls, and external integrations.
There is no* drag-and-drop editor. There is no proprietary file format. There is no runtime you do not control. Your overlay is a webpage, and Overlabels is the engine that keeps it alive.
overlabels.com - free forever, no paywalls, no tiers.
Tip
* There actually is a drag-and-drop editor now, but it's not ready for prime time. You can definitely use it and it's a lot of fun to play with. The results are great, but the Builder itself is definitely not considered "done". ~Jasper, late August 2026.
Overlabels uses one deliberate, collision-resistant syntax: triple square brackets. It never clashes with HTML, CSS, JavaScript, or any template engine you might meet in the wild.
<span class="followers">[[[followers_total]]]</span>Drop a tag anywhere in your HTML or CSS and Overlabels replaces it with live data when the overlay renders. The whole system - Twitch data, live controls, conditionals, formatting, math - runs through that one form.
Full documentation lives at overlabels.com/help. It is the canonical source and it stays in sync with what is actually deployed.
Start here
| Page | What it covers |
|---|---|
| Why Overlabels | The pitch, for people who write code |
| For Creators | What it actually is beneath the HTML/CSS surface |
| For Designers | Handoff guide: what to deliver, what to avoid |
| Manifesto | Why it exists and the principles behind it |
Building overlays
| Page | What it covers |
|---|---|
| Overlays vs Alerts | The two surfaces and how they fit together |
| The Builder | Compose an overlay on a grid, no code required |
| Blocks | Reusable pieces: authoring, CSS scoping, controls |
| How an overlay renders | The pipeline end to end, and why scripts are stripped |
| Testing your alerts | Fire real Twitch events from a terminal |
The template language
| Page | What it covers |
|---|---|
| Conditional and event tags | if/elseif/else, comparisons, event payload tags |
| Formatting pipes | Numbers, durations, currencies, dates. Locale-aware |
| Math engine | Waves, modulo wheels, timestamp racing |
Live data
| Page | What it covers |
|---|---|
| Controls | Text, numbers, counters, timers, toggles |
| Expression controls | Client-side formulas over any other control |
| Integration presets | Every auto-managed control, searchable |
| Lists | Raffles, queues, quote walls, leaderboards |
| Lists in realtime | Read a list as JSON and subscribe over WebSocket |
Reference
| Page | What it covers |
|---|---|
| Reference | Every template tag, EventSub event and foreach field |
| Overlay access tokens | The credential in your overlay URL, and what to do if it leaks |
| Twitch chat bot | Letting viewers and mods change controls from chat |
| Free resources | Colors, fonts, animations and other tools |
Tip
Reading this as a machine? Every help page is also plain markdown: append .md to any URL
(/help/conditionals.md). For a single self-contained primer, start at
overlabels.com/llms.txt.
Twitch EventSub drives followers, subs, gift subs, resubs, cheers, raids, channel point redemptions, and stream online/offline. Five donation services sit alongside it - Ko-fi, StreamLabs, Fourthwall, Buy Me a Coffee, and Throne. Every one of these external integration exposes the same six controls, so a template written against one ports to another by swapping the namespace.
<span>[[[c:kofi:latest_donor_name]]]</span> <span>[[[c:throne:latest_donor_name]]]</span>Connect a service and its controls appear automatically. See integration presets for the full list.
- Up to 1000 overlays per account, 50 controls per overlay.
- No asset hosting. Although you can upload one screenshot per overlay.
<script>,<iframe>,<embed>and similar tags are stripped from template content before storage. External stylesheets, fonts, icon libraries, and CDN-hosted CSS are all fine. Inline scripts are not. (why)- Overlay access uses 64-character hex tokens passed in the URL fragment, so they are never sent to the server. Tokens are hashed on storage, revocable, and can expire or be pinned to specific client IPs. (details)
| Layer | Technology |
|---|---|
| Backend | Laravel 13, PHP 8.4 |
| Frontend | Vue 3 (Composition API), TypeScript |
| Styling | TailwindCSS v4 |
| UI components | RekaUI/Shadcn/Vue |
| Full-stack bridge | Inertia.js |
| Real-time | Laravel Reverb (self-hosted WebSocket) |
| Code editor | CodeMirror |
| Database | PostgreSQL |
| Queue | Redis |
| Build | Vite |
No support is provided when you self-host Overlabels. The following is for development and testing.
git clone https://github.com/jasperfrontend/overlabels
cd overlabels
composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan migrate
npm run build
composer run devRequired environment variables:
TWITCH_CLIENT_ID=
TWITCH_CLIENT_SECRET=
APP_URL=https://your-public-url.com
APP_STARTER_KIT_ID=
QUEUE_CONNECTION=redis
CACHE_DRIVER=redis
DB_CONNECTION=pgsql
BROADCAST_CONNECTION=reverbOptional, for the OAuth-based integrations only. Ko-fi, Buy Me a Coffee and Throne authenticate per-user with a token or a signature, so they need no environment configuration at all.
# StreamLabs (OAuth + Socket.IO listener)
STREAMLABS_CLIENT_ID=
STREAMLABS_CLIENT_SECRET=
STREAMLABS_LISTENER_SECRET=
# Fourthwall (OAuth)
FW_CLIENT_ID=
FW_CLIENT_SECRET=
FW_AUTH_URL=
FW_REDIRECT_URL=
FW_HMAC=Your APP_URL must be publicly reachable for Twitch EventSub webhooks to deliver. For local development,
use ngrok or a similar tunnel.
Overlabels is free forever, for anyone. Its footprint is small: the whole backend runs on a few instances and hosting costs less than a PhpStorm licence. There are plans beyond that, but nothing that turns the overlays into a paywall.
If you like what this is, a Ko-fi tip is always welcome. Mention this README in your tip so I can link your support back to Overlabels.
Overlabels is licensed under the GNU Affero General Public License, version 3 or later
(AGPL-3.0-or-later), as of August 9th, 2026. The full text is in LICENSE.
Before that date this repository carried no licence at all. The "license": "MIT" line in composer.json
arrived untouched in the initial Laravel scaffold commit (783b81fc) and was never a deliberate choice; no
LICENSE file granting MIT terms was ever published here. The relicense is forward-only and no history has
been rewritten.
In practice: you can read, run, modify, and share the source freely. If you self-host a modified version that other people can reach over a network, AGPL section 13 requires you to offer those users the source of your modified version. Running an unmodified copy for yourself carries no such obligation. This governs the Overlabels source code, not the overlay templates, kits, and controls you create with it - those are yours.
Questions, ideas, and improvements are welcome. Open an issue or a pull request.
CONTRIBUTING.md covers the workflow, the house rules for user-facing copy, and how to sign off your commits. Participation is covered by the Code of Conduct. Security issues go through SECURITY.md.
Contributions are accepted under the same AGPL-3.0-or-later terms as the rest of the project.
Overlabels has been created by JasperDiscovers.
