Skip to content
CroStreamUI kit

Settings forms

Settings built from a schema, and every field kind they need: tags, key-value pairs, lists, secrets, hotkeys, JSON, sizes, repeatable rows and tri-state checklists.

01SchemaForm

SchemaForm

Settings drawn from a list of fields. Each field picks its control by kind and sits in a labelled Field, so help and errors are always tied to the control. Fields can depend on others, choices can load from the network with a Retry beside the select, and unknown kinds come from a widgets map.

Discord integration settings Choose “Plain message” and the colour hides. Save with an empty channel to see errors wired up.
Connection

Saved. Leave this empty to keep the saved value.

From the Discord developer portal. It never leaves this computer.

Where CroStream posts.

Message

Code editor. Tab indents; press Escape, then Tab, to move focus out.

Placeholders in braces are filled in when it sends.

Embed colour

Up to three roles get pinged.

Limits

Wait at least this long between posts. Like 30s, 2m or 1h30m.

{}
Slider and segmented Opt in per field with slider: true and display: 'segmented'. The number field is still there for typing.
Size

A ranged number can draw as a slider with the number beside it.

Align

A few short choices read better as segments than as a menu.

{}

02TagInput

TagInput

Chips plus a combobox. Type to filter, ↑/↓ to move, Enter or a comma to add; Backspace in the empty field removes the last chip. New tags can go through a colour step first.

Clip tags with create Type “Victory” and press Enter: pick a colour, then Create.
  • Hype
  • Clutch

What happened in this clip.

Existing choices only, with a limit Up to three; the field says when it's full.
  • @Mods

Validated free text Commands must be one word with no spaces.
Optional

Disabled Disabled text is exempt from contrast rules but stays readable.
  • Hype
  • Raid

03KeyValueEditor

KeyValueEditor

Rows of key and value for webhook headers, form fields and lookups. Add, remove and reorder with the buttons or Alt+↑/↓; the same key twice is marked in words.

Webhook headers Focus a field and press Alt+↓ to move its row.
Headers
Alt+↑ / ↓ moves a row.

Duplicate keys Both rows say so; the form can block Save.
Form fields

  1. Used twice

  2. Used twice

Alt+↑ / ↓ moves a row.

Two rows use the same key.

04ListInput

ListInput

A list typed as text. The entries show as chips underneath, so it's clear how the text was read; entries that fail a check are named in words.

Comma-separated Blocked words for the chat filter.

3 entries. Separate entries with commas.

  • spoiler
  • leak
  • ending
One per line Entries keep their commas.

2 entries. One entry per line.

  • Drink some water, {user.name}!
  • Hydration check, chat 💧

One picks at random each time.

Checked entries

2 entries. One entry per line.

“not a link”: not a web address

  • https://crostream.io
  • not a link

05SecretInput

SecretInput

For tokens and keys the server never sends back. The state is spelled out in words under the field (saved, will be replaced, not set), not shown as a dot.

Saved Leave it empty to keep it, or Clear saved.

Saved. Leave this empty to keep the saved value.

Will be replaced

Saving will replace the saved value.

Not set, required

Not set yet. This is required.

06HotkeyInput

HotkeyInput

Records a key combination: activate it, press the keys. Esc cancels, Backspace clears, plain Tab leaves. Shown as keycaps, read out in words, and problems are explained.

Set Press Enter on it, then a combination.
Save a Moment

Not set Try a letter alone: it needs a modifier.
Mute alerts

F13–F24 and media keys work alone.

Conflict
Switch scene

Already used by “Save a Moment”.

07JsonField

JsonField

JSON in the code editor. Invalid text is never thrown away: the problem is named with its line, `invalid` is bindable so Save can wait, and Reset puts the default back.

Widget data Break it and Save disables.
JSON Ln 1, Col 1

Code editor. Tab indents; press Escape, then Tab, to move focus out.

Valid JSON.

Invalid A trailing comma, named with its line.
JSON Ln 1, Col 1

Code editor. Tab indents; press Escape, then Tab, to move focus out.

Not valid JSON. Line 4: Expected double-quoted property name

08SizeInput

SizeInput

Width × height: scrubbable numbers clamped to a range, an optional aspect lock, a presets menu for the usual canvas sizes, and Reset.

Overlay canvas Pick “1080p portrait” from Presets for a Shorts overlay.
Canvas size

1920 × 1080 · locked

Small element, no presets Clamped to 16–1920.
Preview size

09RepeaterList

RepeaterList

Rows you can add, remove and reorder: by the grip, with the Move buttons, or Alt+↑/↓ on a heading. Every change is announced and focus stays where you were. Rows fold to a one-line summary and are keyed by id, so typing state never jumps.

Widget fields The custom-widget field designer: keys are checked as you type. Try Alt+↓ on “Goal”.

  1. How the widget's code reads it.

  2. How the widget's code reads it.

  3. How the widget's code reads it.

    3 entries. One entry per line.

    • Pill
    • Block
    • Ring
Alt+↑ / ↓ on a heading moves it.

Limits At least one, at most three; the reason shows beside Add.
  1. Outline 1 2px

    Width 2px

  2. Outline 2 6px

    Width 6px

Alt+↑ / ↓ on a heading moves it.

10TriStateChecklist

TriStateChecklist

Edit one set of options across many things at once. Each starts as on all, on some (mixed) or on none of the selection; clicking cycles it, and a mixed one can go back to “leave as is”. The result is only the difference.

Tags on 5 clips Hype is on all, Raid on 2 of 5. Click Raid twice to remove it everywhere.

No changes yet.

add: [] · remove: []

Bulk tag dialog The media library's “Tag…” on a multi-selection.

11EditableList

EditableList

Manage named things: rename in place, recolour, see how much each is used, and delete with a two-step confirmation that says what happens. Names must be unique.

Tag manager Rename “Funny” to “Hype” to see the duplicate check; delete “Raid” to see the warning.
  • Used on 42 clips
  • Used on 9 clips
  • Used on 17 clips
  • Not used yet

12ConditionBuilder

ConditionBuilder

A rule builder: comparisons joined by all or any, nested groups, and “not” on any rule. A rule checks a template or a live value, compares it with operators fitted to its kind, and shows the right control for the value.

One rule Number operators for a numeric variable; the value is a template field with {variable} completion.

{bits} ≥ 100

Nested groups, live values Groups nest up to maxDepth; facts group under their integration and can warn when it is offline.
Match
of these
Group
Match
of these

stream is live or not {user_login} = nightbot or (counter value (headpats) ≥ 10 and {message} contains pat)

Empty A new condition holds a blank rule; an empty one holds always.
Problems showErrors marks unfinished rules now, not only after they are touched. This one has problems.
Match
of these

Choose what to check

Disabled Read-only look with dashed edges in High contrast.
Match
of these
Group
Match
of these
Limits maxDepth 1 allows no groups; maxRules 2 stops adding after two.
Match
of these