7 Best Splitter JavaScript Libraries To Create Split Views
What Is Splitter?
Splitter (also known as split view) is a type of layout that splits your container into side-by-side panes with a divider.
Users can quickly adjust the size (width or height) of the panes by dragging the divider.
It is useful for developers to create a resizable & draggable split view in which they can test how their website works at different screen resolutions.
The Best JavaScript Splitter Library
In this post, we round-up the 7 best jQuery plugins and Vanilla JavaScript splitter plugins that make it easier to implement a draggable and resizable split view on the web app. Have fun.
Originally Published Nov 24 2020, updated Mar 17 2023
1. Modern Split View In JavaScript – Split.js
A lightweight vanilla JavaScript library used to create resizable split views that support CSS float, flexbox, and Grid layouts.
2. Draggable Panes Splitter Plugin - jQuery Granit
A fully configurable split layout plugin to split your webpage into several panes which are resizable via drag and drop.
3. Lightweight Customizable jQuery Split Layout Plugin - flexLayout
A lightweight and highly customizable jQuery plugin used for generating a horizontal or vertical split layout with any number of resizable content sections.
4. Enhanced Draggable Splitter jQuery Plugin - enhsplitter.js
A feature-rich jQuery plugin for creating draggable splitters (also known as split layout or split view) to separate content on your webpage.
5. Resizable Split Layout In Pure JavaScript – Resizable.js
A pure JavaScript library to create a resizable split layout where you can adjust the size of each ‘Window’ via drag and drop or touch events.
6. Basic Split Layout In Vanilla JavaScript – SplitterBar
A responsive split layout plugin in vanilla JavaScript that allows you to adjust the width of the split panels by dragging the splitter bar.
7. Easy Split Layout Plugin For jQuery - Splitter
Splitter is a simple, customizable jQuery split layout plugin that enables the users to quickly resize layout items by dragging the splitter bar.
More Resources:
Looking for more jQuery plugins or JavaScript libraries to implement Spilt View on your web app? See jQuery Splitter and JavaScript Splitter sections for more details.