Welcome to Overlabels Help

Start with something you want on screen. The tutorials are short and end with a working overlay; the guides underneath explain how the pieces work when you want to go further.

Reading this as a machine? Every page below is also available as plain markdown - append .md to any URL (/help/conditionals.md). This index is at /help.md. The bare URLs are real server-rendered HTML and carry the full prose, so either form works; the .md is just the same content without the navigation around it. For a single self-contained primer on writing overlays, start with /llms.txt - what it contains and how to hand it to an assistant is explained at llms.txt.

I want to...

Short, copy-and-paste tutorials. Each one ends with something on screen.

Show chat on screen - live Twitch chat in your overlay with one loop. Badges, emotes, colours, and the settings that decide what gets drawn.
Show my latest follower - one tag, plus what to draw when you have no followers yet and why that matters.
Show my last 5 subscribers - a list on screen, with gifted subs credited to the person who paid.
Show my latest donator, from any source - one name across all five donation services, using latest() and the automatic _at timestamps.

How it works

Getting oriented

Why Overlabels - the pitch, for coders. Third-party data normalization, math on any value, Expression Controls, and why this thing is a bit special.
For Creators - what Overlabels actually is, beneath the HTML/CSS surface. The reactive value graph, the live data sources, the math layer, and an open call for collaborators.
For Designers - a handoff guide for designers working on overlays: the two surfaces, the unknown-background problem, variable-length content, fluid layout, CSS animation, and a deliverables checklist.
Manifesto - what Overlabels is, why it exists, and the principles behind it.

Building overlays

Overlays vs Alerts - the two kinds of overlay and how they fit together: why alerts are most powerful rendered inside a static overlay's DOM, plus Targeting vs Triggers.
The Builder - compose an overlay without writing code: set up a grid, click a cell, pick a block, save. Compiles to a plain static overlay that works with everything else.
Blocks - reusable building pieces for the Builder: how to author one, how CSS scoping and snapshots keep everyone safe, and how controls travel with your block.
The code editor - autocomplete for every tag, your controls and your Lists, and bang snippets like !chat that write a whole block for you.
How an overlay renders - the pipeline end to end: boot, tag replacement, conditionals, live updates, alert render flow, and why scripts are stripped.
Styling with Tailwind - utility classes compile at save time, not in the browser: which Tailwind v3 syntax works, why borders need one extra line, and when to just write CSS.
Testing your alerts - fire any of 28 real Twitch events at your own account from a terminal, instead of waiting for a real follower.

The template language

Conditional and Event Tags - if/else logic, comparisons, event data tags, and integration tags for Ko-fi and StreamLabs.
Formatting Pipes - format numbers, durations, currencies, and dates with pipe syntax. Locale-aware, zero dependencies.
Math Engine - waves, modulo wheels, pseudo-random one-liners, timestamp racing - the math behind live overlays.
Why tags are parsed exactly once - substituted values are never re-scanned for tags. The security rule behind it, and what it means while writing templates.

Live data

Controls - mutable values you can change live - text, numbers, toggles, timers, and more.
Expression Controls - math-powered live data - no code, no server. Build chained formulas like the Haversine distance, donation progress bars, and more.
Integration Presets - every auto-managed control across Twitch, Ko-fi, Streamlabs, Fourthwall, BMAC, and Overlabels GPS - all in one searchable reference.
Lists - user-owned arrays of values. Raffles, queues, quote walls, leaderboards, donation goals - all driven from the dashboard or chat with one primitive and ten verbs.
Lists in realtime - the builder guide: read a List as JSON, subscribe to live updates over WebSocket, and add your own custom page (a wheel, a leaderboard) to OBS. Step by step.

Chat

Twitch Chat in an Overlay - render live chat with one foreach loop. Every per-message tag, badges and emotes, Shared Chat, the display filters, and the four chat controls.
Twitch Chat Bot - the @overlabels bot joins your channel so viewers and mods can change controls from chat.
Chat Castle - chat-driven dungeon raid. Commands, rounds, energy blocks, chest contents, and how to not lose the HP pool.

Look something up

Reference - every template tag, EventSub event, and foreach field. Press Alt+R from anywhere, or use the search box at the top of this page - it covers tutorials, guides and reference entries at once.
Overlay Access Tokens - what the 64-character token in your overlay URL is, why it lives after the #, and what to do the moment one leaks.
Why Ko-fi - why we chose Ko-fi as our first External Integration over Patreon, Stripe, or built-in payments.
Free Resources - colors, fonts, animations, images, and other tools for building overlays.

For machines

llms.txt - the complete overlay-authoring guide as one plain text file, written for language models. What is in it, and how to hand it to an assistant.
Markdown endpoints - append .md to any help page, public overlay or public kit URL and get plain markdown back.
help-reference-index.json - the entire reference as one JSON array. Build your own frontend over it or feed it to an autocomplete.

Reading this as a machine? The same page as plain markdown: /help.md