Split.js Quickstart

{"library":"split.js","title":"Split.js","type":"library","description":"Split.js is a lightweight, 2kb gzipped utility for creating resizeable split views in web applications. It is currently stable at version 1.6.5 and maintains a consistent release cadence with minor bug fixes and feature enhancements, as seen in recent 1.5.x releases. Key differentiators include its zero-dependency footprint, small size, and high performance due to its pure CSS resizing approach without attaching window event listeners. It is unopinionated, working well with various layout models like `float` and `flex`, and boasts broad browser compatibility, supporting IE9 and early versions of modern browsers. It provides a simple API to create and manage split panels, allowing developers to control initial sizes, minimum/maximum sizes, gutter behavior, and drag intervals.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install split.js"],"cli":null},"imports":["import Split from 'split.js'","import type { SplitInstance, Options } from 'split.js'",""],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://split.js.org/","github":"https://github.com/nathancahill/split","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/split.js","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"\n\n\n\n \n \n Split.js Quickstart\n \n\n\n

\n

Panel A

\n

Panel B

\n

Panel C

\n

\n\n \n\n","lang":"typescript","description":"This quickstart demonstrates how to create a basic horizontal split view with three resizeable panels using Split.js, including initial sizing, minimum panel sizes, custom gutter styling, and event handlers for drag actions. It showcases typical setup for a modern web application using ES Modules.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}