Reboot0s Widget Tools

---

Supercharge your custom widgets and focus on the fun parts.

GitHub Repo | Documentation

This is a community-driven resource and no official product by StreamElements. ^Yet.

---

Introduction

Nobody likes to copy & paste the same boilerplate code over and over, everytime they just want to test around with StreamElements custom widgets.

Or maybe you come from a more artistic background and feel overwhelmed by the required coding knowledge to start building widgets.

That's where this library comes in handy. Just include it and let it do the heavy lifting, while you focus on the fun parts.

Installation

You can include this in your HTML-markup just like any other library.

<script defer src="https://reboot0.de/hosted/js/se-tools.min.js"></script>

Make sure not to forget the defer attribute on the script-tag or the script may not work properly.

If you find any bugs or have general improvements, feel free to contribute or report those.

Usage

For a quick-start you can check out this preset example overlay with each event implemented:

https://streamelements.com/dashboard/overlays/share/6025327a79af692b94ee6f44

Just include the script and you'll have access to all the functions and classes.

The script will register itself to the window instance and auto-initialize its components.

The listener functions for events start with "on" followed by the event name in camel case syntax: onEventName

A list of all available events and their properties can be found here.

Handling new subscriptions would be shortened to just this:

function onSubscriber(event)
{
  DOM.setText("#myAlertText", `${event.name} has subscribed!`);
}

You can even destruct parameters to limit the scope to only necessary properties:

function onResub({name, amount} = event)
{
  DOM.setText("#myAlertText", `${name} has resubscribed for ${amount} months!`);
}

You may have noticed the DOM.setText() function in the examples above.

Yes, this library also comes with some extra modules to (hopefully) make working with the StreamElements ecosystem as easy as possible.

A more in-depth explanation of all modules can also be found in the docs.

Support

If you want to report a bug or have technical questions regarding this library, you can open a new issue on GitHub.

For more general StreamElements development questions, you can join the SE Developers server.

For non-development support questions you can use the official StreamElements Discord server.

However, none of these will offer support via personal/direct messages.

Not for support questions, but you could also follow me on my socials (Twitter, Twitch) to stay up-to-date.

Building

In most cases, you just want to include the already compiled file without needing to build anything.

If you modified or added some code and want to recompile the output, you can use the following npm scripts:

• npm run "generate docs" - Generates & updates the documentation pages (locally).
• npm run "build" - Recompiles and minifies the modules to the final dist/se-tools.min.js JavaScript file.

3rd-Party Libraries

We use a modified version of the clean-jsdoc-theme to generate and style the documentation.

It's located under jsdoc/template and is not installed as npm package. (But 'jsdoc' is)

The template is a good starting point, but far from perfect. I'll update that as well over time.