Examples

Every demo below is the real library running in your browser: drag, resize, and play. Each links to the guide that explains it.

Drag & resize

The basics: drag a tile, resize it from the corner, watch the rest compact upward. → Getting Started

Compaction & packing

Swap the packing algorithm at runtime: vertical, horizontal, masonry, gravity, shelf, or free. → Compaction guide

Resize constraints

Every edge and corner, with per-item minW / maxW / minH / maxH enforced. → Resizing guide

Drag handles

Drag only by the grip; the rest of the tile stays interactive. → Dragging guide

Snap to grid

Toggle whether the dragged tile glides with the pointer or snaps to cells. → Dragging guide

Static items

Pin a tile so it never moves while others flow around it. → Static items guide

Responsive

Columns and layout change as the width crosses breakpoints. → Responsive guide

Cross-grid dragging

Two grids in a SnapGridGroup. Drag tiles between them. → Cross-grid guide

Nested grids

A grid inside another grid’s tile. Drag the panel by its header, or rearrange the inner tiles. → Nesting guide

External drop

Drag a chip from a palette into the grid; the grid synthesizes a new item. → External drop guide

Headless

The same engine with entirely custom markup, via SnapGridProvider + hooks. → Headless guide