Splitter

mp-splitter is a Lit web component that lays out its direct children as resizable panels. Set orientation to horizontal or vertical, and nest splitters to build dock-style layouts.

Basic usage

Yellow background
Keyboard shortcuts
  • Tab — focus the next divider
  • ← / → — resize a horizontal splitter by 10% (Shift: 1%)
  • ↑ / ↓ — resize a vertical splitter by 10% (Shift: 1%)
  • Home — shrink the leading panel to its minimum size
  • End — grow the leading panel to its maximum size
Panel 1
Panel 2a
Panel 2b
Panel 2c