Chat Designer for Twitch​

...lets you create a custom overlay chat for your Twitch channel. It provides the following features and many more:
  • Multistream support
    Add multiple Twitch channels to the same overlay chat. (But please ask the channel owners for their permissions )

  • Filter out channels and messages
    You can choose to filter out specific channels and messages with a specific content. (E.g. you can filter out Bots and !commands if you want the chat to be more clear)

  • Use the Twitch user color
    Wherever you can set a color, you can use the color the user uses in Twitch instead.

  • Animate new and hiding messages
    Animate messages that appear and let them disappear with another animation.

  • Separate design for Subs, VIPs and Mods
    Change the appearance of the messages based on the role the user has

  • The best of CSS without coding
    This tool provides a simple and rich UI, so you can easily create an overlay chat that differs from every other one.

Important:​

Chromium-based browser:
To use this tool, you have to use a Chromium-based browser (New Microsoft Edge / Google Chrome / New Opera). Because the browser source in OBS is Chromium-based, other browsers like Firefox and Safari may have problems displaying the tool and the chat proberly and are not supported. (If you should see some problems in the tool, try updating your browser and OBS)

Enable Javascript:
If you should see a message that Javascript is disabled in your browser, you have to activate it. (Go to the browser settings, search for JavaScript and enable it. Try to reload the page)

PLEASE FOLLOW THE HOWTO.TXT FILE TO PREVENT PROBLEMS


"How to design" video:

If you want a head start to know how to start designing your chat, you can check out this YouTube-Video here.

Disclaimer:​

This tool uses the tmi.js v.1.8.5 from https://tmijs.com/.
This tool is not created or provided by Twitch or Amazon.
UI, icons and coding are done by me, Mirco Schilling.

Examples:​

1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png

Support:​

This tool took me many approaches and the final approach took me about a few weeks. Nevertheless this tool is completely free to use :D However, if you want to support me financially, you can support me here ❤️ I still have many ideas for Chat Designer and am going to update it in the future. Stay tuned :D
  • Like
Reactions: DistantImpulse
Author
MiiRiiCo
Downloads
5,826
Views
23,717
First release
Last update
Rating
4.75 star(s) 4 ratings

Latest updates

  1. 2.8.1 - Bug fixes

    2.8.1 - Bug fixes BUG FIXES: Fixed an issue where the sizing options for backgrounds and masks...

Latest reviews

i love u why i was searching something like this so easy
Very nice script for setting up chats, writing everything by hand would take me much more than using this. The only few culprits I noticed are:
- Most buttons that are just icons have no tooltip or description of what they are supposed to do, so it's just trial and error.
- Animations in-out for messages don't seem to work outside of the designer. In it I see that the messages fade in (but do not fade out despite the entry in the Designer), outside they just pop in and out.
Excellent, highly customisable tool that's easy to use.
Top