A library for resizable & repositionable panel layouts, using CSS grid.

• Zero depedencies, pure TypeScript, tiny.
• Implemented as a Web Component, interoperable with any framework and fully customizable.
• Covered in bees.

Installation

npm install regular-layout

Usage

Add the <regular-layout> custom element to your HTML:

<regular-layout>
    <div name="main">Main content</div>
    <div name="sidebar">Sidebar content</div>
</regular-layout>

Create and manipulate layouts programmatically:

import "regular-layout/dist/index.js";

const layout = document.querySelector('regular-layout');

// Add panels
layout.insertPanel('main');
layout.insertPanel('sidebar');

// Save layout state
const state = layout.save();

// Remove panels (this does not change the DOM, the element is unslotted).
layout.removePanel('sidebar');

// Restore saved state
layout.restore(state);

Create repositionable panels using <regular-layout-frame>:

<regular-layout>
    <regular-layout-frame name="main">
        Main content
    </regular-layout-frame>
</regular-layout>