DEV Community

Horus Lugo
Horus Lugo

Posted on • Updated on • Originally published at

Using HTML, CSS, and JavaScript to Create OBS Plugins for Your Live Streaming Sessions

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.

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!

Browser Source Properties

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 profile in case someone wants to read one of my publications after the stream finishes:

Plugin that retrieves my latest publications

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.

Preact OBS Plugin

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

$ git clone hello-world-obs-plugin
Enter fullscreen mode Exit fullscreen mode

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.

Follow me on Twitter if you want to know about my future articles, projects or whatever I come up with!

Discussion (4)

hazz3r profile image
Harrison • Edited on

Anything you can do in Chrome you can do in OBS using the Browser Source. It's ridiculously powerful.

The guys who help run Games Done Quick put together a really powerful framework for creating OBS Graphics called NodeCG. It's essentially a way for you to create pages and manage them, and even having a control centre from which you can press buttons and such to control the information on the graphics themselves. What's great is that the framework is completely separate from the Page Content, meaning you can use whatever technology you want to create the Graphics. It requires a build step if you're writing ES6, but it's not difficult to put together.

horusgoul profile image
Horus Lugo Author

Wow! I'm going to take a look to that framework, it definitely sounds like something I may end up using for my streamings.


hrn4n profile image

This is super interesting, I didn't know you could use HTML for these kind of things

ryantheleach profile image
Info Comment hidden by post author - thread only accessible via permalink
Ryan Leach

How is that template an OBS plugin?

Try integrating OBS websockets into it, instead of just a static website you can embed in OBS if you want to call it a 'plugin' to OBS.

If you want to create an overlay template, do that, and call it an overlay template.

Or maybe write an article about creating custom Twitch alerts or channel point rewards.

Some comments have been hidden by the post's author - find out more