Twitch Predictions Overlay

March 23, 2024

Check it out on Github!

Twitch Predictions Overlay is a custom overlay I wrote to use on Twitch. The commonly used overlay available only supported predictions with 2 outcomes, so the goal was to make one that supported an arbitrary number of outcomes. You can use it by going to https://twitch.leggett.dev and linking your Twitch account! The homepage includes a demo to showcase approximately what it will look like in your streaming software and if you're signed in it will give you a link to copy.

Currently, the overlay supports predictions with an arbitrary number of outcomes, but you may have some clarity issues after about 10. It also gives you a few options for the layout and direction. For example, if you want to put the prediction across the bottom of your stream, you will want to select Horizontal for the Layout and End for the Direction. If you want it along the left side of your stream layout, you want to choose Vertical and Start. Under the hood, these go into the url parameters, so if you want different scenes to have different layouts, you can simply set up multiple Browser Sources in your streaming software of choice with different URLs.

Under the hood, this is implemented in Next.js via the t3 stack. Ultimately it's a fairly simple app. All it does is store authentication tokens obtained via OAuth. Then, those tokens are used on the page for the actual overlay to set up the WebSocket connection, subscribe to the Prediction related messages, parse the incoming messages, and display the results. I chose the t3 stack because it scaffolded out the basic app stuff and let me focus on the meat of the project, which was interfacing with Twitch's WebSocket API.

Currently, this is hosted on Vercel and the database is hosted on Turso, on the free tiers for both of them. It used to be hosted on PlanetScale, until they deprecated their free tier. If you have found this project useful and want to get it off of the free tier, please consider donating to my Ko-Fi! I would really appreciate it!