How to save and restore layouts in React Mosaic?

The tree structure is serializable JSON; save the currentNode state and restore it as initialValue or value. This allows persistent user configurations across sessions.

React Mosaic vs React Grid Layout for tiling windows?

React Mosaic excels with complex, nested layouts and user-controlled rearranging, while React Grid Layout is better for grid-based, simpler drag-and-drop interfaces without deep nesting.

How to customize toolbar buttons in React Mosaic?

Use the toolbarControls prop on MosaicWindow to add custom buttons, or override renderToolbar for complete customization, as shown in the advanced examples.

Does React Mosaic work with Next.js or SSR?

Yes, it supports server-side rendering with frameworks like Next.js, as mentioned in the FAQ, but ensure proper handling of CSS imports for theming.

Can I use React Mosaic without the Blueprint theme?

Yes, omit Blueprint CSS imports and use custom CSS classes, but this requires additional styling work since built-in themes rely on Blueprint.

React Mosaic

NOASSERTIONTypeScriptv6.1.1

A React tiling window manager for building sophisticated, user-controlled interfaces with dynamic layouts.

Visit Website GitHub

4.7k stars240 forks0 contributors

What is React Mosaic?

React Mosaic is a React component library for building tiling window managers that enable complex, user-controlled workspace layouts. It solves the problem of creating sophisticated interfaces where users need to dynamically resize, rearrange, and customize multiple panels. The library provides a flexible API for managing nested split views, tab groups, and drag-and-drop interactions.

Target Audience

Frontend developers building applications that require complex, configurable workspace layouts such as IDEs, dashboards, data visualization tools, and multi-panel web applications.

Value Proposition

Developers choose React Mosaic for its comprehensive feature set, TypeScript support, and flexible API that allows complete control over layout management. Its built-in theming with Blueprint and extensible architecture make it a robust solution for professional applications.

Overview

A React tiling window manager

Use Cases

Best For

Building IDE-like interfaces with multiple resizable panels

Related Projects

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

Creating customizable dashboard layouts with drag-and-drop

Developing data visualization tools with complex workspace arrangements

Implementing multi-panel web applications with tab groups

Building applications that require user-saved layout configurations

Creating responsive interfaces that work on both desktop and touch devices

Not Ideal For

Applications with fixed, non-interactive layouts that don't benefit from dynamic resizing or rearranging
Teams preferring out-of-the-box, pre-styled components without CSS customization or Blueprint dependency
Projects requiring rapid prototyping with simple drop-in layout components

Pros & Cons

Pros

Flexible Tree Structure

Supports n-ary trees for complex layouts with multiple panels and tabs, enabling intricate workspace arrangements as shown in the documentation examples.

Comprehensive TypeScript Support

Offers full TypeScript support with detailed type definitions, ensuring type safety and better developer experience for complex layouts.

Built-in Theming

Includes built-in Blueprint theme support with dark mode, providing a polished UI out of the box, though it requires additional CSS imports.

Drag & Drop Interface

Features intuitive drag-and-drop for rearranging panels, making user-controlled layouts seamless on both desktop and touch devices.

Cons

Blueprint Dependency

Recommended theming relies on Blueprint, requiring extra installation and CSS setup, which adds complexity and may not align with all design systems.

Complex API

The n-ary tree structure and path management are intricate, as evidenced by the detailed migration guide from v6, leading to a steeper learning curve.

Breaking Changes

Significant updates like the move from binary to n-ary trees in v1 indicate potential future disruptions, requiring careful migration planning.

Frequently Asked Questions

Game Engine Development

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,800

Forks33,842

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Stars112,779

Forks22,760

Last commit4 months ago

#react-component

#tiling-window-manager

Game Engine Development1.3k