Originally posted on dev

A few days ago, I decided to give a try to live coding on Twitch. I developed a bot for one of the forums I visit regularly and it was a great experience, a lot of people visited the streaming and the big majority stayed for a while.

Because of that, I have been looking for ways to improve the experience of my live coding sessions and then I thought that one of these ways could be creating my own plugins for OBS (Open Broadcaster Software).

I found out that OBS plugins can be written in C++, but that’s overkill! Then I thought that maybe there’s another way using web technologies (HTML, CSS, and JS), that’s when I discovered the Browser source.

This type of source allows you to use an internal browser that supports modern web capabilities, just point it to an URL or a local HTML file and start building a dynamic experience for your viewers!

Once I got to know about this, I decided to use Preact with HTM and plain CSS as the stack to build my plugins. I believe that this stack rocks for this use case because it doesn’t require a build step, just go ahead and use the platform!

Here’s a GIF of my first OBS plugin, which loads the latest posts of my dev.to profile in case someone wants to read one of my publications after the stream finishes:

After building my first plugin and seeing that this stack rocks, I have created a repository that you can use as a template to develop obs plugins with this stack: HorusGoul/preact-obs-plugin.

 HorusGoul / preact-obs-plugin

Preact OBS Plugin

This is a template that can be used to build OBS plugins (or webapps!)

$ git clone https://github.com/HorusGoul/preact-obs-plugin hello-world-obs-plugin

The dependencies are downloaded from CDNs, just launch a web server with npx serve and use the local URL in your Browser source on OBS.

I recommend you to use npx live-server to develop, it will reload your website whenever you change one of the files.
View on GitHub

Source: dev