Add Twitch chat to OBS using a browser source

The fastest way to show Twitch chat inside OBS is to add a browser source that pulls your live chat window directly into your scene. OBS reads the chat from Twitch's website and displays it as an overlay or a separate panel on your stream — your viewers see it if you position it on camera, or you see it off-camera to read while streaming.

You will need your Twitch channel name and OBS already open with a scene ready. The browser source method works on Windows, Mac, and Linux, and it updates in real time as people send messages.

Key Takeaways

  • A browser source in OBS pulls your Twitch chat directly from the web and displays it live in your scene.
  • You create the source by pasting your Twitch channel URL into OBS and sizing it to fit your layout.
  • Chat appears on your stream if you position it on camera, or off-camera so only you can see it while streaming.
  • You can customize the chat window's size, position, and transparency to match your stream design.
  • If chat does not appear, check that you are logged into Twitch in OBS's browser and that your channel name is spelled correctly.

Step-by-step: adding a browser source for chat

Open OBS and select the scene where you want the chat to appear. In the Sources panel at the bottom left, click the plus icon or right-click and select Add Source. Choose Browser from the list.

A dialog box opens asking you to name the source. Type something clear like "Twitch Chat" and click Create. In the properties window that appears, find the URL field. Paste this URL, replacing "YOUR_CHANNEL_NAME" with your actual Twitch channel name:

https://www.twitch.tv/YOUR_CHANNEL_NAME/chat

For example, if your channel is "streamergirl42", the URL becomes https://www.twitch.tv/streamergirl42/chat. Click OK or press Enter. OBS loads the chat window into your scene.

The chat box will likely be very large or in the wrong position. Click and drag the edges to resize it, or click and drag the center to move it. If you want chat visible only to you during the stream, position it outside the camera frame or on a second monitor. If you want viewers to see it, position it anywhere in the camera view.

Logging in so chat actually loads

If the chat window shows a login screen instead of your messages, OBS's built-in browser does not have access to your Twitch account. You need to log in once inside OBS. Click on the chat window in your scene, and a browser window should open or focus. Log into Twitch using your username and password.

After you log in, close that browser window and return to OBS. The chat should now display your live messages. If it still shows blank or a login screen, right-click the browser source in OBS and select Refresh Cache. Wait a few seconds for the page to reload.

You only have to log in once. OBS remembers your session, so the next time you start streaming, the chat will load automatically — as long as you do not clear OBS's browser cache.

Customizing chat size and appearance

By default, the chat window is large and shows the full Twitch interface. You can make it smaller or hide parts of it by adjusting the browser source properties. Right-click the browser source and select Properties.

In the properties panel, you will see a Width and Height field. Lower numbers make the window smaller. A width of 300 to 400 pixels works well for a side panel, while 600 to 800 pixels is better if you want chat to take up more space. Adjust the height the same way — taller heights show more messages at once.

If you want to hide the Twitch header or buttons above the chat, you can add a custom CSS filter or use a third-party chat URL instead. Many streamers use Chatterino or 7TV chat overlays for more control, but the built-in Twitch chat URL is the simplest starting point.

Positioning chat so viewers see it or do not

Where you place the chat box in your scene determines whether your audience sees it. If you want chat visible on stream, position it anywhere inside the camera frame — usually the right or left side works best so it does not cover your face or game.

If you want to read chat while streaming but do not want viewers to see it, position the chat box outside the camera frame entirely. You can also place it on a second monitor if you have one — OBS lets you see sources that are off-camera. Some streamers create a separate scene just for chat so they can switch to it when they want to show the audience what people are saying.

To move the chat, click on it in the preview and drag it. To resize it, click and drag the corners or edges. Hold Shift while dragging to resize proportionally without stretching it.

Troubleshooting when chat does not appear

If the chat window is blank or shows an error, the most common cause is that your channel name is misspelled in the URL. Double-check the spelling against your actual Twitch channel — it is case-sensitive in the URL, so "StreamerGirl42" and "streamergirl42" must match exactly.

If the URL is correct but chat still does not load, try refreshing the browser source. Right-click it and select Refresh Cache. Wait 10 seconds. If that does not work, delete the source and create a new one with the same URL.

If you see a login screen, you are not logged into Twitch inside OBS's browser. Click the chat window to focus it, log in with your Twitch credentials, then return to OBS. If you see a message that says the channel does not exist, verify that you are using your channel name, not your display name — they can be different.

On rare occasions, Twitch updates its website and temporarily breaks the chat URL. If nothing works after trying the steps above, wait a few hours and try again. You can also check the OBS forums or Twitch subreddit to see if other streamers are reporting the same issue.

Alternative: using a dedicated chat application

If the browser source method feels clunky or you want more customization, you can use a separate chat application and add it as a window capture in OBS instead. Chatterino is a free, lightweight chat client that many streamers prefer because it is faster and uses less CPU than the browser version.

To use Chatterino, download it from chatterino.com, log in with your Twitch account, and open your channel chat. In OBS, add a new source and select Window Capture instead of Browser. Choose the Chatterino window from the dropdown. OBS will then capture whatever is on screen in that window and display it in your scene.

The trade-off is that you have to manage two applications instead of one, but you get better performance and more styling options. For most streamers starting out, the browser source method is simpler and works fine.

Frequently Asked Questions

Can I show chat on stream without it taking up a lot of space?

Yes. Make the browser source very narrow — around 250 pixels wide — and position it on the edge of your camera frame. You can also reduce the height so only a few messages show at a time. The smaller the window, the less it distracts from your main content.

What if I want to show chat but hide my username or other details?

The standard Twitch chat URL does not have built-in options to hide parts of the interface. You would need to use a third-party chat overlay like 7TV or Chatterino, which offer more customization. Alternatively, you can crop the browser source in OBS to hide the top or sides.

Does showing chat on stream use more internet or CPU?

A browser source uses a small amount of extra CPU and bandwidth because OBS is rendering a live web page. For most modern computers, this is negligible. If you have an older PC or a slow internet connection, using Chatterino instead of the browser source may help, since it is lighter weight.

Can I add chat to multiple scenes?

Yes. Create the browser source once, then right-click it and select Duplicate. You can now paste it into other scenes. If you edit the URL or properties in one scene, you will need to edit it in the others separately — they do not sync automatically.

Why does chat sometimes disappear during my stream?

Chat may disconnect if your internet drops briefly or if Twitch has a temporary outage. OBS will try to reconnect automatically. If it stays disconnected, refresh the browser source or restart OBS. You can also check Twitch's status page to see if there is a known issue.