Browse the docs

Show chat on screen

Put your live Twitch chat in an overlay. One loop, no setup, no extra permissions - copy the block below into a static overlay and you have a chat feed.

Tutorial 4 min read
.md
On this page
  1. What you get
  2. The whole thing
  3. What each part does
  4. Make it look like something
  5. Adding badges
  6. Styling one kind of chatter
  7. How many messages show
  8. Hiding things you do not want on stream
  9. Things worth knowing
  10. Where next

What you get

A live chat feed in your overlay, updating as people talk. Names in their own colours, badges, emotes, and messages disappearing when a mod deletes them.

The whole thing

Create a static overlay and paste this in:

[[[foreach:chat as msg]]]
  <div class="chat-line">
    <span class="chat-author" style="color: [[[msg.color]]]">[[[msg.author]]]</span>
    <span class="chat-text">[[[msg.html]]]</span>
  </div>
[[[endforeach]]]

That is the feature. Add it to OBS and it works.

What each part does

[[[foreach:chat as msg]]] loops over the messages currently on screen. msg is a name you picked - call it anything, then use the same name inside the loop.

  • [[[msg.author]]] - the display name, capitalised the way the chatter writes it
  • [[[msg.color]]] - the colour they chose in Twitch, as a hex value you can drop into CSS
  • [[[msg.html]]] - the message with emotes already turned into images

Use [[[msg.text]]] instead of [[[msg.html]]] if you want the plain text with no emote images.

Index 0 is the oldest message, so a plain top-to-bottom list reads in the order things were said. Use flex-direction: column-reverse in CSS if you want newest at the top.

Make it look like something

The loop gives you plain elements. Everything else is CSS, and it is yours:

<style>
  .chat-line {
    margin-bottom: 6px;
    font: 500 20px/1.4 'Albert Sans', sans-serif;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  }
  .chat-author {
    font-weight: 700;
    margin-right: 6px;
  }
  /* Emotes come through as <img>; size them here, not in the loop. */
  .chat-text img {
    height: 1.4em;
    vertical-align: middle;
  }
</style>

The text shadow matters more than it looks: an overlay sits on top of gameplay, and you do not know what colour is behind any given pixel. See For Designers for the rest of that problem.

Adding badges

[[[msg.badge_images]]] renders the mod sword, the subscriber emblem, and so on as images:

[[[foreach:chat as msg]]]
  <div class="chat-line">
    <span class="chat-badges">[[[msg.badge_images]]]</span>
    <span class="chat-author" style="color: [[[msg.color]]]">[[[msg.author]]]</span>
    <span class="chat-text">[[[msg.html]]]</span>
  </div>
[[[endforeach]]]

There is also [[[msg.badges]]], which gives you the bare set names (moderator subscriber) rather than pictures - useful as CSS classes when you want to style moderators differently instead of showing an icon.

Styling one kind of chatter

Every message carries flags you can test with a conditional:

[[[foreach:chat as msg]]]
  [[[if:msg.first]]]
    <div class="chat-line first-time">
      <span class="chat-author">[[[msg.author]]]</span> said something for the first time!
    </div>
  [[[else]]]
    <div class="chat-line">
      <span class="chat-author" style="color: [[[msg.color]]]">[[[msg.author]]]</span>
      <span class="chat-text">[[[msg.html]]]</span>
    </div>
  [[[endif]]]
[[[endforeach]]]

msg.mod, msg.sub, msg.vip, msg.broadcaster and msg.first all work the same way.

How many messages show

The window is 50 messages by default. Change it under Foreach caps on your account settings - the overlay picks up the new size the next time it loads.

Set it to what your layout can actually fit. A window taller than the space you gave it just means the oldest messages are drawn off-screen.

Hiding things you do not want on stream

Two settings live at /settings/chat:

  • Hide commands - drops messages starting with !, so !discord and !lurk never reach the overlay
  • Hidden chatters - a list of logins whose messages are not drawn

Both default to showing everything. Filtered messages are dropped before they take a slot in the window, so someone spamming commands cannot push real conversation off your screen.

These are display settings, not moderation. They change what your overlay draws and nothing else - the message is still in your chat, and everyone watching on Twitch still sees it. Deletions by you or your mods are a separate mechanism and are always honoured.

Things worth knowing

  • The overlay talks to Twitch directly. It connects anonymously, reads chat, and renders it. Nothing is relayed through Overlabels and nothing about your chat is sent to us.
  • Deletions are honoured. When a mod deletes a message or times someone out, it disappears from the overlay too.
  • During a collab, messages from the other channel arrive with [[[msg.source_channel]]] set. Use it to label them, or ignore it and let the feed read as one conversation.

Where next

Related docs

Tutorial Show your last 5 subscribers Tutorial Latest donator from any source

Reading this as a machine? The same page as plain markdown: /help/tutorials/show-chat-on-screen.md