Overlabels

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.

---

The syntax

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.

---

Documentation

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.

---

Integrations

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.

---

Limits

• 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)

---

Tech stack

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

---

Self-hosting

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 dev

Required 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=reverb

Optional, 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.

---

Sustainability

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.

---

License

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.

---

Contributing

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.