Here I will show you how to import a codepen into OBS, I’m sure the theory will be the same for Streamlabs but I’m not 100% sure.

It’s also important to note, you will need a Codepen Account to Export.

Step 1 - Export the Pen

On the Codepen you are wanting to use, in the bottom right there would be a Export button.

Once you click on that it will pop up a menu and you will need to press on Export .zip

This will then start downloading the zip folder.

Step 2 - Extract Files

When downloaded it will look like this in your download folder.

If you go inside that folder you will see this folder.

What you need to do is to Drag and Drop this file to somewhere safe.

Step 3 - Get the Url

Once Somewhere safe, you will need to go into the folder and find the dist folder.

Inside the dist folder there will be index.html file open that.

Once open we need to get the URL which will start with file:///

Step 4 - Put in OBS

In OBS we need to create a browser source.

The we need to paste in our Url.

Then set all the other settings you need such as Height and Width and then press okay and you codepen will be imported to OBS

Things to note.

If your pen requires URL Parameters you can not use Local File (meaning the Checkbox in OBS must be unticked).

If your pen doesnt have any addition settings or uses websocket then it can be ticked but I tend to leave it unticked as a Catch-all.

After adding the codepen to OBS if you make any changes you need to then refresh the browser source in OBS.