GridStack.js Examples

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

📦 Contents

1. gridstack-example.html - Basic Interactive Dashboard

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!

2. gridstack-advanced.html - Dashboard Builder with Sidebar

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

3. gridstack.js/ - Official Repository

The complete cloned repository from GitHub containing:

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

🚀 Quick Start

Option 1: Open HTML Files Directly

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

Option 2: Use a Local Server

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

📚 Key Features Demonstrated

GridStack.js v12.4.2 Features:

• 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.

🎮 How to Use

Basic Example:

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

Advanced Example:

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

📖 API Highlights

// 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);

🔗 Resources

• 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/

📝 Version Info

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

💡 Next Steps

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

🛠️ Customization

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';

⭐ Key Differences from jQuery Version

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! 🎉