Drag. Resize. Adapt. Without breaking your content.

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

Quick Start Open Playground

Public Alpha live · 0.1.0-alpha.0 · channel @alpha

Fit ≠ useful

DnDGem solves layouts with content constraints, deterministic selection, and adaptive reflow. A placement can be geometrically valid and still miss usefulness thresholds.

GEOMETRICALLY FITS  ≠  CONTENT REMAINS USEFUL

Install (Public Alpha)

Always install with the @alpha dist-tag. Bare / latest installs are not the supported Alpha path while only a prerelease is published.

# React (pulls @dndgem/dom + @dndgem/core)
npm install @dndgem/react@alpha

# Vanilla / DOM
npm install @dndgem/dom@alpha

Packages

`@dndgem/core`

Domain model, constraints, validity, scoring, deterministic solver.

`@dndgem/dom`

Measurement, resize observation, drag interaction, Vanilla layout session.

`@dndgem/react`

Thin React adapter — provider and hooks over the DOM session.

Alpha capabilities

Shipped

Content-aware constraints
Deterministic solving
VALID / DEGRADED / INVALID
Responsive reflow
Pointer drag + Escape cancel
React and Vanilla / DOM

Browsers & a11y

Chromium / Firefox / WebKit: supported for Alpha
Mobile: not validated
Baseline focus + consumer ARIA preservation
Keyboard drag deferred
Screen-reader drag announcements deferred

Known Alpha limitations

Area	Status
API stability	0.x Alpha — may break between prereleases
Keyboard / SR drag	Deferred
Mobile / SSR / large-N	Not validated / not established
Auto-Layout / AI / Flutter	Not implemented
Rendering model	Absolute positioning inside a positioned container
npm `latest`	Currently aliases the sole Alpha prerelease — use `@alpha`

Where to go next

Documentation

Developer entry for concepts, packages, and Alpha boundaries.

Quick Start

First working React layout in about 10–15 minutes.

Playground

Interactive demo — no authentication. Provider URL remains available on Pages.