explaingit

nomcopter/react-mosaic

★ 4,750TypeScriptAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

A React library for building resizable, rearrangeable multi-panel layouts, drag dividers to resize, drag panels to move, and split any area into more panels, like the pane system in a code editor or trading terminal.

Mindmap

mindmap
  root((react-mosaic))
    What it does
      Resizable panel layouts
      Drag to rearrange
      Tab containers
    Tech Stack
      TypeScript
      React
      react-dnd
    Use Cases
      Dashboard builders
      Code editor panes
      Trading terminals
    Audience
      React developers
      App builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a dashboard where users can drag to resize data panels and rearrange them into their preferred layout.

USE CASE 2

Create a code editor-style interface with resizable panes that users can split and reorganize freely.

USE CASE 3

Add tab containers that sit alongside split panels in a flexible layout tree for a multi-view workspace.

USE CASE 4

Build a trading terminal or analytics tool where users configure their own panel layout and it persists across sessions.

Tech stack

TypeScriptReactreact-dndBlueprint

Getting it running

Difficulty · easy Time to first run · 30min

Basic two-panel setup takes about 15 lines, complex nested layouts require understanding the tree data structure.

Apache 2.0 license, use freely for any purpose including commercial, just include the copyright notice and license text.

In plain English

React Mosaic is a library for web developers building applications where users need to arrange multiple panels on screen at the same time, similar to how panes work in a code editor or a trading terminal. You install it as a package in a React project and it gives you a layout where individual panels can be dragged to resize, dragged to rearrange, and split to create new ones. The whole layout updates in real time as the user moves things around. The layout is structured as a tree, meaning a single area can be split into more than two children at once, not just left and right. Tabs are treated as a proper layout type rather than an add-on, so you can have a tab container sitting alongside split panels in the same tree. The component can be either controlled, where your code manages the layout state and reacts to changes, or uncontrolled, where the component manages its own internal state and you just set a starting configuration. Drag and drop is built in using a library called react-dnd, and it supports both standard mouse interaction and touch devices. Theming is handled through CSS variables you can override, and the library ships a default visual style. It also works alongside Blueprint, a separate UI component library, though Blueprint is not required. Setting up a basic two-panel layout with a draggable divider takes around 15 lines of code based on the quick-start example in the README. The library is written in TypeScript and supports React versions 16 through 19. The project was originally created at Palantir Technologies and is released under the Apache 2.0 license. The README is short, and a separate documentation site contains the full API reference, theming options, and editable live examples.

Copy-paste prompts

Prompt 1
Using react-mosaic, create a two-panel layout where the left panel shows a list and the right panel shows a detail view, with a draggable divider between them, show me the full working component.
Prompt 2
Show me how to make a controlled react-mosaic layout where my app manages the layout state and responds to user drag and resize events.
Prompt 3
How do I add a tab container inside a react-mosaic layout so users can switch between multiple views within a single panel slot?
Open on GitHub → Explain another repo

← nomcopter on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.