IDE-style dockable workspace built on splitters and tab stacks. Panes can be dragged between stacks, torn off into floating windows, and the resulting arrangement is round-trippable as a JSON DockLayoutSnapshot for persistence.
Basic usage
Keyboard shortcuts
Tab / Shift+Tab — move focus through tabstrips, splitter dividers, intersection handles, and floating-pane close buttons
← / → / Home / End — navigate between tabs in the focused stack
On a focused splitter divider: ←/→ (or ↑/↓ for vertical splits) resize by 10% (Shift: 1%), Home/End to limits
On a focused intersection handle (the round glyph at split crossings): same arrow keys, but ←/→ drives the vertical divider and ↑/↓ drives the horizontal one. Home/End drive the vertical divider to its limits, and Shift is the 1% fine step here too.
On a floating pane's edge or corner handle: arrow keys resize along that handle's axis (10px per step, Shift for 1px).
Enter / Space on a tab — activate it
Floating pane close button (×) — also focusable; Enter / Space closes
M on a focused tab — arm pane move mode. Only the bare key arms it; Ctrl/Alt/⌘ + M is left to the browser or the app.
In move mode: T / R / B / L docks the pane to the top / right / bottom / left of the current stack · F tears it off into a floating window · Esc cancels
In move mode, to reach a stack other than the current one: →/↓ and ←/↑ cycle forward and backward through every drop target — the four sides of each other docked stack, then “float” — announcing “side of pane names, option N of M” and outlining the target. Enter commits the highlighted target; it lands exactly where the equivalent mouse drop would.
Move mode stays armed while focus moves around inside the dock and cancels once focus leaves it; the commit always applies to the pane that was focused when M was pressed. Letters typed into an input, textarea, select or contenteditable inside a pane stay text and commit nothing.
Panel 1
This panel demonstrates static content projected through a named slot.
Panel 2
Switch tabs to see how the dock manager preserves the layout.
Panel 3
Web component powered
Panel 4
Layouts can be saved as JSON using the capture button.
Panel 5
Use this panel to imagine additional tools or editors.
Floating tools
Floating panes can host inspectors, consoles, or other auxiliary UI.