DnDGem

DnDGem by DA62

Drag. Resize. Adapt. Without breaking your content.

Category: Content-Aware Adaptive Layout Engine

Created and maintained by Davide Agosti.

Canonical website: https://dndgem.dev

DA62: https://davideagosti.com

What it is

DnDGem lays out draggable dashboard-style content using content-aware constraints, deterministic solving, and adaptive reflow — so a layout that geometrically fits can still be classified as less useful when content needs are missed.

GEOMETRICALLY FITS  ≠  CONTENT REMAINS USEFUL

It is not merely a grid library, a drag-and-drop wrapper, a React-only library, or a dnd-kit abstraction. React is a thin adapter; Core stays framework-agnostic.

Try DnDGem

See it immediately: https://playground.dndgem.dev/

Integrate it: Quick Start (~10–15 minutes once packages are available to your app). Public page: https://dndgem.dev/docs/quick-start/

Installation

Public Alpha (npm)

npm install @dndgem/react@alpha
npm install @dndgem/vue@alpha
npm install @dndgem/angular@alpha
npm install @dndgem/svelte@alpha
npm install @dndgem/dom@alpha

Install with dist-tag alpha only (@dndgem/*@alpha → 0.1.0-alpha.4). This is not a stable release; do not treat latest as a stable or Alpha channel.

Local workspace

pnpm install
pnpm build
pnpm --filter @dndgem/example-react dev
pnpm --filter @dndgem/example-vue dev
pnpm --filter @dndgem/example-angular dev
pnpm --filter @dndgem/example-svelte dev

Quick Start

See Quick Start for the full first-integration guide.

Illustrative React snippet

import { DnDGemProvider, useDnDGemContainer, useDnDGemItem } from '@dndgem/react';

function Board() {
  const containerRef = useDnDGemContainer();
  const revenue = useDnDGemItem('revenue');
  return (
    <div ref={containerRef} style={{ position: 'relative', width: 480, height: 240 }}>
      <article ref={revenue.ref} style={{ background: '#2f6f5e', color: '#fff', ...revenue.style }}>
        Revenue
      </article>
    </div>
  );
}

export function App() {
  return (
    <DnDGemProvider
      items={[
        { id: 'revenue', constraints: { minWidth: 96, minUsefulWidth: 140, preferredWidth: 180 } },
      ]}
      desiredPlacements={{ revenue: { x: 12, y: 12, width: 180, height: 88 } }}
    >
      <Board />
    </DnDGemProvider>
  );
}

Packages

@dndgem/core          renderer-agnostic domain, validity, scoring, solver
     ▲
@dndgem/dom           DOM measurement, resize, drag, layout session
     ▲
@dndgem/react         React adapter (peerDependency: react)
@dndgem/vue           Vue 3 adapter (peerDependency: vue)
@dndgem/angular       Angular adapter (peerDependency: @angular/core)
@dndgem/svelte        Svelte 5 adapter (peerDependency: svelte)

Validated meta-framework environments (not npm packages): Next.js → @dndgem/react; Nuxt → @dndgem/vue; SvelteKit → @dndgem/svelte.

Project status

DnDGem is open source (MIT). Development happens in this public GitHub repository. The project is early Alpha (product maturity: BETA-CANDIDATE): APIs may change; this is not a stable 1.0 release. A Beta readiness program is authorized; a Beta release is not authorized. Claim boundaries: Beta Claim & Support Policy.

Current official npm Alpha: 0.1.0-alpha.4 (release notes — PUBLISHED). Install with dist-tag alpha (npm install @dndgem/react@alpha, @dndgem/vue@alpha, etc.) — resolves to 0.1.0-alpha.4. Previous: 0.1.0-alpha.3, 0.1.0-alpha.2 (superseded), 0.1.0-alpha.1. Historical first Alpha: 0.1.0-alpha.0. latest is not the Alpha channel (Core/DOM/React remain 0.1.0-alpha.0; Vue/Angular/Svelte remain 0.1.0-alpha.2 from first-package npm assignment).

Public product home: https://dndgem.dev (see Public site & domain hosting). Source: github.com/DnDGem/dndgem. Playground: https://playground.dndgem.dev/.

Where to start

1. https://dndgem.dev — canonical public product home
2. Developer guides — full journey (in-repo)
3. Quick Start
4. Core Concepts
5. Validated examples: examples/react, examples/vanilla, examples/vue, examples/angular, examples/svelte (Vue, Angular, and Svelte are workspace-only). Meta-framework fixtures: apps/compat-next, apps/compat-nuxt, apps/compat-sveltekit (see Meta-frameworks).
6. Playground: https://playground.dndgem.dev/ (provider: https://dndgem-playground.pages.dev/)

Browser support

Validated for Public Alpha on Chromium, Firefox, and WebKit (Playwright desktop engines). Mobile / touch are not validated.

Details: Browser Support

Accessibility status

Pointer drag and Escape cancel are supported. Focus / consumer ARIA preservation are baseline-supported. Keyboard drag and screen-reader drag announcements are deferred.

Details: Accessibility

Alpha limitations (short)

• Desktop Chromium / Firefox / WebKit validated; mobile not validated
• Pointer drag + Escape cancel supported; keyboard drag deferred
• DnDGemProvider is client-mount only (no server-side layout claim; Next.js / Nuxt / SvelteKit are validated compatibility environments — Meta-frameworks)
• Auto-Layout is opt-in on @alpha (0.1.0-alpha.4); default off
• Optional advisory planner / automaticItemOrder are opt-in on @alpha; model assistance deferred
• Vue, Angular, and Svelte adapters are published (@dndgem/vue, @dndgem/angular, @dndgem/svelte on @alpha)
• No public intelligence packages; no Flutter adapter yet
• Absolute-positioning rendering model

Details: Limitations · Alpha API Contract · Release notes

Playground / demo

Preferred public playground: https://playground.dndgem.dev/

Provider URL (keep available): https://dndgem-playground.pages.dev/

Local static build:

pnpm --filter @dndgem/playground build

Public landing site (static):

pnpm --filter @dndgem/www build

Feedback / Community

Discussions is the planned home for usage questions and broader feedback. Category configuration may follow separately.

Development

Requirements: Node.js 20+, pnpm 10.

pnpm install
pnpm build
pnpm lint
pnpm format:check
pnpm typecheck
pnpm test
pnpm check:boundaries
pnpm check:docs-links
pnpm test:pack
pnpm test:e2e
pnpm bench:core:semantics

pnpm test:e2e runs the Alpha browser matrix (Chromium + Firefox + WebKit). Install browsers once with pnpm test:e2e:install. Chromium-only: pnpm test:e2e:chromium.

Quality policy: feature → develop uses the full local Sprint Final Quality Gate (no GitHub CI). develop → master runs full GitHub CI. See Testing Strategy.

License

MIT — see LICENSE.

Contributing

See CONTRIBUTING.md and CODE_OF_CONDUCT.md. Security reports: SECURITY.md.