eleung/snapgrid: snapgrid is a react-grid-layout v2 alternative built on dnd-kit. Drag, resize, repack, and drag between grids. · GitHub

A react-grid-layout v2 alternative, built on dnd-kit.

Draggable, resizable, responsive grid layouts for React, Svelte, and Vue, with pluggable packing and dragging tiles between grids.

Documentation · Getting Started · Examples · API

Bindings: React · Svelte · Vue

• Controlled & predictable: you own the layout array; every change comes back through onLayoutChange. No hidden state.
• Headless-first: compose useGridContainer + hooks under a dnd-kit DragDropProvider for full control of your markup — or drop in the turnkey <GridLayout> (react-grid-layout-style) when you don't need that. Ships no CSS.
• Pluggable packing: vertical / horizontal / none, plus masonry / gravity / shelf from @snapgridjs/extras, or your own Compactor.
• Cross-grid dragging: wrap grids in a <SnapGridGroup> and drag tiles between them.
• Nested grids: drop a grid inside a tile of another grid and drag tiles between levels — or isolate a sub-grid by giving it its own provider.
• dnd-kit interop: drag between a grid and a dnd-kit useSortable list or board — a card lands at a real cell, a tile drops back out, both reorder — under one provider (snapMove).
• Responsive: per-breakpoint layouts with <ResponsiveGridLayout>.
• Resizable, with limits: any edge/corner, per-item minW/maxW/minH/maxH, and static tiles.
• Keyboard accessible: every tile is keyboard-draggable — Enter/Space to pick up, arrow keys to move, Esc to cancel.
• SSR-safe and TypeScript-first (types included).

snapgrid keeps the parts of react-grid-layout people rely on — the { i, x, y, w, h } layout model, controlled onLayoutChange, responsive breakpoints — and adds the things it can't do.

react-grid-layout is mature, widely deployed, and battle-tested. This table is about capability differences, not quality. snapgrid is new; if you need a proven incumbent today, RGL is a great choice. Coming from it? See the migration guide.

snapgrid itself is ~8 kB brotli, but it's built on dnd-kit (~30 kB), so a fresh install is ~38 kB brotli, roughly 2.5× react-grid-layout v2's ~15 kB (minified, React excluded). That weight is dnd-kit, and it's a deliberate trade:

• dnd-kit is the de-facto standard for drag-and-drop in React. Its accessible, multi-sensor engine is what gives snapgrid keyboard dragging, touch support, and cross-grid out of the box (things RGL's older react-draggable/react-resizable stack doesn't).
• If your app already uses dnd-kit, snapgrid adds only ~8 kB.
• snapgrid tracks dnd-kit's latest framework-agnostic line (@dnd-kit/react), the line dnd-kit recommends over the legacy @dnd-kit/core.

# React
pnpm add @snapgridjs/react @dnd-kit/react @dnd-kit/dom

# Svelte 5
pnpm add @snapgridjs/svelte @dnd-kit/svelte @dnd-kit/dom

# Vue 3
pnpm add @snapgridjs/vue @dnd-kit/vue @dnd-kit/dom

@snapgridjs/extras (masonry/gravity/shelf packers) is optional.

snapgrid is headless-first: you compose hooks with a dnd-kit DragDropProvider and render your own markup. The example below is React. The Svelte API mirrors it with createGridContainer / createGridItem factories and {@attach} (quick start); the Vue API mirrors it with useGridContainer / useGridItem composables and function refs (quick start).

import { DragDropProvider } from "@dnd-kit/react";
import { type Layout, useContainerWidth, useGridContainer, useGridItem } from "@snapgridjs/react";
import { useState } from "react";

export function Board() {
  const { width, containerRef } = useContainerWidth();
  const [layout, setLayout] = useState<Layout>([
    { i: "a", x: 0, y: 0, w: 4, h: 2 },
    { i: "b", x: 4, y: 0, w: 4, h: 2 },
    { i: "c", x: 8, y: 0, w: 4, h: 2 },
  ]);

  // You supply the dnd-kit provider; useGridContainer runs inside it (in Surface).
  return (
    <div ref={containerRef}>
      <DragDropProvider>
        <Surface layout={layout} width={width} onLayoutChange={setLayout} />
      </DragDropProvider>
    </div>
  );
}

function Surface({
  layout,
  width,
  onLayoutChange,
}: { layout: Layout; width: number; onLayoutChange: (next: Layout) => void }) {
  const { containerProps, group } = useGridContainer({ layout, width, onLayoutChange });
  return (
    <div {...containerProps}>
      {layout.map((it) => (
        <Tile key={it.i} id={it.i} group={group} />
      ))}
    </div>
  );
}

function Tile({ id, group }: { id: string; group: string }) {
  const { ref, style } = useGridItem({ id, group });
  return (
    <div ref={ref} style={style} className="tile">
      {id}
    </div>
  );
}

Prefer a ready-made component? The turnkey <GridLayout> wraps these same hooks (and supplies the provider) in a react-grid-layout-style API — drop in keyed children and you're done:

<GridLayout layout={layout} width={width} onLayoutChange={setLayout}>
  {layout.map((item) => (
    <div key={item.i} className="tile">{item.i}</div>
  ))}
</GridLayout>

→ Full walkthrough in Getting Started.

This is a pnpm workspace.

pnpm install        # install everything
pnpm dev            # run the docs site (apps/docs) — guides, live examples, showcase
pnpm validate       # typecheck + lint + test + build

See CONTRIBUTING.md before opening a PR.

snapgrid stands on the shoulders of dnd-kit (the interaction layer) and react-grid-layout (whose core packing engine it adapts).

MIT © Edmond Leung