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.4 · 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

How layout works

Constraints → deterministic solving → adaptive Auto-Layout → optional advisory planning. Planning can propose layout or item-order intent; DnDGem’s deterministic solver remains responsible for validation and final resolution. No LLM or hosted AI service is required.

What’s new in Alpha.4

Alpha.4 extends DnDGem’s deterministic adaptive layout system with optional advisory planning — without changing the product thesis that geometric fit is not the same as useful content.

Optional automatic item-order proposals for Auto-Layout
Optional planner integration with explicit replan — initial layout does not wait on the planner

Alpha.4 release notes · Documentation

Install (Public Alpha)

Use @alpha for the supported DnDGem Alpha channel. Do not rely on latest (or bare installs that resolve through it) for Alpha releases.

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.4	`npm install @dndgem/core@alpha`
`@dndgem/dom`	DOM session, drag, measurement	Alpha 0.1.0-alpha.4	`npm install @dndgem/dom@alpha`
`@dndgem/react`	React adapter	Alpha 0.1.0-alpha.4	`npm install @dndgem/react@alpha`
`@dndgem/vue`	Vue 3 adapter	Alpha 0.1.0-alpha.4	`npm install @dndgem/vue@alpha`
`@dndgem/angular`	Angular adapter	Alpha 0.1.0-alpha.4	`npm install @dndgem/angular@alpha`
`@dndgem/svelte`	Svelte 5 adapter	Alpha 0.1.0-alpha.4	`npm install @dndgem/svelte@alpha`

Alpha capabilities

Shipped

Content-aware constraints
Deterministic solving + opt-in Auto-Layout
Optional automatic item-order proposals
Optional advisory planner (explicit replan; no LLM required)
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
Hosted AI / LLM layout assistance