Building Twitch Overlays Using Web Technology

You can view the finished code on GitHub!

The streaming software OBS lets you use an embedded browser as an input. These means that you can use familiar web technologies to customize your Twitch overlays!

In this event, we covered:

• Using OBS's Browser source
• The tmi.js and ComfyJS JavaScript libraries for getting Twitch chat events
• Using DOM manipulation to display chat messages
• Using overflow and flexbox in CSS to get the rising chatbox feel

Mentioned Resources

• tmi.js - a JavaScript library for hooking up your code to a Twitch chat
• ComfyJS - a community-built wrapper around tmi.js that’s a little more dev-friendly
• John Otander’s post on tomato - John agrees that tomato is the best named CSS color

Join this event in Discord