Optional: Enable an broadcaster-only admin mode OBS dock view as shown below.

Check out the fillDirection setting below for more on how you can customise how the overlay will expand vertically.

Position the overlay by dragging it to your preferred vertical location within OBS.

Optional: Enable 'Shutdown source when not visible' to reload the overlay when you toggle its visibility - this is useful if you're making adjustments to the CSS or color variables.

Set height and width to the same dimensions as the resolution of your stream.

Open OBS or whatever you're using, and add twitchOverlays.html as a Browser Source.

Optional Fill in password and botUsername in config-local.js to enable chat-based errors for command users (see the comments in config-local.js.sample for a longer explanation).

Fill in twitchUser in config-local.js with your Twitch channel username.

In the extracted files, rename config-local.js.sample to config-local.js.

Download the ZIP archive of the latest stable release and extract to your local machine or just clone this repo.

If you want to use this overlay, you'll need OBS or similar and be comfortable editing a settings file for configuration. This overlay includes use of local browser storage - lists are saved and can be re-used on subsequent streams on the same channel.Ĭheck out this endorsement: 4 Installation Ideal for objective lists, todo lists, schedules or whatever else comes in list form. A simple OBS overlay to allow a Twitch channel's broadcaster or mods to add a titled list of items to their stream, via Twitch chat commands or an OBS broadcast dock.

How to add twitch overlay obs