Splitter

Resizable panes separated by keyboard-operable handles.

Import
import { Splitter } from '@texuli/primitives/splitter';
Pattern
Window splitter (WAI-ARIA APG)
Size budget
4.5 KiB gzip for @texuli/primitives/splitter
Reference
packages/primitives/docs/prim-splitter.md

Live demo

Loading the Splitter demo…

Anatomy

Splitter anatomy: each box holds the parts inside it.
  • Splitter.Root
    • Splitter.Pane
    • Splitter.Handle
    • Splitter.Pane

Behavior checks

tests/behavior/scenarios/splitter.spec.ts checks the Splitter scenario in the browser (8 checks) on Chromium, WebKit and the Pixel 7.

  • exposes a named, focusable separator with its value range
  • resizes with the keyboard: arrows, Home and End
  • Enter collapses the pane (its content goes inert) and restores it
  • mirrors the arrows in right to left
  • drags with a mouse
  • drags with touch
  • keeps the layout across a reload (persistence hook)
  • passes axe (${scheme})

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.5 KiB gzip for @texuli/primitives/splitter (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).