Editor tour

The Widget Creator is a three-pane editor: a left rail to switch between surfaces, a centre pane that changes with the surface you pick, and a live preview on the right. A console sits along the bottom.

Screenshot

Add a screenshot of the Widget Creator with the three panes and the surface rail labelled.

The surface rail

The left rail switches the centre pane between the editor's surfaces:

Surface	What you do there
Files	Write your widget's code, templates and styles in the editor.
Properties	Define the controls a streamer configures (a colour, a number, a font…). See Property schema.
Bindings	Choose the live stream events your widget reacts to. See Event bindings.
Assets	Upload images and sounds and give them names to use in code.
Settings	Catalogue info, canvas size, fonts and editor preferences.
Simulate	Fire fake events and set test property values to exercise your widget.

Files

The Files surface is a code editor with tabs for each file in your widget. A widget has three kinds of file:

• Code (.ts) — your logic. Exactly one file is the core (the entry point). The core is where you call onLoad(...), showTemplate(...) and register your bindings.
• Templates (.tsx) — React components that draw the widget. Each file becomes a member of Template (main.tsx → Template.Main), which you show with showTemplate(Template.Main).
• Styles (.css) — scoped CSS. Your properties are exposed here as CSS variables, e.g. var(--accent-colour).

Edits rebuild the preview automatically after a short pause — you don't press a "run" button.

The full code API is documented in The @widget runtime.

Live preview

The right pane is always rendering your widget. It rebuilds as you edit, so you see changes within a second. Use the zoom controls (or scroll) to fit, zoom in, or zoom out, and drag the divider to resize the preview. The preview reflects your current Simulate property values, so you can see how a streamer's configuration will look.

Assets

Upload images and audio (up to 5 MB each), give each one a name, and reference it in code with asset('name') — that returns the asset's URL. This keeps your widget self-contained: the files travel with it when someone installs it.

Settings

The Settings surface has a few tabs:

• Catalogue — the name, icon, banner, description, category and author credit shown in the Workshop. Covered in Publishing & sharing.
• Canvas — the widget's size. Fixed locks one size; freeform lets the streamer resize it, with optional min/max and aspect-ratio lock.
• Fonts — pick the platform fonts your widget uses so they load on the overlay.
• Editor — your own preferences (indentation, editor font, theme). These don't affect the widget.

Simulate

You can't rely on a real follow or sub happening while you build. The Simulate surface lets you:

• Fire events — pick an event (Follow, Sub, Cheer…), edit the JSON payload, and Fire it once or Burst it several times at an interval. Your bindings receive it exactly as they would live.
• Set property values — give each of your properties a test value to preview how a streamer's configuration looks, without leaving the editor.

See Event bindings for what each event carries.

The console

The console along the bottom collects everything the editor knows is wrong or worth flagging, in one place:

• Compile errors — your code didn't build.
• Runtime errors — your widget threw while running in the preview.
• Binding warnings — e.g. you used an event in code that you didn't declare in Bindings, or declared a binding nothing consumes.

It stays collapsed until the first problem, then pops open. Filter by severity or source, and click a diagnostic to jump to the offending file.

Saving, building and publishing

The toolbar holds Save, Build and Publish:

• Save stores your draft.
• Build compiles it so you can test it on your own overlays.
• Publish releases your latest build to installers.

This pipeline is explained in Publishing & sharing.