Split Pane

Resizable side-by-side or top-bottom panel layout for Ink 5.

Install

npm install @matthesketh/ink-split-pane

Usage

import { SplitPane } from '@matthesketh/ink-split-pane';
import { Text } from 'ink';

// Horizontal (side-by-side)
<SplitPane sizes={[60, 40]}>
  <Text>Left panel</Text>
  <Text>Right panel</Text>
</SplitPane>

// Vertical (top-bottom)
<SplitPane direction="vertical" sizes={[70, 30]}>
  <Text>Top panel</Text>
  <Text>Bottom panel</Text>
</SplitPane>

Props

Prop	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	Layout direction. Horizontal = side by side, vertical = stacked.
sizes	[number, number]	[50, 50]	Percentage split between the two panes.
minSize	number	5	Minimum columns (horizontal) or rows (vertical) per pane.
showDivider	boolean	true	Whether to render the divider between panes.
dividerChar	string	'\u2502' / '\u2500'	Character used to draw the divider.
dividerColor	string	'gray'	Ink color for the divider.
children	[ReactNode, ReactNode]	required	Exactly two children.

License

MIT