Split.js is a 2kb unopinionated utility for resizeable split views (also called panes or frames). It handles weird edge cases so you don't have to. Split.js is CSS-driven, only using JS to recalculate CSS styles on drag. Split.js does not attach any window event listeners, instead relying on CSS for the layout when the window size changes. This keeps the JS overhead extremely low.

Get Started

Create a split view with an array of selectors or HTML elements. By default, Split.js modifies the CSS width property and nothing else. You are responsible for adding other CSS properties to create a layout. A simple way to place elements side-by-side is with a float rule. Other layout options besides width-float are possible (and encouraged), see the Advanced section below.

JS
Split(['#one', '#two']);
HTML
<div>
<div class="split" id="one"></div>
<div class="split" id="two"></div>
</div>
CSS
.split, .gutter.gutter-horizontal {
float: left;
}
.gutter.gutter-horizontal {
cursor: ew-resize;
}

Advanced

By overriding the default elementStyle and gutterStyle hooks, it's easy to change the CSS rules that Split.js modifies to support flex, grid and other CSS layouts:

JS
Split(['#one', '#two'], {
elementStyle: (dimension, size, gutterSize) => ({
'flex-basis': `calc(${size}% - ${gutterSize}px)`,
}),
gutterStyle: (dimension, gutterSize) => ({
'flex-basis': `${gutterSize}px`,
}),
})
HTML
<div class="flex">
<div id="one"></div>
<div id="two"></div>
</div>
CSS
.flex {
display: flex;
flex-direction: row;
}
.gutter.gutter-horizontal {
cursor: ew-resize;
}

React

Split.js is also available as a React component: react-split. The component accepts the same options as the Split.js constructor:

JS
import Split from 'react-split'
ReactDOM.render(
<Split sizes={[25, 75]}>
<Component />
<Component />
</Split>
)


Docs & API

Docs are available in README.md on GitHub.

© 2018 Nathan Cahill. MIT license.