SplitPane
Resizable two-pane layout with a draggable divider. The divider is the WAI-ARIA 'window splitter' — focusable, keyboard-resizable, and optionally collapsible. Panes clip their own overflow and scroll independently. Reach for it when both regions are primary content the user should be able to rebalance.
01 Examples
IDE layout — file tree + editor
// main.ts
import App from './App.svelte';
import './styles.css';
export default new App(options);
Vertical split — output over log
Preview
Rendered output goes here. Resize the divider below to give the log more room when you need to read a long stack trace.
✓ build succeeded in 412ms
→ 24 modules transformed
→ dist/index.js 12.4 kB
! 1 unused export in utils.ts
→ watching for changes…
Collapsible sidebar with onCollapsedChange
Main content. Collapse the sidebar to reclaim its width; re-expand it by pressing Enter on the divider — the previous ratio is restored.
Chat beside a live artifact
Artifact preview
Starter
per month
Pro
per month
Team
per month
For a permanent navigation rail rather than two rebalanceable content regions, reach for SidebarLayout or Sidebar instead — SplitPane is for when both panes are primary content.
02 Accessibility
The "window splitter" pattern
The divider follows the WAI-ARIA window splitter pattern. It renders as role="separator" made focusable (tabindex="0"), carries aria-controls pointing at the first pane, and exposes its position as aria-valuenow / aria-valuemin / aria-valuemax (percentages, clamped into the configured min/max).
Its aria-orientation is the axis of movement — vertical for a horizontal
layout, horizontal for a vertical one. Give it a
meaningful name via handleLabel (default "Resize
panes"). When disabled, the divider drops out of
the tab order and reports aria-disabled.
Keyboard
Tab moves focus to the divider. The arrow keys follow the layout axis:
- ← / → (horizontal) or ↑ / ↓ (vertical) resize by ±2%.
- Hold Shift with an arrow for a ±10% step.
- Home / End jump to the
min/maxlimit. - Enter toggles collapse when
collapsibleis set; otherwise it resets todefaultRatio— the keyboard equivalent of the double-click reset.
Pointer & touch target
Drag uses setPointerCapture, so a resize keeps
tracking even if the pointer leaves the divider — no stray window listeners to leak. The
divider is a comfortable, full-length hit area along the split axis rather than a
hairline, keeping it reachable for touch and coarse pointers. The data-dragging and data-collapsed attributes on the root expose the
live state for CSS-only styling.
03 API Reference
No matching properties |