Layout elements that work with CSS flexbox.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css Amended the CSS slightly. Oct 12, 2018
es6 Cosmetic changes. Oct 15, 2018
lib Cosmetic changes. Oct 15, 2018
.gitignore A small correction to the readme file. Oct 14, 2018
license.txt Updated the license. Oct 29, 2017
package-lock.json Cosmetic changes. Oct 15, 2018
package.json Cosmetic changes. Oct 15, 2018

Easy Layout

Layout elements that work with CSS flexbox.

There are three elements, namely a horizontal and a vertical draggable splitter and a sizeable element that dragging the splitters will cause to be resized. All the elements are closely tied to CSS. For example, the sizeable element will check the values of its 'min-width', 'max-width', 'min-height' and 'max-height' CSS properties and stick to them. Layouts created with these elements can also be nested easily.

JSX support

There is now support for JSX in the form of Juxtapose. JSX brings with it several benefits. So although you will always be able to call constructors directly if you wish, creating Easy elements by way of JSX is highly recommended. The contents of this readme file will stay as a reference, however a much better place to start from now on is the online documentation for Juxtapose. The section dealing directly with this project is here:

From there you can easily navigate to get an overview of Juxtapose.

Related projects

  • Easy Elements that abstract away from the DOM.
  • Easy DragAndDrop Drag and drop elements including an explorer and a rubbish bin.
  • Easy RichTextarea A textarea element that handles and hands off events well.


You can install Easy-Layout with npm:

npm install easy-layout

You can also clone the repository with Git...

git clone

...and then install the necessary modules with npm from within the project's root directory:

npm install


Only building with Node.js (or equivalent) is supported, there is no support for the browser anymore. The usage is as follows:

const easylayout = require('lib/easy-layout'),
      { VerticalSplitter, SizeableElement } = easylayout;

const container =

        <div className="columns">
          <VerticalSplitter afterSizeableElement
                            onDrag={(height) => {
          <div className="column">


Note the mandatory column and columns classes.


There is a small amount of CSS needed to make the elements work. This can be found in the easy-layout.css file in the css directory.

Compiling from source

Automation is done with npm scripts, have a look at the package.json file. The pertinent commands are:

npm run build-debug
npm run watch-debug