Twitch emotes support from 0.2.0. Still does not support animated emotes, Twitch badges, third-party emotes.

Demo

How to

To add this thing to your OBS:

1. In the OBS Sources panel (next to the Scenes panel by default) click the + button
2. Choose Browser from the list
3. Click Ok in the new window
4. Check the 'Local file' checkbox. Below the checkbox you'll see 'Local file' input line with a 'Browse' button next to it, click the button.
5. Find the ./public/index.html file and choose it.
6. After that you should see something like in the demo.

To make it connect to your chat, replace YOUR_CHANNEL_NAME in the index.html file

<meta name="channel_name" content="YOUR_CHANNEL_NAME" />

with your channel name. For example, content="memi_meow".

Meta options

• channel_name is your Twitch channel name.

• theme sets the chat theme. Emtpy value or "default" will set the default one. Another theme you can try is "brut". You are very welcome to add your own themes (see below).

• emote_size for emotes size in the chat.

Development & customization

For development, you'll have to install NPM on your machine. With NPM then install the dependencies

npm i

To build the final script run

npm run build

For debugging, open the index.html file in your browser or OBS browser source.

Themes

To add new themes simply copy one of the available ones in the ./public/index.html. A theme looks like this:

:root.your_theme_name {
    variable: value;
    ...
}

Set your theme a name you like and edit the CSS variables. Then you can choose your theme with the meta option (see Meta options section above).

TODO

• animated emotes
• 3rd party emotes
• tmi errors handling
• settings through the UI

Requires dev account:

• emote magnifier
• badges