A modern building block for complex workspace layouts.

Headless, draggable, and resizable layout manager for React. Build IDEs, dashboards, and advanced interfaces in minutes, not days.

Open Live Demo $ npm i react-zeugma

Designed for Workspace Builders#

Stop fighting with CSS Grid or wrestling absolute positioning math. react-zeugma manages the complexities of arbitrary window splitting, dragging, and resizing so you can focus on building your app.

Arbitrary Splits

Split horizontally or vertically without constraints. Create complex bento grids or simple side-by-side layouts instantly.

Smooth Resizing

Fluid, non-blocking resize handles with snap-to-edge capabilities. Feels completely native to the browser.

Flexible & Unopinionated

Save and load layout trees via simple JSON serialization. Complete control over state management and persistence flows.

Headless Design

We handle the complex math, drop zones, and tree states. You bring your own CSS and components.

Build Next-Generation IDEs & Layouts

react-zeugma is completely headless, context-isolated, and serialized to JSON. Below is a live interactive IDE built with react-zeugma, running an app preview that also implements its own independent react-zeugma workspace.

Launch full interactive editor demo