# Show a leaderboard on stream

Rank your top loyalty points, cheerers, gifters or a number you keep, with the #1 spot highlighted, and keep it updating live.

Updated 27 September 2026

## Before you start

You need an overlay in OBS. [Add an overlay to OBS](https://bloopbot.com/docs/widgets-in-obs) takes you from **New overlay** to a Browser Source; a leaderboard is one more layer on it.

A Leaderboard layer ranks one of three things:

- **Loyalty points** — your all-time [loyalty](https://bloopbot.com/docs/loyalty-and-regulars) leaderboard.
- **Cheers & gifts** — bits, gifted subs, or both, for the current stream or across the last 90 days.
- **A number you keep** — the top viewers by a per-viewer [variable](https://bloopbot.com/docs/variables) a flow keeps, such as a raid-boss damage counter.

It updates on its own as the numbers change — there is nothing to refresh, and no button to press.

## 1. Add a Leaderboard layer

1. Open **Overlays** and open the overlay you want it on, then choose **Add** and drag a **Leaderboard** tile from **Goals & games** onto the canvas: **Top loyalty points**, **Top cheerers** or **Top gifters**. **Be right back**, **Stream ending** and **Subathon** on the Overlays page’s **Add** come with **Top gifters** already placed.
2. On an existing overlay, choose **Add** on the left and drag the **Leaderboard** tile from **Goals & games** onto the canvas, or open it and press **Add** to drop it in the middle.
3. In **Content** → **Settings**, choose what it **Ranks**: **Loyalty points** (your all-time balances, nothing else to set), **Cheers & gifts** (asks what it **Counts** — **Cheers (bits)**, **Gifted subs**, or **Cheers + gifts** — and **Over** which stretch: **This stream** or **All-time (last 90 days)**), or **A number you keep** (asks for the per-viewer **Variable** to rank).
4. If you chose **A number you keep** and have not declared a variable yet, see [Variables](https://bloopbot.com/docs/variables) — it needs to be a number variable with scope **per viewer**, such as a boss-fight damage counter each viewer adds to.
5. Give it a **Heading**, such as _Top Supporters_, choose how many **Rows shown** (3 to 10), and turn **Show avatars** and **Highlight #1** on or off.
6. Press **Publish** to put the layer on stream.

![The Leaderboard layer Top cheerers selected in the overlay editor: its Content tab shows Ranks set to Cheers & gifts, counting Cheers (bits) over This stream, plus heading, rows shown, Show avatars and Highlight #1.](https://bloopbot.com/docs/screenshots/leaderboard-layer.jpg)

_A Leaderboard layer selected in the editor: its Content tab ranks Cheers & gifts, counting cheers over this stream._

## 2. Try it before you go live

With the layer selected, open **Simulate** in the top bar and press **Test leaderboard**. It plays a short demo ranking — made-up names, never a real viewer — including a reshuffle, so you can see the **#1** highlight move before anyone is watching.

The test plays on the canvas only, unless you tick **Also play on the live overlay in OBS** — then viewers see it too, for about 15 seconds. A few seconds after its last reshuffle your real ranking comes back on its own, so the made-up names never stay on stream. Nothing about the test reaches Twitch or changes any real data.

## Style it with custom CSS

A Leaderboard layer draws a panel, a heading and a list of rows. To restyle them without CSS, use **Parts** — each of the names below is a part there, from **Panel** to **Empty message** ([Style one part at a time](https://bloopbot.com/docs/widget-themes#parts)). Your overlay’s custom CSS can style them by these names:

| Selector | What it is |
| --- | --- |
| `.w-leaderboard` | The layer’s panel. |
| `.w-leaderboard-title` | The heading. |
| `.w-leaderboard-row` | One row. |
| `.w-leaderboard-row[data-rank="1"]` | The highlighted #1 row, when **Highlight #1** is on. |
| `.w-leaderboard-rank` | A row’s place, such as _#2_. |
| `.w-leaderboard-avatar` | A row’s avatar image, when **Show avatars** is on. |
| `.w-leaderboard-name` | A row’s name. |
| `.w-leaderboard-value` | A row’s number. |
| `.w-leaderboard-empty` | The _No one yet_ line, while nobody ranks. |

For example, `.w-leaderboard-row[data-rank="1"] { transform: scale(1.05); }` makes the top row stand out a little more, and `.w-leaderboard-empty { visibility: hidden; }` keeps the panel blank instead of saying _No one yet_. [Style parts with custom CSS](https://bloopbot.com/docs/arrange-your-overlay#custom-css) shows where to put it.

## What you should see

![A Top Cheerers leaderboard as OBS shows it: RetroRae highlighted at #1 with 500, then ByteBaron with 300 and QuietMouse with 100, each with a Twitch avatar.](https://bloopbot.com/docs/screenshots/leaderboard-overlay.jpg)

_A Top Cheerers leaderboard in OBS, with the #1 row highlighted._

- Your top rows, most first, with the number each one ranks by — below zero too, if a variable can go there.
- The **#1** row drawn differently, if **Highlight #1** is on.
- An avatar beside each name, if **Show avatars** is on and Twitch has a picture for that account.
- The list updating on its own as cheers, gifts, points or the variable change — no refresh needed.
- _No one yet_ under the heading while nobody ranks for what it counts.

## If something looks wrong

- The layer says _No one yet_: nobody ranks yet for what it counts — no loyalty points, no cheers or gifts this stream, or nobody has a value for the chosen variable. It fills in as soon as someone does.
- **This stream** shows an old ranking after you go live again: it starts over empty at the start of each stream; give it a moment to catch the first cheer or gift.
- The made-up names from a test are still showing: they go away on their own a few seconds after the test’s last reshuffle. If they stay, refresh the Browser Source in OBS.
- **A number you keep** shows nothing: the variable it names may not exist, or may not be a number variable with scope **per viewer**. Check it under [Variables](https://bloopbot.com/docs/variables).
- No avatars show: Twitch may not have a profile picture for that account, or **Show avatars** is off.
- The list looks the same for a while: give it a few seconds — it checks for changes automatically rather than the instant one happens. An **All-time (last 90 days)** board catches up within about half a minute.