Data
Tables that sort, select and collapse to cards on phones, plus pagination, key/value lists, highlighted code and a full code editor.
01Table
Table
Sorts, selects (shift-click for ranges), keeps its header while you scroll, and turns into labelled cards when there's no room for columns.
--cs-control-h-md--cs-state-selected--cs-edge-shade
| Status | Actions | |||||
|---|---|---|---|---|---|---|
| New follower confetti | Follow | 8,410 | Active | |||
Hydrate !hydrate | Channel points | 1,284 | Active | |||
Discord link !discord | Chat | 1,733 | Active | |||
Lurk mode !lurk | Chat | 3,920 | Active | |||
Socials reminder every thirty minutes while live !socials | Chat | 2,051 | Active | |||
Clown nose on the model !honk | Channel points | 612 | Cooling down | |||
Pet the cat cam !cat | Channel points | 947 | Cooling down | |||
| Bits rain | Bits | 158 | Active | |||
| Raid welcome | Raid | 74 | Active | |||
| BRB screen | Hotkey | 512 | Active | |||
| Hype train horn | Bits | 19 | Active | |||
| Scene: Just Chatting | Hotkey | 233 | Active | |||
| Spooky scare flash | Channel points | 41 | Paused | |||
Song request !sr | Chat | Never | 0 | Paused |
| # | ||||
|---|---|---|---|---|
| 1 | pixel_mage Sub | 184,220 | 412.0 h | just now |
| 2 | Haliebug13 | 135,186 | 340.5 h | 2 hours ago |
| 3 | NightOwlNoodle Sub | 106,412 | 290.1 h | 3 hours ago |
| 4 | quietcartographer Sub | 87,665 | 252.8 h | 5 hours ago |
| 5 | Il1ya_l1ght | 74,458 | 223.9 h | 6 hours ago |
| 6 | mossy_tea Sub | 65,534 | 201.0 h | 8 hours ago |
| 7 | TurboGranny Sub | 57,925 | 182.3 h | 10 hours ago |
| 8 | sleepyshrimp | 51,848 | 166.8 h | 11 hours ago |
| 9 | captain_crumpet Sub | 46,872 | 153.7 h | 13 hours ago |
| 10 | ZeroO0zone Sub | 42,716 | 142.6 h | 15 hours ago |
| Trigger | Source | Last fired | Runs |
|---|
| Trigger | Source | Last fired | Runs |
|---|---|---|---|
No triggers match “lurkmode2” Check the spelling, or search by command instead of name. | |||
| Status | Actions | |||||
|---|---|---|---|---|---|---|
Hydrate !hydrate | Channel points | 1,284 | Active | |||
Lurk mode !lurk | Chat | 3,920 | Active | |||
Clown nose on the model !honk | Channel points | 612 | Cooling down | |||
| Raid welcome | Raid | 74 | Active |
| Order | Trigger | Source | Last fired | Runs | |
|---|---|---|---|---|---|
Hydrate !hydrate | Channel points | 4 minutes ago | 1,284 | ||
Lurk mode !lurk | Chat | 11 minutes ago | 3,920 | ||
| Raid welcome | Raid | 3 hours ago | 74 | ||
Clown nose on the model !honk | Channel points | 38 minutes ago | 612 | ||
| New follower confetti | Follow | 2 minutes ago | 8,410 | ||
| Scene: Just Chatting | Hotkey | yesterday | 233 |
| Order | Trigger | Source | Last fired | Runs |
|---|---|---|---|---|
Hydrate !hydrate | Channel points | 4 minutes ago | 1,284 | |
Lurk mode !lurk | Chat | 11 minutes ago | 3,920 | |
| Raid welcome | Raid | 3 hours ago | 74 | |
Clown nose on the model !honk | Channel points | 38 minutes ago | 612 | |
| New follower confetti | Follow | 2 minutes ago | 8,410 | |
| Scene: Just Chatting | Hotkey | yesterday | 233 |
| Command | Status | Actions | |||
|---|---|---|---|---|---|
| Chat ,4 | |||||
| Lurk mode | !lurk | 11 minutes ago | 3,920 | Active | |
| Socials reminder every thirty minutes while live | !socials | 29 minutes ago | 2,051 | Active | |
| Song request | !sr | Never | 0 | Paused | |
| Discord link | !discord | 8 minutes ago | 1,733 | Active | |
| Channel points ,4 | |||||
| Hydrate | !hydrate | 4 minutes ago | 1,284 | Active | |
| Clown nose on the model | !honk | 38 minutes ago | 612 | Cooling down | |
| Spooky scare flash | — | 3 days ago | 41 | Paused | |
| Pet the cat cam | !cat | 52 minutes ago | 947 | Cooling down | |
| Follows ,1 | |||||
| New follower confetti | — | 2 minutes ago | 8,410 | Active | |
| Raids ,1 | |||||
| Raid welcome | — | 3 hours ago | 74 | Active | |
| Bits ,2 | |||||
| Bits rain | — | 2 hours ago | 158 | Active | |
| Hype train horn | — | 10 hours ago | 19 | Active | |
| Hotkeys ,2 | |||||
| Scene: Just Chatting | — | yesterday | 233 | Active | |
| BRB screen | — | 5 hours ago | 512 | Active | |
| Command | Status | Actions | |||
|---|---|---|---|---|---|
| Hydrate | !hydrate | 4 minutes ago | 1,284 | Active | |
| Lurk mode | !lurk | 11 minutes ago | 3,920 | Active | |
| Raid welcome | — | 3 hours ago | 74 | Active | |
| Clown nose on the model | !honk | 38 minutes ago | 612 | Cooling down | |
| New follower confetti | — | 2 minutes ago | 8,410 | Active |
| Trigger | Source | Last fired | Runs |
|---|---|---|---|
| Hydrate | Channel points | 4 minutes ago | 1,284 |
| Lurk mode | Chat | 11 minutes ago | 3,920 |
| Raid welcome | Raid | 3 hours ago | 74 |
| Clown nose on the model | Channel points | 38 minutes ago | 612 |
| Trigger | Source | Last fired | Runs |
|---|---|---|---|
| Hydrate | Channel points | 4 minutes ago | 1,284 |
| Lurk mode | Chat | 11 minutes ago | 3,920 |
| Raid welcome | Raid | 3 hours ago | 74 |
| Clown nose on the model | Channel points | 38 minutes ago | 612 |
02Pagination
Pagination
Numbered pages with ellipses for long lists, or a compact range readout for toolbars. Arrow keys move between pages.
--cs-control-h-sm
03DescriptionList
DescriptionList
Key/value details as a real description list. Terms share one column; copyable values carry their own copy button.
- Name
- Stream deck relay
- Endpoint
- https://hooks.example.com/crostream/9f2c4e1a
- Signing secret
- whsec_••••••••••••3Fq9 Copied in full; shown masked.
- Events
- channel.points.redeemed, channel.raid, stream.online
- Last delivery
- 200 OK · 4 minutes ago · 182 ms
- Created
- Oct 5, 2026, 8:30 PM
- Login
- pixel_mage
- Points
- 184,220
- Watch time
- 412.0 hours
- First seen
- March 2, 2025
04CodeBlock
CodeBlock
Payloads, commands and config. Known languages are highlighted on the server with the editor's own colours, so a read-only block costs no JavaScript. Line numbers never come along when you copy; long lines scroll with an edge shade, or wrap on request.
--cs-syntax-*
{
"id": "evt_01JA7W3T8M5Q2K",
"type": "channel.points.redeemed",
"created_at": "2026-10-14T20:26:11Z",
"channel": { "id": "41245072", "login": "haliebug13" },
"data": {
"reward": { "id": "c0ffee42", "title": "Hydrate", "cost": 500 },
"user": { "id": "88123004", "login": "pixel_mage", "display_name": "pixel_mage" },
"input": "",
"trigger": { "id": "t1", "macro": "hydrate-sip", "queued": false }
}
}
// Hydrate reminder: counts up drinks and celebrates every fifth.
const goal = sl.fields.goal ?? 8;
let drinks = 0;
sl.on('trigger', ({ user }) => {
drinks += 1;
sl.set('count', `${drinks} / ${goal}`);
if (drinks % 5 === 0) {
sl.play('cheer', { volume: 0.6 });
sl.flash(`Thanks, ${user.name}!`);
}
});
/* Reset at the start of every stream */
sl.on('stream.online', () => (drinks = 0));
<div class="card">
<img class="drop" src="{{asset 'drop.png'}}" alt="" />
<p class="count">{{count}}</p>
{{#if user}}
<p class="thanks">Thanks, {{user.name}}!</p>
{{else}}
<p class="thanks">Stay hydrated</p>
{{/if}}
</div>
{
"content": "{user.name} redeemed {reward.title}",
"username": "CroStream",
"embeds": [
{
"title": "{reward.title}",
"description": "{reward.input}",
"color": 3999487,
"fields": [
{ "name": "Cost", "value": "{reward.cost} points", "inline": true },
{ "name": "Viewers", "value": {stream.viewers}, "inline": true }
]
}
]
}
curl -X POST https://hooks.example.com/crostream/9f2c4e1a -H "Content-Type: application/json" -H "X-CroStream-Signature: sha256=5d41402abc4b2a76b9719d911017c592" --data @payload.json
curl -X POST https://hooks.example.com/crostream/9f2c4e1a -H "Content-Type: application/json" -H "X-CroStream-Signature: sha256=5d41402abc4b2a76b9719d911017c592" --data @payload.json
#!/usr/bin/env bash
# Deliver a test event to the local listener.
set -euo pipefail
URL="${CROSTREAM_URL:-http://127.0.0.1:8080}"
for kind in follow cheer raid; do
if curl -fsS -X POST "$URL/hooks/test" -H 'Content-Type: application/json' \
-d "{"type": "$kind", "amount": 100}"; then
echo "sent $kind"
fi
done
<# Deliver a test event to the local listener. #>
param([string]$Url = 'http://127.0.0.1:8080')
foreach ($kind in 'follow', 'cheer', 'raid') {
$body = @{ type = $kind; amount = 100 } | ConvertTo-Json
Invoke-RestMethod -Method Post -Uri "$Url/hooks/test" -Body $body -ContentType 'application/json'
Write-Host "sent $kind" -ForegroundColor Green # done
}
05CodeEditor
CodeEditor
The full editor the app uses for widgets and webhooks: highlighting shared with CodeBlock, folding, brackets, multiple cursors, find and replace, checks as you type, and hooks for product smarts.
--cs-syntax-*
Code editor. Tab indents; press Escape, then Tab, to move focus out.
Code editor. Tab indents; press Escape, then Tab, to move focus out.
JSON with {placeholders}; they're filled in when the webhook fires.
Code editor. Tab indents; press Escape, then Tab, to move focus out.
Code editor. Tab indents; press Escape, then Tab, to move focus out.
Code editor. Tab indents; press Escape, then Tab, to move focus out.Shift+Alt+F formats.
- Tab
- Indent (Shift+Tab outdents)
- Esc then Tab
- Leave the editor; announced and shown in the status bar
- Ctrl+F
- Find and replace
- Ctrl+/
- Toggle comment
- Alt+click, Ctrl+D
- Add a cursor; select the next match
- Ctrl+Space
- Show completions
- Ctrl+Shift+M
- Problems panel
- Shift+Alt+F
- Format (when a format hook is set)
06CopyButton
CopyButton
Copies, then says so twice: the icon pops to a check, and a polite live region announces it.
07JsonTree
JsonTree
A document's shape as an outline: every key with its type and a sample value; pick a value to map it to a variable. Branches fold, lists offer “each item” and “first item”, and values already in use show what they feed.
- Nothing in it.