A SolidJS layout primitive

Design within the grid.

A small, deterministic library for rectangular 2D layouts. Snap to structure, block collisions, keep geometry serializable, and let your application own the state.

Play with the demo ↓ Read the source ↗

Try the interaction model

These items use the Solid Snap components below. Drag them, resize the handles, and try moving one through the other.

Blocking by default

Invalid candidates stay at the last valid position. Neighboring items never get repacked.

Logical coordinates

Persist integers, render percentages, and scale the same layout across any CSS surface size.

Framework-independent core

Validate layouts and repair generated JSON without needing a browser or a SolidJS runtime.