Adaptive drag-and-drop layouts for modern JavaScript frameworks.

Content-aware adaptive layout for dashboard-style UIs. Geometric fit is not the same as useful content — DnDGem evaluates both.

Documentation Open Playground

Public Alpha · 0.1.0-alpha.3 · channel @alpha

Supported integrations

Vanilla / DOM

@dndgem/dom + @dndgem/core

React

@dndgem/react

Vue

@dndgem/vue

Angular

@dndgem/angular

Svelte

@dndgem/svelte

Validated environments (not npm packages): Next.js with @dndgem/react, Nuxt with @dndgem/vue, SvelteKit with @dndgem/svelte.

Fit ≠ useful

GEOMETRICALLY FITS  ≠  CONTENT REMAINS USEFUL

Install (Public Alpha)

Always install with the @alpha dist-tag. Bare / latest installs are not the supported Alpha path.

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

Package matrix

Package	Role	Status	Install
`@dndgem/core`	Domain, constraints, solver	Alpha 0.1.0-alpha.3	`npm install @dndgem/core@alpha`
`@dndgem/dom`	DOM session, drag, measurement	Alpha 0.1.0-alpha.3	`npm install @dndgem/dom@alpha`
`@dndgem/react`	React adapter	Alpha 0.1.0-alpha.3	`npm install @dndgem/react@alpha`
`@dndgem/vue`	Vue 3 adapter	Alpha 0.1.0-alpha.3	`npm install @dndgem/vue@alpha`
`@dndgem/angular`	Angular adapter	Alpha 0.1.0-alpha.3	`npm install @dndgem/angular@alpha`
`@dndgem/svelte`	Svelte 5 adapter	Alpha 0.1.0-alpha.3	`npm install @dndgem/svelte@alpha`

Alpha capabilities

Shipped

Content-aware constraints
Deterministic solving + opt-in Auto-Layout
VALID / DEGRADED / INVALID
React, Vue, Angular, Svelte, Vanilla / DOM
Next.js, Nuxt, SvelteKit validated

Not claimed

Stable / v1 API
Server-side layout solving
Keyboard drag / SR announcements
Mobile / touch certified

Where to go next

Documentation

Framework guides, package matrix, SSR boundaries.

Quick Start

First working React layout in about 10–15 minutes.

Playground

Interactive demo — no authentication.