Skip to content
CroStreamUI kit

Content

Long-form reading: prose styles for plain Markdown, admonitions, accordions, disclosures and numbered steps.

01Prose

Prose

Typography for anything long: put class="cs-prose" on rendered Markdown and every heading, list, table, quote and code block reads like a page of the docs. No components, no JavaScript.

A docs page Raw GFM Markdown output, rendered with {@html}. Hover a heading for its link.
  • .cs-prose
  • --cs-measure

Connect OBS

CroStream talks to OBS Studio over its built-in WebSocket server. Once they're connected, your triggers can switch scenes, show sources and start clips for you.

This takes about two minutes. You'll need OBS Studio 28 or newer open on the same PC as CroStream, or on your streaming PC if you use two PCs.

Before you start

  • Close any other tool that controls OBS, like an old Stream Deck plugin.1
  • Check your OBS version under Help → About.
    • Version 28 and later have the WebSocket server built in.
    • Older versions need the separate obs-websocket plugin.
  • Keep this page open; you'll copy a password from OBS in a moment.

Turn on the WebSocket server

  1. In OBS, open Tools → WebSocket Server Settings.

  2. Tick Enable WebSocket server.

    Leave the port at 4455 unless something else on your PC already uses it.

  3. Select Show Connect Info and copy the password.

    Press Ctrl + C with the password highlighted, then select OK.

The OBS WebSocket Server Settings window with Enable WebSocket server ticked and the port set to 4455.
The WebSocket settings in OBS 30. Your password will be different.

Tip

If CroStream and OBS run on the same PC, you can leave Server Password empty. CroStream only listens on your own computer.

Connect from CroStream

Open Settings → Integrations → OBS, paste the password and select Connect. The status dot turns green when it works.

Settings you can change

SettingDefaultWhat it does
Host127.0.0.1Where OBS runs. Use your streaming PC's address if OBS is on another computer.
Port4455Must match the port in OBS.
ReconnectOnTries again every few seconds if OBS restarts mid-stream.

What CroStream can do once connected

Switch scenes
Move to any scene from a trigger, a macro or a hotkey.
Show and hide sources
Pop a camera, an image or a BRS overlay on screen for a few seconds.
Save replays
Keep the last minute as a clip the moment chat goes wild.

“I set it up between two matches and the hydrate reminder has fired every hour since. I didn't touch OBS once.”

— a streamer in the CroStream Discord

Check it's working

  • The OBS card on the dashboard says Connected.
  • Test on a scene-switch macro changes the scene in OBS.
  • Your first real trigger fires from chat.

If it won't connect

  1. Make sure OBS is open; CroStream can't start it for you.
  2. Check the port matches in both apps.
    1. OBS: Tools → WebSocket Server Settings.
    2. CroStream: Settings → Integrations → OBS.
  3. Copy the password again: a stray space at the end is the usual culprit.

Still stuck? The log in Diagnostics shows exactly what OBS answered:

[obs] dial ws://127.0.0.1:4455: connection refused
[obs] retrying in 5s (attempt 3)

Footnotes

  1. Two tools controlling OBS at once can fight over the current scene. ↩

Panel size data-size="sm" for dialogs, drawers and settings panels.

Pick which events count towards the Hype meter. Changes apply to the next stream.

  • Subs and gifted subs
  • Bits over 100
  • Raids with more than 10 viewers

See how the meter decays.

What prose leaves alone Kit components keep their own look inside prose: lists, tables and code with a cs-* class are skipped.

Prose styles only class-less elements, inside :where(), in a layer below components.

  • This list has a class, so it keeps the browser's default look.

Everything else in the kit is unaffected.

02Admonition

Admonition

Seven kinds of aside, each with its own colour, its own glyph and its name in words, so none of them relies on colour. GitHub, Starlight and MkDocs names all map onto them.

Types note · tip · important · success · warning · caution · danger

Note

Your channel points rewards appear in CroStream as soon as you create them on Twitch.

Tip

Hold Shift while you drag a step to copy it instead of moving it.

Important

Triggers only run while CroStream is open. Leave it running for the whole stream.

Success

OBS is connected. Scene switches from triggers will happen instantly.

Warning

Twitch signs you out after 60 days. CroStream warns you a week before.

Caution

Sounds louder than your mic will be clipped on stream. Keep alert volume under 80%.

Danger

Deleting a profile removes every trigger and macro in it. This can't be undone.

Tip:Name your scenes clearly

A custom title still tells screen readers it's a tip. Names like BRB and Just chatting are easier to pick from a list than Scene 4.

Collapsible A native <details>: opens without JS, eases open where the browser can animate height.
Warning:Before you go live

Run every new trigger once with Test, then check the scene, the sound and the overlay each look right in OBS.

Triggers that switch scenes can't be undone from chat.

Note:Why does CroStream need my Twitch login?

To read chat, channel points and follows, and to run commands like shoutouts as you. It never posts on its own.

First item open: yes (bindable)

With rich content Lists, links and code flow inside like prose.

Important:Two PCs?

Install CroStream on the PC that runs OBS. On the gaming PC, use Companion mode for:

  • Steam achievements
  • Discord voice status
  • Hotkeys from your keyboard
From Markdown The same look with plain HTML: no component, no script. Paste into any Markdown file.
connect-obs.md HTML 
<div class="cs-admonition" data-type="warning" role="note">
  <p class="cs-admonition-title">Warning</p>
  <p>Test a new trigger offline first.</p>
</div>

<details class="cs-admonition" data-type="tip">
  <summary class="cs-admonition-title">Why does this need OBS 28?</summary>
  <p>Older versions don't ship the WebSocket server.</p>
</details>

Warning

Test a new trigger offline first.

Why does this need OBS 28?

Older versions don't ship the WebSocket server.

03Accordion

Accordion

Questions and settings that open in place. Arrow keys move between items; closed answers stay findable with Ctrl+F, which opens the right one.

Flush, one at a time The FAQ shape: a divided list that keeps the page's left edge clean.

Yes. Everything you need to run triggers, macros, alerts and overlays is free, with no time limit.

Subscribing to Haliebug13 on Twitch unlocks bigger limits and the premium integrations while your sub is active.

Open: free · last item disabled

Boxed, any number open Each item its own panel, for grouped settings.

Follows, subs, bits and raids each get their own sound and overlay. Turn any of them off for quiet streams.

Open: alerts

04Details

Details

The browser's own disclosure, styled. Works with no JavaScript at all, so any plain <details> in Markdown gets it for free.

Component Shared name: opening one closes the other, natively.
Show advanced options

Cooldowns stop a trigger firing again too soon. Set one per trigger, or a global one for every chat command.

A user cooldown limits each viewer; a global cooldown limits everyone.

Which events can start a trigger?

Chat messages, commands, channel points, follows, subs, bits, raids, hype trains, hotkeys and webhooks.

Can a trigger run more than one action?

Yes: point it at a macro and the actions run in order, with waits between them if you like.

Plain Markdown A bare <details> inside .cs-prose.
What happens if OBS crashes mid-stream?

CroStream keeps trying to reconnect every few seconds. Triggers that need OBS wait until it's back, then run in order.

05Steps

Steps

A numbered procedure. Markers joined by a rail keep long steps with screenshots and code readable as one sequence.

Make your first trigger Titles sit level with their markers; anything can follow underneath.

  1. Open Triggers and select New trigger

    Triggers live in the sidebar under Automate. If this is your first one, the list is empty and the button sits in the middle.

  2. Choose what starts it

    Pick Chat command and type the word viewers will use. Commands start with !, so hydrate becomes:

    Chat 
    !hydrate

  3. Choose what happens

    Add an action. For a reminder, pick Send chat message and write something friendly. You can add more actions later: a sound, a scene switch, an overlay.

    Tip

    Use {user} in the message to greet whoever typed the command.

  4. Save, then test it

    Select Test to run it once without anyone typing in chat. When it does what you expect, it's ready for stream.

Progress through a guide done shows a check and a green rail; current is the filled marker (aria-current="step").

  1. Pick what starts it (done)

  2. Choose what happens

  3. Test it

  4. Turn it on

From Markdown <ol class="cs-steps">: the same look with no component.

  1. Open Triggers and select New trigger.

  2. Pick Chat command and type !hydrate.

  3. Select Save.

HTML 
<ol class="cs-steps">
  <li><p>Open <strong>Triggers</strong> and select <strong>New trigger</strong>.</p></li>
  <li><p>Pick <strong>Chat command</strong> and type <code>!hydrate</code>.</p></li>
  <li><p>Select <strong>Save</strong>.</p></li>
</ol>