Resizable Split Layout In Pure JavaScript – Resizable.js

Category: Javascript , Layout | May 9, 2021
Author: Tom-Rawlings
Views Total: 421 views
Official Page: Go to website
Last Update: May 9, 2021
License: MIT


Resizable Split Layout In Pure JavaScript – Resizable.js


Resizable.js is 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.

How to use it:

1. To get started, include the Resizable.js library on the webpage.

<link rel="stylesheet" href="resizable-style.css" />
<script src="resizable.js"></script>

2. Split your layout into several ‘Windows’ as follows:

<div id="main">
  <div class="resizable-left" id="win1">
    <div class="resizable-top" id="win3">
      <div class="resizable-left" id="win5"></div>
      <div class="resizable-right" id="win6"></div>
    <div class="resizable-bottom" id="win4"></div>
  <div class="resizable-right" id="win2">
    <div class="resizable-top" win="win7">
      <div class="resizable-left" id="win9"></div>
      <div class="resizable-right" id="win10">
        <div class="resizable-top" id="win11">
          <div class="resizable-left" id="win13"></div>
          <div class="resizable-right" id="win14"></div>
        <div class="resizable-bottom" id="win12"></div>
    <div class="resizable-bottom" id="win8"></div>

3. Initialize the library on the parent and done.


4. Make the split layout fully responsive.

window.addEventListener("resize", () => {
  Resizable.activeContentWindows[0].changeSize(window.innerWidth, window.innerHeight);

5. Set the size (in percent) for each Window as follows:

var sizes = {
    "win1" : 0.5,
    "win3" : 0.75,
    "win4" : 0.5,
    "win6" : 0.4,
    "win11" : 0.8,
    "win9" : 0.5,
    "win13" : 0.4 
Resizable.initialise("main", size);



  • Add function to resize the parent container


  • Add events for resizing starting and ending


  • Update to allow resizerThickness to be specified in initialisation call

You Might Be Interested In:

Leave a Reply