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.

The comparison here is with grid layout engines. Where a BI product such as DevExpress Dashboard comes up below, it is only for how its designer aligns widgets — a splitter surface that is always covered — which the kit's split layout reproduces. Data sources, query builders and the rest of a BI suite are out of scope on both sides of this table.

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.

Feature by feature

✓ built in · DIY possible, but yours to build · — out of scope. Both columns are meant to be true, including the rows we lose.

The same dashboard, both ways

GridStack builds the grid; the widgets' content is HTML you render yourself:

import { GridStack } from 'gridstack';

const grid = GridStack.init({ column: 12 });
grid.load([
  { x: 0, y: 0, w: 3, h: 1, content: '<div class="kpi">Total revenue</div>' },
  { x: 3, y: 0, w: 8, h: 2, content: '<canvas id="trend"></canvas>' },  // chart wiring is yours
]);
const layout = grid.save();   // geometry back out

Grafloria declares the widgets too — the chart is the declaration:

import { render, dashboard } from '@grafloria/element';

const SPEC = dashboard({
  columns: 12,
  widgets: [
    { id: 'rev',   kind: 'kpi',  span: 3, rows: 1,
      data: { label: 'Total revenue', value: '$6.81M', delta: 12.4 } },
    { id: 'trend', kind: 'line', span: 8, rows: 2, title: 'Revenue vs target',
      data: { series: [{ name: 'Revenue', values: [420,455,512,588,648] }],
              labels: ['Jan','Feb','Mar','Apr','May'] } },
  ],
});
render(SPEC, document.getElementById('canvas'));
// SPEC.handle.toJSON() round-trips the WHOLE board — widgets, nesting, data

How the concepts map

See the difference in one demo

The clearest way to judge the boundary: GridStack gives you the grid geometry; this demo is a dashboard whose sections are containers — drag a tile across a section boundary and the other grid adopts it live, one undo restores the whole gesture, and toJSON() serializes the nesting. The grid options demo shows column counts, packing and responsive re-flow driven as data, and the fluid dashboard has Fit / Grow, Grid / Split and the drag-handle modes in one toolbar.

Pricing and feature cells reflect vendor pages and shipped type definitions as of July–September 2026 — always confirm on the vendor's site. Corrections welcome on GitHub; this page aims to stay honest, not to win.