React Mosaic is a React tiling window manager that provides drag-to-resize and drag-to-rearrange panel layouts inspired by IDE and i3-style window management.
The tool solves the problem of building complex, user-customizable dashboard and panel-based interfaces. It models layouts as n-ary trees where a single split can hold any number of children rather than being limited to binary splits. Tabs are treated as first-class node types in the tree structure rather than as a convention layered on top. The component supports both controlled mode, where you manage the tree state via value and onChange props, and uncontrolled mode with initialValue. Drag-and-drop functionality is built on react-dnd with HTML5 and touch backends, and the tool ships with a default CSS theme plus CSS variables for customization.
Developers building applications that need flexible, rearrangeable panel layouts—such as dashboards, IDEs, or data analysis tools—should consider this tool. It works with or without Blueprint for styling. The tool includes zero-config migration from legacy binary tree layouts, automatically converting them at render time, with an explicit convertLegacyToNary function available for deliberate upgrades. The documentation site provides live editable examples, API reference, and migration guides.
The project maintains active development with a functioning test suite, linting infrastructure, and a documentation site that hot-reloads during development. The contributing guide outlines standard workflows for cloning, installing dependencies, starting the development server, building the library, running tests, and linting code.
