The Widget Creator
The Widget Creator is the in-app editor for building your own overlay widgets. You write the widget in TypeScript, see it render live as you type, define the controls your viewers will configure, and bind it to live stream events. Open it from Widget Creator in the sidebar.
A widget you build here can be used on your own overlays, published to the Widget Workshop for others to install, or shared privately by share code.
Don't read this section front to back — follow Build your first widget instead. It takes you from an empty widget to one on your overlay in a few minutes. Come back here for reference.
What a widget is made of
Every widget is a bundle of a few kinds of file:
- Code (
.ts) — the logic. Exactly one code file is the core (the entry point that runs when the widget loads). - Templates (
.tsx) — React components that draw the widget. You show one withshowTemplate(...). - Styles (
.css) — scoped CSS. Your configurable properties are available as CSS variables here. - Properties — the configurable fields a streamer sees when they add your widget (a colour, a number, a font…).
- Bindings — the live stream events your widget reacts to (a follow, a sub, the current viewer count…).
- Assets — images and sounds you upload and reference by name.
- Catalogue info — the name, icon, banner and description shown in the Workshop.
The Build → Publish pipeline
There are three states for a widget, and three buttons that move between them:
| Action | What it does | Who sees the result |
|---|---|---|
| Save | Stores your draft. | Only you, in the editor. |
| Build | Compiles your draft into a runnable widget. | Only you — the built widget becomes available in your Overlay Editor for testing. |
| Publish | Releases your latest build. | Everyone — it becomes installable in the Workshop (or by share code). |
So the loop is: Save while you work → Build to try it on your own overlay → Publish when it's ready for others. Full detail in Publishing & sharing.
In this section
- Editor tour — the panels: Files, Properties, Bindings, Assets, Settings, Simulate, the live preview and the console.
- Property schema — define the controls your viewers configure, and read them in code and CSS.
- Event bindings — subscribe to live stream events; the full event catalogue.
- The @widget runtime — the API your code calls: lifecycle, templates, hooks and components.
- Publishing & sharing — Build vs Publish, visibility, licensing, catalogue images, and updates.