HySplitter

Usage examples on this page are written for Lit / plain HTML (<hy-splitter>). The same component ships as HySplitter in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A container that manages resizable panels separated by draggable handles. Uses CSS Grid internally for layout. Coordinates resize logic between child hy-splitter-panel and hy-splitter-handle elements.

Key Features

• Horizontal and vertical orientations
• Multiple panels (2+) in a single group
• Min/max size constraints on panels
• Collapsible panels
• Full keyboard navigation (WAI-ARIA Window Splitter pattern)
• SSR compatible

Examples

Basic sidebar layout

<hy-splitter>
  <hy-splitter-panel default-size="25" min-size="15" collapsible>
    <nav>Sidebar</nav>
  </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="75">
    <main>Content</main>
  </hy-splitter-panel>
</hy-splitter>

Vertical split

<hy-splitter orientation="vertical">
  <hy-splitter-panel default-size="70"> Editor </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="30" min-size="10" collapsible> Terminal </hy-splitter-panel>
</hy-splitter>

Three panels

<hy-splitter>
  <hy-splitter-panel default-size="20" min-size="10" collapsible> File tree </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="60"> Editor </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="20" min-size="10" collapsible> Properties </hy-splitter-panel>
</hy-splitter>

Programmatic control

const splitter = document.querySelector('hy-splitter');
splitter.getSizes(); // [25, 75]
splitter.setSizes([30, 70]);
splitter.resetSizes();

API

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the splitter
disabled	disabled	boolean	false	Whether all resizing is disabled

Events

Event	Detail	Description
resize	—	Fires continuously during resize. Detail: { sizes: number[] }
resize-end	—	Fires when resize completes. Detail: { sizes: number[] }

Slots

Slot	Description
default	Splitter panels and handles

CSS Parts

Part	Description
base	The splitter's layout container

Methods

getSizes()

Returns the current sizes of all panels as percentages.

setSizes()

Sets all panel sizes at once. Array length must match panel count.

resetSizes()

Resets panels to their initial default sizes.