Skip to content
CroStreamUI kit

01Prop form

Prop form

One form for any widget's props: a control per kind (text, textarea, number, bool, colour, enum, media, font, effects, frame, items, folder), grouped by section. Colours and fonts can follow the overlay's theme. Every control reports a phase, so a host records one undo step per gesture.

Thank-you card Edit anything; the values and the changes it reports are on the right. Reset appears for a prop that differs from its default.

Shown big at the top.

Sticker
Nothing chosen
Chime
Nothing chosen
Open in the Media library

Theme text
Theme accent

Headline effects

Headline effects

Card frame

Card frame

Socials
Alt+↑ / ↓ on a heading moves it.

Changes

Nothing yet.

Values

{
  "headline": "Thank you, Mochi_Moth!",
  "message": "Welcome to the cozy corner. Grab a blanket!",
  "duration": 6,
  "queue": 3,
  "showAvatar": true,
  "sticker": "media-heart",
  "chime": "media-chime",
  "pile": "stickers",
  "headlineColor": "theme:text",
  "subColor": "theme:accent",
  "headlineFont": "theme:heading",
  "headlineSize": 72,
  "align": "center",
  "entrance": "fade",
  "badge": "heart",
  "headlineEffects": {
    "outlines": [
      {
        "width": 5,
        "color": "#1c0f33"
      }
    ],
    "shadows": [
      {
        "x": 0,
        "y": 4,
        "blur": 8,
        "color": "#00000066"
      }
    ]
  },
  "cardFrame": {
    "shape": {
      "kind": "rect",
      "radius": [
        18,
        18,
        18,
        18
      ]
    },
    "fill": {
      "kind": "solid",
      "color": "theme:panel"
    },
    "border": {
      "width": 2,
      "style": "solid",
      "color": "theme:border"
    },
    "padding": 18
  },
  "socials": [
    {
      "icon": "twitch",
      "handle": "haliebug13"
    },
    {
      "icon": "bluesky",
      "handle": "halie.bsky.social"
    },
    {
      "icon": "kofi",
      "handle": "haliebug"
    }
  ]
}

02Theme

Theme

Eight colours and two fonts that any setting can follow as theme:accent. Change one and everything following it changes.

Theme panel Keys left alone take the default; Reset clears them.

Colours and fonts that settings can follow. Change one here and everything using it changes too.

03Text effects

Text effects

Fill, outline, shadows, glow, 3D, highlight, decoration, blend, layout and animation, with built-in and saved looks. Applying a look can bring its colour and font along.

Effects editor Pick Gold from Presets, save your own, delete it again.

Headline effects

04Frames

Frames

A box style: shape, fill, border, rings, brackets, shadows, glow, bevel, texture, an image frame with nine-slice guides, animation and padding.

Frame editor Choose a frame image under Image frame, then drag the slice guides.

Card frame

05Items, media and folders

Items, media and folders

Lists of fields (a wheel's segments shows its weights as a pie), a media library file and a library folder.

Items editor Add, reorder with the grip or Alt+arrows, remove.
4 segments by weight
Alt+↑ / ↓ on a heading moves it.

Media and folder Pictures come from the library on the port; a missing file says so.
Backdrop
Nothing chosen
Missing file
Nothing chosen
Open in the Media library

06CSS

CSS

The inspector's CSS box: the code editor, the parts an element exposes (click one to insert its selector) and starter snippets.

CSS box The host plugs its CSS completion and lint into the editor.

Applies to this element only. Plain declarations or :scope style the element itself; the parts below style pieces of it.

CSS 45 / 65,536 Ln 1, Col 1

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

Parts
Starters