Widget pages

A widget page is a public page for one of your widgets, at /w/<name>/<id>. Anyone can open it without signing in, so it's the link to share on social media, Discord or your own site. It's separate from browsing the Workshop, which is where signed-in streamers discover widgets.

Pages are optional. A widget only has one if you create it.

Create a page

1. Publish the widget first. A page can't go live until the widget is published.
2. In the Widget Creator, open Page and click Create page.
3. Design the page (see below), then click Save page.
4. Turn on Page is live. Until you do, the page is hidden.

Use Copy link to share it, or View page to open it in a new tab.

What visitors see

• A live preview of your published widget. Nothing plays by itself; visitors press buttons to try it.
• One demo button for each demo your widget defines, directly on the preview.
• An Actual size / Fill switch on the preview: Actual size shows the widget at its real size, and Fill stretches a resizable widget to the preview (within its size limits) or zooms a fixed-size one. The Start tab sets which one the page opens with, and Actual size is the default.
• Widget Properties, a sidebar where visitors try their own settings. Visitors can't change images and sounds there.
• Under the preview, About, Gallery and Links, with More by you beside them. A section with nothing in it is left out, and when one side is empty the other fills the width.
• Related widgets along the bottom: other authors' public widgets that have a page, similar ones first. Private widgets' pages don't show them.
• One header bar along the top that stays in view as you scroll: the Community logo, the widget's name with its author (click to visit their profile), its licence in plain words, and the Install with Community button.

The header bar and footer belong to Community and always stay as they are.

Design the page

The Page surface has these tabs:

Tab	What it does
Theme	Accent colour, background, light or dark mode, and the preview backdrop.
CSS	Your own styles for the preview and sections. See Custom CSS.
Content	The link name, the About text (Markdown), gallery images and links.
Demos	The demos your widget defines, each with a Test button.
Start	The values the preview opens with.

Demos

Demos come from your widget's own code. Register one with defineDemo(label, run) and the page shows a button for it. This chat example sends three messages, 100 ms apart:

defineDemo("Spam chat", async ({ wait, chatter }) => {
  for (const text of ["one", "two", "three"]) {
    simulateEvent(Event.Chat, { text, ...chatter() });
    await wait(100);
  }
});

• wait(ms) pauses the demo, and chatter() gives a varied fake chatter (name and colour) for chat events.
• Register demos while the widget loads, in top-level code or onLoad. Labels are unique, a widget can have up to 12 demos, and a label can be up to 60 characters. Add a tooltip with defineDemo(label, run, { description: "..." }).
• Demos run on the widget page and in the Widget Creator only. They never run on stream, and the Overlay Editor shows no demo buttons.
• Reset restarts the widget, which also stops every running demo.
• Events sent from a demo skip dynamic properties, so a {{...}} value in a property isn't filled in during a demo.

The first six demos show on the preview and the rest go under More. A widget with no demos gets one button per event it reacts to, each firing a sample.

The Demos tab lists your published widget's demos and each has a Test button that runs it on the page preview. To change them, edit your code. The preview uses your published widget, so a demo you've only added to the draft appears after you publish. On the Simulate tab, a Demos section lists the draft's demos with a Run button each, so you can try them before publishing.

Demo template

A container widget, such as a bounce area, has no child widgets on a page, so its preview would show an empty box. Call showDemoTemplate(Template.Demo) in onLoad to show something else on the page: a placeholder of your own, for example. Without it the page shows your showTemplate template as before.

onLoad(() => {
    showTemplate(Template.Main);
    showDemoTemplate(Template.Demo);
});

Once showDemoTemplate is called, later showTemplate calls are ignored on the page. If your widget swaps templates on events, call both, each one does nothing where the other paints: showTemplate(Template.Alert); showDemoTemplate(Template.Alert);. In the Widget Creator, the Page view switch above the preview shows your draft the way its page does.

Start values

The Simulate tab has a Use as page start shortcut. It saves the current test properties and size as the preview's starting values. Anything unset uses the property's default.

A page isn't connected to a real stream, so stream values your widget binds start with placeholders: the stream title and category, follower and subscriber counts, goals, credits, the ad schedule and the rest. The Page view switch in the Widget Creator shows them too.

Private widgets

A private widget gets a page too, and anyone with the link can see it and use the preview. Installing still needs the widget's existing share code. Visitors sign in, then enter the code on the page.

Custom CSS

Sections carry a data-block attribute: about, gallery, links, more-by-author, remixed-from and related. A remixed widget's page shows a "Remixed from" section (remixed-from) just before Related widgets: a link to the original's page when it is public and live, otherwise its name and author as plain text.

The two columns carry data-region: main (About, Gallery, Links) and side (More by you).

The preview's parts carry data-el: preview, preview-fit, demo-button and properties-sidebar.

[data-block="gallery"] { gap: 16px; }
[data-el="demo-button"] { border-radius: 999px; }

The site's header bar and footer can't be restyled.

Use your widget's images

Upload images in the Widget Creator's Assets tab, then use them in your CSS with url($alias). The alias is the image's name without the extension, in lowercase, with spaces and other symbols turned into dashes. An image named Hero Image.png becomes $hero-image:

.host { background-image: url($hero-image); }

The CSS tab lists each image with its alias and a Copy button. New images work on the page after you publish.