OBS Twitch Hype Train Overlay

README.md

OBS Twitch Hype Train Overlay

With these settings, you can show the status of your Hype Train in your livestream. Just add a browser source in OBS with the following settings:

URL: https://www.twitch.tv/popout/<channelname>/chat?darkpopout

With: min. 500

Height: min. 150

Custom CSS:

@import url("https://echtkpvl.de/twitch-hypetrain.css");

By using my URL, you will get the latest update automatically. If you are concerned about your security or something else, use this code and visit this tutorial, if something is weird or broken:

html, body, .tw-root--theme-light, .tw-root--theme-dark, .popout-chat-page, .chat-room, .ember-chat-container, .community-highlight-stack__card--wide {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
}

.chat-list--default, .stream-chat-header, .chat-input, .channel-leaderboard { display: none!important; }
.consent-banner, .chat-signup-gate-overlay, .community-highlight-stack__backlog-card, .marquee-animation { display: none!important; }
div.Layout-sc-1xcs6mc-0.hZLfAO, .pinned-chat__highlight-card, div:has(.bits-leaderboard-expanded__header) { display: none!important; }

.chat-room__content {
    padding-top: 25px;
}

.community-highlight {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
    border: unset!important;
    box-shadow: unset!important;
}

div[class^='Layout-sc'] {
    border-bottom: unset!important;
}

div[class^='Layout-sc'] > button {
    display: none;
}

Screenshots

FAQ

Q: Is there always a visible element in my overlay?

A: No. If there is no Hype Train / Poll / Prediction, the overlay is transparent.

Known Issues

If you start a poll / prediction or have something pinned, they will be shown in the overlay. Drops or a shared chat will cause a banner to appear in the overlay, but it disappears after a while.

Hi there! This is fantastic, but it seems that it shows the leaderboard once a hype train is finished (Twitch maybe updated something). Would love if it were possible to update the css to reflect that change :)

Thanks for your Feedback @FredTwitch I can't see this behavior but added something. Please tell me if this solved your issue

I tried this today and also get no transparent view when Hypetrain is not active:

@StephanBeutel I've changed and optimized some parts of the code. This time it also happened in my OBS, so it's most likely fixed everywhere.

hi there, nice feature! i have an unfortunate issue though, i dont think its your fault, but my hypetrain doesnt reset to 5 minutes on lvl up, makes it disappear earlier than it should and it sadly also happens with this overlay. i i was wondering if youd know how i could get around this problem?

Hi @Chaotic060 I'm sorry for the late response. I'm not able to reproduce this error and this script is still working fine in my OBS

@EchtkPvL hey there, i forgot to comment/edit my post, i managed to fix this! it was because the local time on my pc itself was set wrong! it fixed the hypetrain in my chat and also fixed your overlay in the process, leaving this here if anyone ever has the same issue. thank you so much for your fantastic tool!

So I"m having an issue. When I imported this into OBS, the background for this is completely transparent and I'm unsure why.

@Chaotic060 Thanks!
@jthead9 The background should be transparent until there's a Hype Train. Could you please explain what you are doing/expecting?

So as you can see in this vidoe, I explain that the visuals are weird. It reacts weird to pinned messages, and when there's an ad timer, it shows up to which is something I don't wanna put on the overlay. The pinned message I don't mind Just needs to be tweaked.

2025-08-03.07-37-21.mp4

Hi @jthead9 this doesn't look like the original chat. If you don't use https://www.twitch.tv/popout/<channelname>/chat?darkpopout this will not work. Also adding more CSS Code than what I provide here will most likely cause issues.
Pinned messages will always be shown, this is a known issue.

So this is the settings I have with it in OBS

@jthead9 Thank you for the screenshot of your settings. I was able to reproduce your problem, and it occurs when you are logged into the browser source. To use this overlay, you need to right-click on the source to switch to "Interact" and then log out.
I also found two other issues. If drops or a shared chat are active, a banner appears in the overlay, but it disappears after a while.