Build your own

Custom widgets.

For when you want to break the mold. Write your own HTML, CSS and JavaScript, react to live events, and build something we would never ship. Sandboxed, with a real code editor.

The code editor

A custom widget has tabs for HTML, CSS, JS, Fields and a Console. Write your markup and styles, add behavior in JavaScript, and watch logs and errors live in the console while you work.

Fields

Define a fields schema and the editor builds an inspector form for it automatically, so you (or anyone using your widget) can change colors, text and numbers without editing code. Field values are available in your HTML and CSS as {{tokens}} and in your JavaScript through the event payload.

StreamElements compatible

If you are coming from StreamElements, you can paste an existing custom widget and it will largely work as-is. The event API and field system mirror theirs, with a few documented differences.

What you can rely on

animate.css is always available for entrance and exit animations.
jQuery is loaded automatically if your code uses it.
You can pull libraries and assets from common CDNs, and add your own to the allow-list per widget.
Persistent state survives reloads through a small per-widget storage API.

Sandboxed for a reason

Custom code runs in an isolated frame with no access to your account or tokens. It can react to events and draw to the overlay, nothing else. Heavy scripts can drop frames on stream, so test under load.

Ready for the API? See the Widget SDK.