A TypeScript-first, responsive dashboard grid â drag, resize, multi-select, pluggable compaction, cross-grid drag/drop, undo/redo, and breakpoint-aware layouts, built on Vue 3's Composition API with zero runtime dependencies.
Every item is draggable and resizable out of the box, with per-item overrides, drag handles, min/max size constraints, and aspect-ratio locking.
Auto-generate a layout per breakpoint, or hand it exact pre-defined layouts for full control over how content reflows.
Five built-in strategies via compactType â vertical, horizontal, none, and overlap variants of each â or replace the algorithm entirely with a custom ICompactor.
Select multiple items and drag or resize any of them â the rest of the selection moves or resizes by the same delta, from mouse or keyboard alike.
Drag items between separate GridLayout instances with accept/reject rules, or drop in a brand-new item from outside the grid entirely.
Magnetic snapping that actually adjusts an item's position, plus Figma-style alignment guides while dragging â not just a visual overlay.
Serialize/restore a layout with a first-party storage helper, or save and switch between multiple named layout presets.
Move and resize items with arrow keys and shift+arrow, no mouse required â with localizable ARIA strings for every screen-reader-facing string.
Every prop, event, and enum is fully typed and exported from the package's main entry point â no reaching into an internal path required.
Opt-in enableUndoRedo history â snapshots taken at each committed change (drag/resize end, add/remove), not per intermediate frame, with a configurable history limit.
21.84 KB gzip, no runtime dependencies at all â the native drag/resize engine uses Pointer Events directly, not a third-party library.
Export the current layout to a standalone SVG â a static snapshot for docs, thumbnails, or sharing, no screenshot tooling required.
isMirrored flips the entire grid for right-to-left locales â anchor edges, resize direction, and drag math all correctly reverse, with a per-item opt-out.
A separate /core entry point exposes the positioning, collision, and compaction engine with zero Vue dependency â usable standalone outside Vue entirely.
98%+ statement/branch coverage, a Playwright e2e suite across Chromium/Firefox/WebKit, mutation testing, and CI gates on every PR â not just unit tests against the happy path.