Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/projectstorm/react-workspaces

The ultimate react workspace and panel management system for ambitious web apps
https://github.com/projectstorm/react-workspaces

customizable drag-and-drop javascript layout-engine panel plugins react typescript web workspace

Last synced: about 21 hours ago
JSON representation

The ultimate react workspace and panel management system for ambitious web apps

Host: GitHub
URL: https://github.com/projectstorm/react-workspaces
Owner: projectstorm
License: mit
Created: 2017-12-06T20:15:37.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2024-11-27T18:57:49.000Z (3 months ago)
Last Synced: 2025-02-12T13:06:55.327Z (8 days ago)
Topics: customizable, drag-and-drop, javascript, layout-engine, panel, plugins, react, typescript, web, workspace
Language: TypeScript
Homepage:
Size: 9.21 MB
Stars: 163
Watchers: 5
Forks: 26
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # STORM React Workspaces

[![Join the chat at https://gitter.im/projectstorm/react-workspaces](https://badges.gitter.im/projectstorm/react-workspaces.svg)](https://gitter.im/projectstorm/react-workspaces?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![NPM](https://img.shields.io/npm/v/@projectstorm/react-workspaces-core.svg)](https://npmjs.org/package/@projectstorm/react-workspaces-core)

[![NPM](https://img.shields.io/npm/dt/@projectstorm/react-workspaces-core.svg)](https://npmjs.org/package/@projectstorm/react-workspaces-core)

[![Build](https://github.com/projectstorm/react-workspaces/actions/workflows/test.yml/badge.svg)](https://github.com/projectstorm/react-workspaces/actions/workflows/test.yml)

__DEMO__: http://projectstorm.cloud/react-workspaces

A React library which provides a complete workspace management system to power ambitious web apps.

## Features

* Pluggable model and behavior system, implemented as a monorepo with separate npm packages

* Fully native drag and drop (even across multiple browser windows)

* Resizable everything, including split panels and floating windows

* Drop-zones which transform panels into other models (such as trays and tabs)

* Useful (and customizable) models out of the box (tab groups, tray groups, floating windows)

* Performant rendering system, only re-render what is actively changing (on-top of what the React fibre engine already provides)

* Tree based, event driven models (all changes to the model can be observed with listeners)

* Layer based, with all interaction controls such as resize dividers and controls implemented as top-level layers

* Complete debug system, to draw all hidden controls and show reported panel sizes

* Written in TS with exported types in published packages

---

![Demo1](./images/screenshot1.png)

![Demo1](./images/animated1.gif)

## Usage

* Take a look at the demos URL as well as the demo folder (docs will follow soon)

* There is also an example project folder, which shows bare-bones (native JS) of the library