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.

Child components: <hy-splitter-handle>, <hy-splitter-panel> — used only inside this one.

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, which may start collapsed (collapsed on the panel)
• A handle next to a collapsed panel shows a tab with a chevron; a click on it (a press that does not move) or Enter opens the panel again
• Full keyboard navigation (WAI-ARIA Window Splitter pattern)
• SSR compatible

When to use

• A workspace whose panels people resize to suit the task: an editor and its preview, a list and its detail.

Do

• Give each panel a min-size that keeps its content usable.

When not to use

• Proportions that never change, or a reading page: plain grid or flex in your own class, no splitter.
• A region people only show and hide: hy-drawer.

Accessibility: your part

• Give every hy-splitter-handle a label that names the boundary ("Resize navigation panel"). The default is "Resize".
• Set each panel's min-size so its content still works at that size, and keep a visible way back to a panel that can collapse.

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.