Skip to content
CroStreamUI kit

App UI

The CroStream app screens, built on the kit and shared with docs and the demo: the port provider, supporter gate, provider marks, platform support and manifest-driven forms.

01ProviderMark

ProviderMark

An integration's identity: its glyph in a small tile. Platforms wear their brand colour; the built-in groups use the accent and the same icon as their nav entry; anything unknown shows its initial.

Platforms sm, md and lg.
  • --cs-brand-*
Built-in groups
Unknown provider The first letter of the name.
Decorative Next to a visible label, hide the mark from assistive tech. Otherwise it is an image named after the provider.
Twitch

02Locked

Locked

The supporter gate. It says what a subscription unlocks and offers the way in, and sits above a read-only page instead of covering it, so nothing that already works breaks. LockBadge is the small tag for list rows.

Full Above a locked page. Subscribe calls GatePort.subscribe().

Queues are a subscriber feature

Viewers can join a line you control, and you can pull the next one with a trigger. Have Amazon Prime? Your free monthly Prime sub unlocks CroStream too. Prime subs don’t renew by themselves, so claim it again each month.
Compact A slim bar for editors.

Webhooks. Your existing webhooks keep running, but are read-only until you subscribe.

LockBadge A button, so it never sits inside another one.

03PlatformSupport

PlatformSupport

How well a trigger or action works on each OS. This computer's OS comes first and is warned about when limited; leave it out for a neutral list. Renders nothing when it works everywhere.

On Windows Everything works here.
  • Windows this computer Works
  • macOS Limited Needs the screen recording permission.
  • Linux No Wayland blocks global hotkeys.
On Linux Not available here: a warning leads.
Not available on this computer (Linux): Wayland blocks global hotkeys.
  • Linux this computer No
  • Windows Works
  • macOS Limited Needs the screen recording permission.
Neutral Docs and marketing pages.
  • Windows Works
  • macOS Limited Needs the screen recording permission.
  • Linux No Wayland blocks global hotkeys.

04ManifestForm

ManifestForm

Renders a manifest's field list: every Go field kind maps to a kit control or a small appui widget, values keep their wire shape, and cleanParams gives what to save. Choices that need the host come from loadOptions.

Real fields Pick an action, trigger or settings group from the app's manifests.
  • ManifestForm
  • fields
  • values
  • loadOptions
User

Like 30s, 2m or 1h30m.

Reason
Saved params cleanParams: empty values dropped.
{}

05AppShell

AppShell

The app frame: sidebar, top bar with breadcrumbs and connections, a page that scrolls inside it, the status bar and the command palette (Ctrl or ⌘ K). Everything it shows comes from the nav, gate and shell ports, so the same frame runs in the desktop app and here. Pages name themselves in the last breadcrumb with pageLabel(). Narrow windows swap the sidebar and status bar for a tab bar.

Desktop Free plan: locked items carry a lock and the pill offers the subscribe flow. Open the New trigger page to see the page label.
Live , 128 viewers

Triggers

Placeholder for /triggers. The real screen renders here.

Phone Under 48rem the sidebar and status bar give way to a tab bar, with the rest under More.
Live , 128 viewers

Dashboard

Placeholder for /. The real screen renders here.

06Triggers

Triggers

The reference feature module: a list page and an editor on one port. Memory triggers apply every change in place and never save; Test and Send in demo only say what they would run. Try Cancel, Save, Delete, a subscriber event (VTube Studio, Steam) and leaving with unsaved changes.

List Search, Test, the row menu (Edit, Send in demo, Delete), and New trigger.

Automate

Triggers

When something happens, run a macro: a chat command, a redemption, a raid, a follow.

Triggers
Actions
Loading Triggers
Editor: an existing trigger Dirty tracking blocks leaving (Cancel does nothing while there are unsaved changes); Test needs a clean form.

Trigger

Trigger

Editor: a new trigger Pick an event to get its settings and variables.

Trigger

New trigger

Editor: follows its id TriggerEditorPage takes an id prop and follows it without a {#key}: switching reloads the data and refills the form (unsaved edits to the previous trigger are dropped).

Trigger

Trigger

Editor: follows its preset event A new trigger nobody has edited takes the event prop when it changes (/triggers/new to /triggers/new?event=…); once you type, a new preset leaves your edits alone.

Trigger

New trigger

07Modules

Modules

Every automate screen is a module of its own: its pages, port, demo data and in-memory adapter. Each has a catalog page with specimens and every state (free plan, over the cap, empty, editing), and they all run together in the full-screen demo.

  • TriggersWhat starts a macro: chat commands, redemptions, alerts, hotkeys. Shown above.
  • DashboardThe home page: stream status, OBS health, the week at a glance, the audience, recent events and leaders.
  • ActivityThe channel feed with what CroStream did about each event, period totals and top supporters.
  • HistoryThe automation log and the chat log: filters, runs, a volume chart and export.
  • ViewersEveryone who has shown up: points, roles, a profile for each and tools to adjust them.
  • MomentsHighlights found on each stream, with previews and local clips.
  • Demo controlsRun a simulated stream: go live, set the pace and fire events.
  • MacrosThe step-tree editor: actions, conditions, branches, loops and delays.
  • QueuesHold moments and release them at a steady pace.
  • CountersNumbers that keep count: deaths, water breaks, head pats.
  • ListsLists, maps and tables for raffles, wheels and lookups.
  • VariablesValues your automations remember: text, numbers and flags.
  • SchedulesMacros by the clock: set times, every N minutes, once, after going live.
  • GoalsTargets with milestones, driven by followers, subs, bits or a counter.
  • TimersCountdowns and stopwatches macros start and react to.
  • CooldownsShared cooldown groups for triggers and macros.
  • WebhooksIncoming hooks that start macros, and destinations macros post to.
  • ActionsEverything CroStream can do, by integration, each with its own page.
  • IntegrationsEvery connection and built-in on one list, each on the shared integration page.
  • Discord panelWho is signed in, a live profile preview, the status editor and suggestions.
  • Steam panelNow playing, the library, screenshots and game-to-category automations.
  • VTube Studio panelConnection and approval, the model, permissions, anchors and a quick test.
  • Moments panelThe highlight detector live, OBS capture with FFmpeg, and recent moments.
  • Login alertsBanners and the modal that warn before a login runs out, and the login wait.
  • CompanionPair a gaming PC and choose where Steam, Discord, hotkeys and screen flash run.
  • OverlaysEvery overlay as a card: categories, favourites, alerts, a live preview and the OBS link.
  • Overlay editorThe canvas editor: layers, an inspector for every prop, alerts and a live preview.
  • WidgetsYour widget library, the gallery of installable widgets and the import dialog.
  • Widget editorEdit a widget: HTML, CSS and JS with completion, fields, data, history and a live preview.
  • Media libraryFolders, tags, search, details, trash and uploads for the files overlays use.
  • FontsPick, preview and manage fonts from the media library and Fontsource.
  • OrganizeCategories, favourites and drag-to-sort shared by overlays and widgets.
  • Prop editorsThe shared prop forms: text, frame and effect presets, media and font pickers.
  • SettingsOne column of anchored sections: plan, config, desktop, Companion, history, backups and export.
  • Settings: dataChat and trigger history, backups and restore, export and import.
  • Settings: systemDemo mode, updates, crash reporting and the Report dialog.
  • ControlsThe stream controls panel and its pop-out window.
  • Chat windowThe chat pop-out: messages, badges, filters and the moderation strip.
  • Overlay rendererThe stage that draws an overlay for OBS and the editor, including custom widgets.

Open the full-screen demo with every module

08Embeds

Embeds

The same screens on a docs or marketing page: one island each, with its own demo ports, nothing saved. The whole app runs full-screen at /appui/demo.

Open the full-screen demo