Layer 1: Attribute Init

data-splitter — injected divider with keyboard support

Main Content

Focus the divider, then use arrow keys.

Layer 1: Vertical

data-splitter="vertical"

Top Panel

Bottom Panel

Layer 2: Web Component

<splitter-wc> — full features

Main Content

Full component with all features.

Layer 2: Collapsible

Double-click divider to collapse

Content

The aside will collapse and expand on double-click.

Layer 2: Vertical

<splitter-wc data-direction="vertical">

Top Panel

Bottom Panel

Layer 2: Persistence

data-persist="demo" — resize, then reload

Main Content

Position is saved to localStorage.