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
Building overlays
The template language
Live data
Reference
[!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.
