Skip to content
CroStreamUI kit

Editor

The parts of a visual editor: pane layout, toolbars, zoom, a pan-and-zoom canvas, transform handles, save status, undo, shortcuts and version history.

01ScaledPreview

ScaledPreview

Something shown at its real size, then scaled to fit: an overlay in a card, a widget in an editor, a preset in a menu. Laid out at 1920 × 1080 and transformed, so it looks exactly as it will in OBS, only smaller. CSS does the maths before the page is interactive, so nothing jumps.

In an editor pane Checkerboard for transparency and a dashed edge that stays 1px at any scale.

100%

As a card thumbnail, lazily Mounted only when it scrolls near the viewport.
Main scene 1
Main scene 2
Main scene 3

100%

02SaveStatus

SaveStatus

Where an editor's work stands, with an icon and words. Typing is silent; a failure, a conflict and the recovery from either are announced, with the way out right there.

Every state Retry on a failed save, Reload when someone changed it elsewhere.
Saved Unsaved changes Saving… Couldn’t save Changed elsewhere Saved 2 minutes ago Compact: Unsaved changes
Live autosave Type to dirty it; it saves after a pause. Turn on failures to see Retry.
Saved

03Hotkeys

Hotkeys

One map of shortcuts: Mod is ⌘ on a Mac and Ctrl elsewhere. They step aside while you type in a field, when a control already used the key, and when a dialog has the keyboard. The same map prints the help sheet.

Scoped to the stage Focus the stage, then use the arrows (Shift for 10), Ctrl/⌘ + = / − / 0, and Delete. Typing in the field below doesn't trigger them.

Click the stage, then press keys.

Help sheet Built from the same map with describeHotkeys(); keys resolved for this platform.

Move

Nudge left
←
Nudge right
→
Nudge up
↑
Nudge down
↓
Nudge 10 right
Shift →

View

Actual size
Ctrl 0
Zoom in
Ctrl =
Zoom out
Ctrl -

Edit

Reset
Delete

04History

History

Undo and redo by snapshots. Typing in one field merges into one step per burst; a drag is one step however long it lasts; an Escape mid-drag puts things back.

An editable alert Type in the title, drag the size, pick a colour, then undo (Ctrl/⌘+Z) and redo (Ctrl/⌘+Shift+Z).
0 back · 0 forward
The result What the history restores.
Raid alert
  1. No steps yet.

05EditorLayout

EditorLayout

Tools across the top, panes on either side of a centre, a status line below. Drag a splitter, or focus it and use the arrow keys (Shift for bigger steps), Home and End for the limits, Enter to fold the pane away; double-click puts the width back.

Three panes Widths and folded panes are remembered under persistKey. Below 60rem of its own width the panes stack under the centre.

Preview

1920 × 1080

Files 220px · Properties 280px

Stacked In a narrow container the same layout stacks: centre first, then each pane; splitters go away.

Stage

06Toolbar

Toolbar

A row of tools with a single tab stop: arrow keys move between them, Home and End jump to the ends, Tab leaves. Each tool's tooltip names it and shows its shortcut as keycaps, so nothing hides in a title attribute.

Editor toolbar Toggles are pressed buttons. Hover or focus a tool for its name and shortcut.
Narrow Under 46rem of its own width the labels fold away; each tool keeps its name for screen readers and in its tooltip.

07ZoomControl

ZoomControl

Minus, the current level, plus. The level opens Fit and a few presets. Pass a Viewport and it zooms the canvas around the window centre; or bind a plain value.

Bound to a value Steps follow the zoom ladder (25, 33, 50, 67, 75, 100, 125%…); the ends disable at the limits.
zoom = 1

08CanvasViewport

CanvasViewport

A pan-and-zoom surface. The wheel pans, Ctrl or ⌘ with the wheel (or a pinch) zooms at the pointer, Space-drag and middle-drag pan. Focused, it takes + and −, 0 to fit, 1 for actual size and the arrow keys. Selection handles sit in a screen-space layer on top, so they keep their size at any zoom.

A 1920 × 1080 overlay The checkerboard is transparency, drawn in screen pixels so it doesn't swim when you zoom.
Space drag to pan · Ctrl + wheel to zoom

Plus and minus zoom, 0 fits, 1 shows actual size, arrow keys pan. Hold Space and drag to pan.

09TransformBox

TransformBox

The selection frame: drag to move, eight handles to resize, the knob on top to rotate. Shift keeps the aspect (and locks a move to one axis, snaps rotation to 15°), Alt resizes from the centre, Ctrl or ⌘ skips snapping, Esc cancels. Focused, the arrow keys move it (Shift by 10), Alt with the arrows resizes, [ and ] rotate, and each change is announced.

Move, resize, rotate A drag is one undo step however long it lasts. Keyboard nudges in a row merge into one step.
Arrow keys move, with Shift by 10. Alt and arrow keys resize. Square brackets rotate.

Plus and minus zoom, 0 fits, 1 shows actual size, arrow keys pan. Hold Space and drag to pan.

  1. Drag the raid alert, or Tab to its frame and use the arrow keys.

10UnsavedChangesGuard

UnsavedChangesGuard

Asks before unsaved work is thrown away: closing the tab (the browser's own prompt), a route change your router reports, or closing the editor. Focus starts on Keep editing, so a stray Enter is safe.

Edit, then try to leave With no changes nothing is asked.
Saved

11VersionHistory

VersionHistory

Saved versions, newest first. Restore asks inline (it's reversible, so no modal), warns when there are unsaved changes, and restoring saves that version again as the newest.

A widget's versions Times are relative; hover one for the exact date.
  1. v7 Bigger confetti Haliebug13 Current
  2. v6 Raid sound swapped Haliebug13
  3. v5 New layout
  4. v4 First draft

12SplitButton

SplitButton

One main action and a chevron for its alternatives. Two real buttons side by side, each its own tab stop, so neither hides inside the other.

Preview an alert The menu picks which alert Play uses.

13An overlay editor

An overlay editor

The parts together: a toolbar with undo, snapping and zoom; layers on the left (rename with F2, reorder with Alt and the arrows); the canvas in the middle; the inspector on the right with scrubbing position and size, an aspect lock and a rotation dial. Every change is one undo step and autosaves.

Raid overlay Ctrl/⌘+Z and Ctrl/⌘+Shift+Z undo and redo, Ctrl/⌘+D duplicates, Delete removes the focused selection.
Arrow keys move, with Shift by 10. Alt and arrow keys resize. Square brackets rotate.

Plus and minus zoom, 0 fits, 1 shows actual size, arrow keys pan. Hold Space and drag to pan.

100% · 1920 × 1080

4 layers · Raid alert: 660, 120 · 600 × 220

14StepList

StepList

An ordered list of steps: numbered rail, drag handle, title, fold, menu (move, duplicate, disable, delete) and problems on the card. Reorder by pointer, by keyboard on the handle (Space picks up, arrows move, Space drops, Escape puts back) or from the menu; every move is announced.

Editable Try the handle with the keyboard, the ⋯ menu, folding a step, and the disabled and problem states.
  1. Send a chat message
  2. Play a sound
    Fix
    • Pick a sound to play.
  3. Wait Off
    Check Disabled
    • A wait this short is barely noticeable.
  4. Flash the screen
    pink
Two lists Lists that share a group accept each other's steps by drag. Each needs its own listId (it is given to ontransfer); without one the list derives a unique id and warns in dev.
  1. Send a chat message
    Welcome!
  2. Play a sound
    chime
  1. Flash the screen
    pink
Empty The empty snippet explains what goes here.

No steps yet. Add the first one below.

Read-only No handle, no menu: the list as a reference.
  1. Set a variable
    mood = cozy
  2. Change counter
    headpats + 1