{
  "id": 10803245,
  "title": "What I learned building a Twitch chat overlay",
  "url": "https://urgent.news/2026/09/29/what-i-learned-building-a-twitch-chat-overlay",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-29T23:08:10.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/fabianzimber/what-i-learned-building-a-twitch-chat-overlay-egl"
  },
  "original_language": "en",
  "account": "Building a Twitch chat overlay can be a straightforward project, but there are several nuances to consider. The first step is obtaining the chat messages. This can be done by connecting to Twitch's WebSocket interface, which does not require an API key or any authentication. Once connected, the messages are received and parsed using a few lines of JavaScript code.\n\nHowever, the real challenge lies in handling the more complex aspects of displaying chat messages. Emoji characters can shift the positions of emotes, and sometimes emotes overlap with each other. Additionally, the data needed to draw a message might not arrive in the same order as the message itself.\n\nTo overcome these challenges, several key points were learned during the process. First, it's possible to read Twitch chat without an API key. The chat operates on IRC protocol, and Twitch offers this service via WebSocket. To read a channel, you can log in using an anonymous nick and receive the messages without any restrictions. The chat messages include metadata such as color, badges, and user IDs, which are crucial for displaying the chat correctly.\n\nSecond, when dealing with Twitch's chat data, it's important to understand that JavaScript strings are counted in UTF-16 code units, while Twitch counts code points. This discrepancy can cause issues when working with emojis, as they can take up more than one code unit. Therefore, it's essential to determine whether the API counts bytes, UTF-16 units, or code points to accurately handle the positions of emotes in the chat messages.\n\nThird, emotes from various providers like 7TV, BetterTTV, and FrankerFaceZ do not have any special markers in the chat messages. To display these emotes correctly, the overlay needs to look up the emote sets for each channel and place them appropriately. This can be simplified by using an inline grid system, where all the emotes are placed in a single cell. This approach allows emotes to stack on top of each other and behave as a single inline element in the text.\n\nFourth, Twitch chat messages can include various modifiers, such as flipping or enlarging the emote. These modifiers can also trigger animations, such as shaking. To avoid conflicts when applying animations to emotes, it's recommended to avoid using transform properties in CSS. Instead, individual properties like translate, rotate, and scale should be used. This ensures that the emotes maintain their intended appearance throughout the animation sequence.\n\nLastly, it's important to note that chat messages may arrive before the necessary data to display them. This can happen when the overlay starts, and the chat connection is opened simultaneously with requests for emote and badge lists. To handle this, the overlay should keep the chat messages as they are received and treat the displayed message as derived data. This approach ensures that the chat display remains accurate even if the emote data changes during the stream.",
  "summary": "Getting messages onto the screen is the easy part: one WebSocket and about forty lines of parsing. The work starts after that. Emoji shift the positions of emotes, emotes sit on top of other emotes, and a lot of the data you need to draw a message arrives after the message itself. Here's what I learned. Most of it applies to more than Twitch. 1. You can read Twitch chat without an API key Twitch…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}