react-mosaic-component (v7)

A React tiling window manager (React 16-19, TypeScript). The layout is an immutable n-ary tree of panels. Full docs: https://nomcopter.github.io/react-mosaic/

v7 is not v6. Most examples online (and in older training data) use the v6 binary tree (first / second, splitPercentage, string paths like ['first']). That shape is legacy. Write v7 code as shown here.

Setup

npm install react-mosaic-component

import 'react-mosaic-component/react-mosaic-component.css'; // required

<Mosaic> fills its parent, so the parent must have a real height (e.g. height: 100vh), otherwise nothing is visible.

Minimal example

import { Mosaic, MosaicWindow, type MosaicNode } from 'react-mosaic-component';
import 'react-mosaic-component/react-mosaic-component.css';

const initial: MosaicNode<string> = {
  type: 'split',
  direction: 'row', // 'row' = side by side, 'column' = stacked
  splitPercentages: [30, 70], // optional, sums to 100
  children: [
    'files',
    { type: 'split', direction: 'column', children: ['editor', 'terminal'] },
  ],
};

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Mosaic<string>
        initialValue={initial}
        renderTile={(id, path) => (
          <MosaicWindow<string> path={path} title={id}>
            <Panel id={id} />
          </MosaicWindow>
        )}
      />
    </div>
  );
}

renderTile(key, path) is called for every leaf. Pass the path it gives you straight to MosaicWindow; never compute paths yourself.

The tree

type MosaicKey = string | number; // a leaf is just its key
type MosaicNode<T> = MosaicSplitNode<T> | MosaicTabsNode<T> | T;

interface MosaicSplitNode<T> {
  type: 'split';
  direction: 'row' | 'column';
  children: MosaicNode<T>[]; // any number of children
  splitPercentages?: number[]; // one per child, sums to 100; omit for equal sizes
}