Introduction
react-dockable-desktop is a premium, state-of-the-art window manager and dockable layout engine for React. It lets you build VS Code–style, JetBrains–style, or any kind of multi-panel desktop application in the browser.
What it does
- Dockable splits and tabs — drag panels to any edge of a group to split the view, or to the center to tab them together.
- Floating windows — pop any panel out as a resizable, draggable window. Supports maximize, corner anchoring (drag to a workspace corner to snap/stack there), and z-index stacking.
- Zero-unmount DOM preservation — by default, across docking, floating, and tab-switching alike, the layout engine moves DOM nodes (WebGL contexts, Leaflet maps, CodeMirror editors) without destroying them, with no configuration required.
- Layout serialization —
saveLayout()/loadLayout()round-trip your entire workspace to/from JSON. Persist tolocalStorage, IndexedDB, or a server. - i18n and RTL — all built-in strings are translatable. RTL layout (Arabic, Hebrew, Persian) is fully supported; direction is set by the app via the
dirprop on the provider. - Pub/sub event bus — panels publish and subscribe to events without prop drilling.
- Dirty-state close guards — panels can intercept close requests and show a confirmation dialog when unsaved changes are present.
Design philosophy
The library follows the workspace pattern, inspired by TanStack QueryClient and Redux store. Configuration and imperative API live on a single workspace object that you create with createWorkspace() outside the React tree. The React provider is a thin rendering layer that binds to the workspace.
This means you can call workspace.openPanel(), workspace.saveLayout(), workspace.focusPanel() from anywhere — button handlers, keyboard shortcuts, server-sent events — without needing useRef hacks or context access.
Getting started
npm install react-dockable-desktopImport the CSS in your entry file:
import 'react-dockable-desktop/styles.css';