10 Best Splitter JavaScript Libraries To Create Split Views

by jQueryScript,

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 10 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 04 2024

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.

Modern Split View In JavaScript – Split.js

[Demo] [Download]


2. 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.

Resizable Split Layout In Pure JavaScript – Resizable.js

[Demo] [Download]


3. 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.

Basic Split Layout In Vanilla JavaScript – SplitterBar

[Demo] [Download]


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.

Enhanced Draggable Splitter jQuery Plugin - enhsplitter.js

[Demo] [Download]


5. Easy Layout Splitter/Resizer For Developer - pane-slider

An easy-to-use and mobile-friendly split slider plugin to create a split layout that enables the developers to resize two split panes via mouse drag or touch swipe.

Easy Layout Splitter/Resizer For Developer - pane-slider

[Demo] [Download]


6. 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.

Easy Split Layout Plugin For jQuery - Splitter

[Demo] [Download]


7. Vertical & Horizontal Split View With jQuery - jsRapSpliter

A lightweight jQuery splitter plugin that allows webpage or specific container splitting in vertical and horizontal orientations.

Vertical & Horizontal Split View With jQuery - jsRapSpliter

[Demo] [Download]


8. Create Resizable Split Views Using jQuery - split.js

A resizable, responsive, horizontal/vertical split layout jQuery plugin which allows the user to adjust the height & width (%) of panes by dragging the splitter.

Create Resizable Split Views Using jQuery - split.js

[Demo] [Download]


9. Resizable Splitting Panes In jQuery - jsplitter

A JavaScript (jQuery) based splitter plugin that divides a container into two parts and allows the user to resize the left/right panes with mouse drag.

Resizable Splitting Panes In jQuery - jsplitter

[Demo] [Download]


10. 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.

Draggable Panes Splitter Plugin - jQuery Granit

[Demo] [Download]


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.

See Also: