# nomcopter/react-mosaic

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nomcopter-react-mosaic).**

4,759 stars · 244 forks · TypeScript · NOASSERTION

## Links

- GitHub: https://github.com/nomcopter/react-mosaic
- Homepage: https://nomcopter.github.io/react-mosaic/
- awesome-repositories: https://awesome-repositories.com/repository/nomcopter-react-mosaic.md

## Topics

`react` `tiling-window-manager` `typescript` `window-manager`

## Description

react-mosaic is a React tiling window manager used to organize components into a resizable grid of windows and tabbed containers. It provides a layout system featuring resizable split panes and a draggable window orchestrator for arranging content into nested rows and columns.

The system includes a serializable layout engine that converts window arrangements into JSON, enabling the persistence and restoration of workspace configurations across sessions. It supports a tabbed workspace interface where multiple panels are grouped into single areas with switchable headers.

The project covers comprehensive layout management through programmatic control and automated tiling, including drag-and-drop rearrangement and window order rebalancing. It also provides UI customization options for window toolbars, tab headers, and empty state rendering.

## Tags

### DevOps & Infrastructure

- [Tiling Window Managers](https://awesome-repositories.com/f/devops-infrastructure/tiling-window-managers.md) — Organizes React components into a resizable grid of tiling windows and tabbed containers.
- [Tiling Drag-and-Drop Rearrangement](https://awesome-repositories.com/f/devops-infrastructure/tiling-window-managers/drag-and-drop-layout-scrolling/tiling-drag-and-drop-rearrangement.md) — Allows moving windows between positions in the tiled view by calculating and generating layout tree updates. ([source](https://nomcopter.github.io/react-mosaic/docs/concepts/updates))
- [Window Resizing](https://awesome-repositories.com/f/devops-infrastructure/tiling-window-managers/window-resizing.md) — Adjusts the dimensions of adjacent components by dragging a separator to allocate screen space. ([source](https://nomcopter.github.io/react-mosaic/docs/api))
- [Tiled Window Wrappers](https://awesome-repositories.com/f/devops-infrastructure/tiling-window-managers/tiled-window-wrappers.md) — Wraps content in windows featuring toolbars with controls for splitting, expanding, removing, or replacing tiles. ([source](https://cdn.jsdelivr.net/gh/nomcopter/react-mosaic@master/README.md))
- [Window Order Rebalancing](https://awesome-repositories.com/f/devops-infrastructure/tiling-window-managers/window-order-rebalancing.md) — Calculates a new balanced tree structure from existing windows to reshuffle them into a clean grid. ([source](https://nomcopter.github.io/react-mosaic/docs/concepts/updates))

### User Interface & Experience

- [Tiling Layout Engines](https://awesome-repositories.com/f/user-interface-experience/constraint-layout-engines/tiling-layout-engines.md) — Implements a tiling layout engine that organizes components into a resizable grid of rows and columns. ([source](https://cdn.jsdelivr.net/gh/nomcopter/react-mosaic@master/README.md))
- [Layout State Persistence](https://awesome-repositories.com/f/user-interface-experience/interface-layout-managers/layout-state-persistence.md) — Serializes the window tree to JSON for saving and restoring workspace configurations across sessions. ([source](https://nomcopter.github.io/react-mosaic/docs/concepts/controlled-vs-uncontrolled))
- [Workspace Layout Persistence](https://awesome-repositories.com/f/user-interface-experience/native-window-layout-management/workspace-layout-persistence.md) — Saves and restores complex window arrangements by serializing the layout tree into JSON.
- [Layout Serialization Engines](https://awesome-repositories.com/f/user-interface-experience/native-window-layout-management/workspace-layout-persistence/layout-serialization-engines.md) — Provides a system for converting complex window arrangements into JSON for workspace restoration.
- [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Divides screen space into nested rows and columns using draggable separators.
- [Tabbed Containers](https://awesome-repositories.com/f/user-interface-experience/tabbed-containers.md) — Groups multiple panels into a single area with a tab strip to switch between content views via headers. ([source](https://nomcopter.github.io/react-mosaic/docs/concepts/tabs))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Groups multiple components into single screen areas using a tabbed system to switch active views.
- [Layout State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/controlled-components/controller-initiated-state-updates/layout-state-synchronizers.md) — Provides a controlled state interface to synchronize the internal layout tree with external React state.
- [Hierarchy Mutation Engines](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-layout-engines/hierarchy-mutation-engines.md) — Updates the layout hierarchy by calculating new parent-child relationships based on user drag-and-drop interactions.
- [Dashboard Layouts](https://awesome-repositories.com/f/user-interface-experience/layout-components/custom-layouts/dashboard-layouts.md) — Enables the creation of flexible interfaces where panels can be programmatically added, removed, or resized.
- [Recursive Components](https://awesome-repositories.com/f/user-interface-experience/recursive-components.md) — Uses recursive components to traverse and render the tiling layout tree into nested split-panes and tab groups.
- [Tab Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/tabbed-containers/tab-lifecycle-management.md) — Provides programmatic control over tab close buttons to implement pinned, protected, or closable panels. ([source](https://nomcopter.github.io/react-mosaic/docs/concepts/tabs))
- [Tree-Based Window Orchestrators](https://awesome-repositories.com/f/user-interface-experience/tree-based-window-orchestrators.md) — Provides a manager for rearranging component positions within a hierarchical tree via drag and drop.

### Data & Databases

- [Layout Tree Manipulations](https://awesome-repositories.com/f/data-databases/row-manipulations/programmatic-tree-manipulation/layout-tree-manipulations.md) — Provides a controlled state interface to programmatically manage the layout tree for features like undo/redo. ([source](https://nomcopter.github.io/react-mosaic/))

### Development Tools & Productivity

- [Tiling Panel Arrangement](https://awesome-repositories.com/f/development-tools-productivity/help-generators/help-panel-layouts/resizable-layout-panels/tiling-panel-arrangement.md) — Organizes complex components across a view by dragging and resizing layout panels to define position and size. ([source](https://nomcopter.github.io/react-mosaic/))
- [Binary Tree Layout Engines](https://awesome-repositories.com/f/development-tools-productivity/window-managers/split-screen-layouts/binary-tree-layout-engines.md) — Implements a tiling system that partitions the display into rectangular regions using a binary tree layout engine.
- [IDE Layout Frameworks](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-environments/integrated-development-suites/customizable-development-environments/ide-layout-frameworks.md) — Provides the structural framework for building IDE-style interfaces with split-panes and tabbed containers.
- [Panel Creation Logic](https://awesome-repositories.com/f/development-tools-productivity/help-generators/help-panel-layouts/composable-panel-layouts/panel-creation-logic.md) — Ships a configurable function to determine which content identifies as a new panel, including user selection pickers. ([source](https://nomcopter.github.io/react-mosaic/docs/guides/zero-state))

### Software Engineering & Architecture

- [Single State Trees](https://awesome-repositories.com/f/software-engineering-architecture/single-state-trees.md) — Stores the entire window arrangement in a single serializable state tree for persistence.

### Programming Languages & Runtimes

- [Window Action Triggers](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/tree-based-window-layouts/window-action-triggers.md) — Implements commands to hide, expand, or remove panels by accessing the window or tree context. ([source](https://nomcopter.github.io/react-mosaic/docs/guides/custom-toolbar))