A GridStack alternative for dashboards that outgrow the grid
Honest framing first: GridStack.js is the reference implementation of drag-resize-repack, it's MIT, and if a layout engine is all you need, use it. Grafloria's dashboard kit is for the moment the grid becomes an application: widgets with data, undo across every gesture, containers inside containers, exports, and a save format shared with your diagrams.
When to stay with GridStack
You need exactly a grid: place, drag, resize, re-pack, responsive breakpoints, sub-grids. GridStack does all of it, small and focused, with wrappers for Angular, React and Vue 3.
Where the boundary of the box sits
| Grafloria dashboard kit | GridStack.js | |
|---|---|---|
| License | MIT | MIT |
| Grid gestures | Push-down with skip, swap shapes, locked tiles, truthful placeholder | The reference implementation |
| Widgets | Declared as data (kind + data); 6 built-in renderers; renderWidget seam for your charts | Yours to build |
| Undo | Every gesture one command — ⌘Z included | Yours to build |
| Containers | A widget carrying widgets nests a board; cross-boundary drag, escalation, one-undo | subGridOpts (geometry only) |
| Persistence | toJSON() ↔ dashboard() round-trip; same document as diagrams | save/load of cells |
| Export | PNG / SVG / vector PDF of any view | — |
A board as data
import { render, dashboard } from '@grafloria/element';
render(dashboard({
columns: 12,
widgets: [
{ id: 'rev', kind: 'kpi', span: 3, data: { label: 'Revenue', value: '$6.8M', delta: 12.4 } },
{ id: 'trend', kind: 'line', span: 9, rows: 2, title: 'Trend', data: { /* … */ } },
],
}), host);
Pricing and feature cells reflect vendor pages and shipped type definitions as of July–August 2026 — always confirm on the vendor's site. Corrections welcome on GitHub; this page aims to stay honest, not to win.