Simple two-pane horizontal layout with draggable divider. Demonstrates core resizing functionality with visual feedback showing percentage and pixel widths.
This is the left pane content. Drag the divider to resize!
This is the right pane content.
Two-pane horizontal layout with minSize of 200 and initialSizes of [25,75] and Sidebar components on the left pane.
This is the right pane content. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit nulla ipsum inventore nihil labore in velit dolores consequatur, voluptas praesentium perferendis nobis sequi culpa laboriosam natus! Dignissimos exercitationem vitae necessitatibus.
Vertical layout with custom initial sizes and keyboard controls. Use arrow keys to adjust, Enter/Space to reset to equal distribution.
Tab to the divider and use arrow keys (↑/↓) for keyboard control.
Press Enter or Space on divider to reset to equal sizes.
Multiple panes in single container with individual dividers. Each pane can be resized independently while maintaining minimum size constraints.
First pane
Middle pane
Last pane
Automatically switches between horizontal and vertical layouts based on viewport width. Features callback tracking for size change monitoring.
Resize your browser window to see the layout change from horizontal to vertical at 768px.
The onResize callback tracks size changes shown above.
Complex layout combining horizontal and vertical splits. Creates sidebar with vertically-split main content area for advanced dashboard layouts.
Navigation or tools
Main content area
Footer or additional info
Demonstrates minimum size enforcement. Panes cannot be resized below 300px, preventing content from becoming unusable during aggressive resizing.
This pane has:
This pane takes up the remaining space.
Production-ready IDE-style interface with file explorer, code editor, and terminal. Shows practical implementation with nested panes and dark theme.
function hello() {
console.log('Hello World');
return 'Welcome to SplitPane!';
}
hello();$ npm run dev
✓ Server running on http://localhost:5173
Press h to show help