split.js

utility layout

split.js is a lightweight, 2kb utility that enables resizable split views on web pages. It is unopinionated, offering flexibility with minimal imposition on the user's choices.

Latest Ver 1.6.5

Homepage

Github

6,204

The Art of Splitting, the Beginning of Creativity

Freely divide your screen with split.js and redesign the user experience.

split.js is a lightweight tool for effectively implementing split views in web interfaces.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.js

https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.min.js

https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.min.js.map

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div id="container" style="height: 100vh;"><div style="background: #f00;">First</div><div style="background: #0f0;">Second</div></div><script>Split(['#first', '#second'], { sizes: [50, 50], minSize: 100, gutterSize: 10, cursor: 'col-resize' });</script>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>

⚙️ JavaScript
Split(['#first', '#second'], { sizes: [50, 50], minSize: 100, gutterSize: 10, cursor: 'col-resize' });

⚡ Top Tools for Developers