Window Splitter

Getting started

Focusable role="separator" that resizes a primary pane. HTML is the source of truth for ARIA attributes; the library positions the separator and updates the primary pane (or emits events only).

Pattern reference: W3C Window Splitter Pattern. 

import WindowSplitter from '@19h47/windowsplitter';

const splitter = new WindowSplitter(document.querySelector('[role="separator"]'));

splitter.init();

Vertical panes (mode: 'resize')

Drag the separator or use arrow keys. Enter collapses / restores the primary pane.

Table of Contents

Primary pane - sized by the splitter value.

Content

Secondary pane fills the remaining space.

Horizontal panes (aria-orientation="horizontal")

Same controller: Up / Down arrows move the bar, Enter collapses the primary (top) pane.

Notes

Primary pane - height follows the splitter value.

Slide

Secondary pane fills the remaining space below.

Comparison image (mode: 'clip')

Overlay two layers and clip the primary (before) pane - same idea as a before/after image slider.

Before

Fixed splitter

Arrow keys are ignored. Enter toggles between collapsed and the previous position.

Sidebar

Press Enter on the separator to collapse.

Main

Methods & events

API
Playground

Keyboard support

Key Function
Left / Right Move a vertical splitter
Up / Down Move a horizontal splitter
Enter Collapse or restore the primary pane
Home / End Jump to min / max
Page Up / Page Down Move by page