This directory contains working examples of GridStack.js - a modern TypeScript library for creating responsive, drag-and-drop dashboard layouts.

A simple, beginner-friendly example demonstrating:

• ✅ Drag and drop widgets
• ✅ Resize widgets
• ✅ Add new widgets dynamically
• ✅ Save/Load layouts to localStorage
• ✅ Clear grid
• ✅ Toggle float mode

Just open this file in your browser to see it in action!

A more advanced example featuring:

• ✅ Drag widgets from a sidebar library
• ✅ Multiple widget types (Stats, Charts, Tables, Text)
• ✅ Delete widgets by dragging to trash zone
• ✅ Close button on each widget
• ✅ Export layout as JSON
• ✅ Professional styling and animations

The complete cloned repository from GitHub containing:

• Source code
• 40+ demo examples
• TypeScript definitions
• Angular, React, Vue wrappers

Simply double-click either HTML file to open it in your browser. No build process needed!

# macOS
open gridstack-example.html
open gridstack-advanced.html
# Linux
xdg-open gridstack-example.html
# Windows
start gridstack-example.html

For better testing, use a local server:

# Using Python 3
python3 -m http.server 8000
# Using Node.js (npx)
npx serve
# Then open: http://localhost:8000

• Drag & Drop: Move widgets around the grid
• Resize: Adjust widget dimensions
• Responsive: Auto-adjust on mobile devices
• Persistence: Save/load layouts
• No Dependencies: Pure TypeScript/JavaScript
• Framework Support: Works with React, Angular, Vue, etc.

1. Drag any widget to move it
2. Resize by dragging the edges
3. Click "Add Widget" to create new widgets
4. Click "Save Layout" to store in browser
5. Click "Load Layout" to restore saved layout
6. Toggle float mode to change stacking behavior

1. Drag widgets from the left sidebar to the grid
2. Remove widgets by clicking the ×ばつ button
3. Delete by dragging widgets to the trash zone
4. Export layout as a JSON file
5. Different widget types: Stats, Charts, Tables, Text

// Initialize grid
const grid = GridStack.init({
 float: true,
 cellHeight: 80,
 minRow: 3,
 margin: 10
});
// Add widget
grid.addWidget({
 w: 2, // width (in columns)
 h: 2, // height (in rows)
 x: 0, // x position
 y: 0, // y position
 content: '...' // HTML content
});
// Save layout
const layout = grid.save();
localStorage.setItem('layout', JSON.stringify(layout));
// Load layout
const savedLayout = JSON.parse(localStorage.getItem('layout'));
grid.load(savedLayout);
// Remove widget
grid.removeWidget(element);

• Official Website: https://gridstackjs.com
• GitHub: https://github.com/gridstack/gridstack.js
• Documentation: https://github.com/gridstack/gridstack.js/tree/master/doc
• API Reference: https://gridstackjs.com/api/
• CDN: https://cdn.jsdelivr.net/npm/gridstack@12.4.2/

• GridStack.js Version: 12.4.2 (latest as of February 2026)
• License: MIT
• Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)

Explore the official demos in gridstack.js/demo/ directory:

• nested.html - Nested grids
• responsive.html - Responsive layouts
• serialization.html - Save/load complex layouts
• react.html, vue3js.html, knockout.html - Framework integrations

Both examples use CDN links for easy setup. For production:

npm install gridstack

Then import in your project:

import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';

GridStack v2.0+ removed jQuery dependency:

• ✅ Pure TypeScript/JavaScript
• ✅ Smaller bundle size
• ✅ Better performance
• ✅ Native ES6 modules
• ✅ TypeScript support out of the box

Enjoy building with GridStack.js! 🎉