Create Responsive Dashboards with Gridstack.js

Framework Agnostic

Gridstack.js is a modern pure Typescript library, with no external dependencies, that can work with any framework. It comes bundled with an Angular wrapper, and include many React|Vue examples (wrapper coming soon) as well as others.

Advanced features

Gridstack.js is a modern Typescript library designed to help developers create beautiful draggable, resizable, responsive layouts with just a few lines of code.

Full Mobile Support

Craft responsive, mobile-friendly applications with ease.

Draggable & Resizable Elements

Intuitive interfaces with interactive components.

Effortless Drag-and-Drop

Manage content dynamically from a sidebar for insertions and deletions.

Responsive, Column-Based Layouts

Design adaptable and visually appealing web layouts.

Save and Restore Feature

Easily preserve and revert to previous layouts.

Inter-grid Interactivity

Drag items across multiple grids for sophisticated layout management.

Nested Grids

Create and manipulate nested grids dynamically to any depth.

Extensive Framework Support

Native Angular support, along with external bindings for Vue, React, Ember, Knockout.js, and more.

Demonstration

Basic demo

Simple to use, configure, and customize. Drag and drop the items below to try !

Code

Getting started

Create your first interactive grid by copy-pasting the HTML+JS, as seen below...

npm install gridstack

Then, in your HTML file, include the following code...

<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<style type="text/css">
  .grid-stack { background: #FAFAD2; }
  .grid-stack-item-content { background-color: #18BC9C; }
</style>

<div class="grid-stack"></div>

<script type="text/javascript">
  var items = [
    {content: 'my first widget'}, // will default to location (0,0) and 1x1
    {w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
  ];
  var grid = GridStack.init();
  grid.load(items);
</script>

...and that's it! Drag, drop, and resize to your heart's content. Looking for more complex examples? Check out the advanced example below, the links in the nav bar, or our docs in GitHub

Demonstration

Advanced demo

A full control example with a trash can to remove widgets and a drag in widget.

More complex examples are available to demonstrate the full power of gridstack.js.
Drag and drop the items below to try!

Drag me into the dashboard!

Drop here to remove widget!

Articles

Why use gridstack.js ?

Find out why developers everywhere are choosing gridstack.js for their projects.

Check the package statistics on npmjs.org gridstack package and see the evolution of it.
Check the gridstack rank on the 6 Best jQuery Layout Plugins 2020 article on formget.

Companies

Used by

Discover the companies and projects that trust gridstack.js for their applications.

...and many, many others.

Does your company use gridstack.js ?

We'd love to add your logo! Come join our Slack community and let us know.