$ show gridstack/gridstack.js
GridStack.js is a production-grade TypeScript library for building responsive, drag-and-drop dashboard layouts. The core GridStack class manages widget lifecycle, DOM placement, responsive column switching, nested grids, serialization, and eventing, while GridStackEngine performs collision and positioning math without touching the DOM. The library ships its own drag-and-drop subsystem rather than depending on HTML5 drag-and-drop or jQuery, and it has zero runtime dependencies. Architecturally, the repository is a multi-package collection: a framework-agnostic core, a SCSS styling layer, and official Angular, React, and Vue wrappers. The wrappers integrate through callback hooks such as addRemoveCB, saveCB, and updateCB, plus DOM-stamped host APIs, allowing each framework to dynamically create and destroy widgets while keeping item content mounted during cross-grid drags. Demo applications under demo/, angular/projects/demo, react/src, and vue/src exercise the public API and serve as integration references. The project is actively maintained with a comprehensive Vitest and Playwright test suite, issue-numbered regression tests, and frequent releases. Its main technical debt is the large monolithic gridstack.ts (roughly 3100 lines) and the need to keep three framework wrappers synchronized with core API changes. The Angular wrapper is intentionally pinned to an older Angular major and some legacy build artifacts remain, but the core engine/UI separation, clean utility layer, and callback-based framework integration make many parts genuinely reusable.
The LLM identified 5 files worth highlighting for reuse:
DOM-free layout engine that handles node positioning, collision detection, packing, column-change reflow, and maxRow validation through a clone-and-simulate approach. It is unit-testable without a browser and could be extracted for any 2D grid placement problem.
Static utility class with pure helpers for geometry intersection, deep cloning, serialization cleanup, value parsing, event simulation, and scroll-container navigation. These helpers are mostly framework-agnostic and reusable across projects.
Abstract base implementation shared by draggable, droppable, and resizable classes. It centralizes event subscription, enable/disable lifecycle control, and cleanup, demonstrating a clean template pattern for browser interaction subsystems.
Angular wrapper that bridges core GridStack callbacks into Angular change detection, registers components by selector, exposes all core events as EventEmitter outputs, and supports custom widget serialization via BaseWidget. This is a robust host-API integration pattern for wrapping imperative DOM libraries in Angular.
React context and portal-based wiring that keeps widget subtrees mounted in GridStack-owned DOM during cross-grid drags. It demonstrates a reusable pattern for integrating React with imperative browser libraries without destroying component state.