gridstack/gridstack.js

★ 8,920TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((gridstack.js))
    Core feature
      Drag and drop
      Resize panels
      Grid snapping
    Framework support
      Angular built-in
      React demos
      Vue demos
    Data
      JSON serialization
      Layout save restore
    Input
      Mouse support
      Touch mobile

mindmap root((gridstack.js)) Core feature Drag and drop Resize panels Grid snapping Framework support Angular built-in React demos Vue demos Data JSON serialization Layout save restore Input Mouse support Touch mobile

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build an analytics dashboard where users can drag and resize data panels to their preferred layout.

USE CASE 2

Save a user's custom grid arrangement to a database as JSON and reload it on their next visit.

USE CASE 3

Add a configurable widget grid to a React or Vue app using the built-in framework wrappers.

USE CASE 4

Create a touch-friendly drag-and-drop grid layout that works on mobile browsers.

Tech stack

TypeScriptJavaScriptAngularReactVuenpm

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

Gridstack.js is a JavaScript library for building drag-and-drop dashboard layouts in the browser. If you have seen analytics dashboards where you can move and resize panels around the screen, this library handles the mechanics of that: placing items on a grid, snapping them into position, resizing them, and saving the layout. The library works without requiring any other JavaScript libraries as of version 1. Earlier versions needed jQuery, but that dependency was removed. It is written in TypeScript and ships as a standard npm package. Developers include one CSS file and one JavaScript file, call a single initialization function, and then add items to the grid either through code or by marking up HTML elements with special attributes. Gridstack.js is designed to work with the popular frontend frameworks people use today. It ships with a built-in Angular wrapper, and the repository includes demos showing it working with React and Vue as well. Community wrappers exist for Ember, Knockout, and Rails. The library supports touch input for mobile browsers, which the README notes was added in version 6 using native browser events rather than a plugin. The library has been through many major versions, and the README includes a migration guide for each one, noting which versions dropped or restored older browser support and what changed in the API. As of version 12, very old browsers (those needing CSS variable polyfills) are no longer supported. Layouts can be serialized to and restored from plain JSON data, which means a developer can save a user's custom dashboard arrangement to a database and reload it on the next visit. The number of columns in the grid is configurable, and the CSS handles proportional sizing automatically. The project is maintained by an individual contributor and accepts donations. A live demo and full API documentation are available at gridstackjs.com.

Copy-paste prompts

Prompt 1

Show me how to set up Gridstack.js in a plain HTML page with three draggable and resizable panels.

Prompt 2

I am using Gridstack.js with React. Show me how to initialize the grid and serialize the current layout to JSON so I can save it to a database.

Prompt 3

My Gridstack.js dashboard needs to support dragging panels on mobile. How do I enable touch support?

Prompt 4

Show me how to restore a saved Gridstack.js layout from a JSON object when my page loads.

Prompt 5

How do I configure the number of columns in a Gridstack.js grid and set minimum and maximum sizes for individual items?

Open on GitHub → Explain another repo

← gridstack on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.