Skip to content
CroStreamUI kit

Docs

The pieces a docs page is built from: link cards, screenshots, chat bubbles, contents, file trees, breadcrumbs and settings tables.

01LinkCard

LinkCard

The “where next” cards at the end of a docs page. The whole card is one link; its name is the title, the description is read after it.

Next steps CardGrid picks 1–3 columns from its own width, not the screen's.
  • --cs-surface-1
  • --cs-accent-soft
Step 2: Connect OBS Turn on OBS's WebSocket server and paste its password into CroStream. Step 3: Create your first trigger Make a chat command that plays a sound when a viewer types !hydrate. Step 4: Add alerts to your stream Show follows, subs and raids on screen with a browser source.
Without icons Two columns at most; the arrow nudges toward where you're going.
Triggers Chat commands and channel point rewards. Macros Steps that run in order.
External Opens in a new tab, says so to screen readers, and the arrow points out.
Ask in the CroStream Discord Other streamers and the developer answer questions most days. (opens in a new tab)

02Figure

Figure

Screenshots in a quiet frame, with optional window chrome and a caption. Images carry their size so nothing jumps while they load; click to zoom when detail matters.

App window, zoomable Click or press Enter on the picture: it opens full size in a dialog.
In OBS, open Tools → WebSocket Server Settings and tick Enable WebSocket server.
Browser chrome For overlay pages: the address bar shows the URL to paste into OBS.
The alerts overlay, as OBS's browser source sees it.
Plain frame, rich caption No chrome; the caption can carry code and links.
Type the command without spaces, starting with !. Viewers can then use it in chat.

03ChatBubble

ChatBubble

Show what to type in chat and what CroStream says back. The leading !command is set like a key to press; @mentions stand out.

A conversation ChatLog groups bubbles under a channel header. Static examples never announce themselves.

Subscriber NightOwl_TV !hydrate

CroStream @NightOwl_TV Hydration check! Everyone grab some water.

Moderator mossy_mug !clip

CroStream @mossy_mug clipped it! clips.twitch.tv/HydrationHero

Broadcaster VIP Haliebug13 thank you chat, you're the best

Name colours Six chat colours, all mapped to text tokens, so every name passes contrast in both themes. Unset, a name always gets the same one.

PixelPanda !points

VelvetFox !points

NightOwl_TV !points

mossy_mug !points

Kestrel !points

LoFiLuna !points

Badges Each badge is a shape on a solid tone, named for screen readers.

Broadcaster Haliebug13 we're live!

Moderator Subscriber mossy_mug !so @PixelPanda

VIP VelvetFox that was a clean clutch

Bot Nightbot Follow the socials: !links

CSS-only, for Markdown The same look from plain HTML: .cs-chat for CroStream, .cs-chat--viewer for a viewer.

NightOwl_TV !airhorn

CroStream Thanks for the raid, PixelPanda!

In a .md page HTML 
<p class="cs-chat cs-chat--viewer"><b>NightOwl_TV</b> <code>!airhorn</code></p>
<p class="cs-chat"><b>CroStream</b> Thanks for the raid, PixelPanda!</p>

04TableOfContents

TableOfContents

“On this page”, following the reader. Server-rendered it's a plain list of links; hydrated, the current section gets a sliding marker and aria-current.

Scroll-spy Scroll the article: the marker follows. Here it spies on the panel; on a docs page, on the window.

Before you start

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

Turn on the WebSocket server

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

Copy the password

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

Change the port (optional)

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

Connect CroStream

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

If it won’t connect

Open OBS and find the Tools menu. Each step here mirrors the real setup guide, so the contents list has something to follow while you scroll this panel.

CroStream talks to OBS over a local connection on your own computer. Nothing leaves your PC, and you can change any of this later in Settings.

Folded (narrow screens) Below 64rem it becomes a disclosure that names the section you're in.
Current section Bound to the example above, so other parts of a page can react too.

Reading Before you start

05FileTree

FileTree

“Your folder should look like this.” Icons by file type, guides for nesting, notes beside entries, and a highlight for the file the step is about.

Config folder Folders fold with native disclosure: keyboard and screen reader friendly, no script needed.
  • CroStream %APPDATA%\CroStream on Windows
    • config.json (highlighted) your triggers, macros and settings
    • backups
      • config-2026-10-13.json
      • config-2026-10-12.json
      • …
    • media
      • sounds
        • airhorn.mp3
        • hydrate.wav
      • images
        • raid-banner.webp
    • overlays
      • alerts.html add as a browser source
    • logs
      • crostream.log
      • crash-2026-10-11.txt
Static collapsible={false} for short listings that should always show everything.
  • hydrate-meter
    • widget.csw (highlighted) the file you import
    • widget.js
    • style.css
    • assets
      • droplet.svg
      • splash.mp3

07SettingsTable

SettingsTable

The reference table for every settings page: the setting as the app labels it, a plain-words type, and what it does, with the default and whether it's required.

Overlay settings copyNames adds a copy button that appears on hover or focus (always shown on touch).
Overlay settings
SettingTypeDetails
Overlay port NumberDefault 8080 The port OBS browser sources load overlays from. Change it only if another app already uses 8080.
Moment buffer SecondsDefault 30 How much of the stream CroStream keeps ready, so a Moment can include what happened just before.
Alert volume PercentDefault 80% Loudness of alert sounds, on top of the volume in OBS.
Trigger form Required chips, allowed values and rich details.
New trigger settings
SettingTypeDetails
Command RequiredText What viewers type, starting with !, with no spaces. Not case-sensitive: !Hydrate works too.
Who can use it ChoiceDefault Everyone Options: EveryoneSubscribersVIPsModerators
Cooldown SecondsDefault 0 (off) Wait this long before the command works again, for everyone.
Hotkey Keys Also run it from the keyboard, e.g. Ctrl Shift H. Leave empty for none.
Under 600px: cards The same table in a phone-width column; the header row hides and each setting stacks.
New trigger settings (phone)
SettingTypeDetails
Command RequiredText What viewers type, starting with !, with no spaces. Not case-sensitive: !Hydrate works too.
Who can use it ChoiceDefault Everyone Options: EveryoneSubscribersVIPsModerators
Cooldown SecondsDefault 0 (off) Wait this long before the command works again, for everyone.
Hotkey Keys Also run it from the keyboard, e.g. Ctrl Shift H. Leave empty for none.