Atlas expedition

Draggable VS Code-style panes in React: Dockview vs rc-dock vs FlexLayout vs react-mosaic (2026)

Yes: Dockview is the default modern pick for VS Code-style pane docking in React; three real alternatives fit narrower cases.

40 sources ~9 min read #10 react · ui · docking-layout · dockview · typescript
DECISION. Yes — the Visual Studio / VS Code "drag a pane, dock it to an edge, stack it as a tab, float it, pop it into another window" experience exists for React, and the default answer is Dockview[1]. Pick Dockview for a full IDE-grade dock (tabs + tiling + floating + popout, framework-agnostic core, best TypeScript)[2]; rc-dock for the fastest drop-in five-way tab docking in a React-only app[5]; FlexLayout when a clean serializable JSON tree and multi-monitor popouts matter most (it's the library golden-layout itself now points React users to)[6]; react-mosaic for i3-style tiling dashboards — and, new in v7, tab-stacking too[3]. golden-layout is historical context only: it dropped React in v2 and last shipped in 2022[22].

What you're actually asking for

"Drag panes like in Visual Studio" is a docking layout manager: panels you grab by the tab, drag to a dock zone (left/right/top/bottom/center), stack into tab groups, split, resize, tear off into floating overlays or separate OS windows, and serialize the whole arrangement to restore later. That is a different, heavier thing than a resizable splitter (react-resizable-panels ⭐ 5.3k, Allotment ⭐ 1.3k) — if you only need adjustable split panes with no tabs/floating, use those instead and stop reading[31][32][33][34]. Four libraries genuinely deliver the full docking experience in React.

The candidates

Dockview

⭐ 3.3k (Jul 2026) · MIT · npm dockview-react

Framework-agnostic vanilla-TS core with first-party React/Vue/Angular wrappers. Tabs, groups, grid/splitview, drag-dock, floating groups, and popout windows — the closest modern successor to golden-layout[2][8][23].

rc-dock

⭐ 812 (Jul 2026) · Apache-2.0 · npm rc-dock

React-only. Effortless five-position drag docking, float boxes, max box, popup-to-new-window, and saveLayout/loadLayout. Minimal setup, gets working fast[5][15].

FlexLayout

⭐ 1.3k (Jul 2026) · MIT · npm flexlayout-react

React-only, zero deps but React. Layout is a predictable JSON model (Model.toJson/fromJson); nested tabsets, border panels, popout-to-external-window. golden-layout's official React recommendation[4][6].

react-mosaic

⭐ 4.8k (Jul 2026) · Apache-2.0 · npm react-mosaic-component

React tiling window manager (i3-style). v7 (Jul 2026) rewrote the engine to an n-ary tree and added first-class tab nodes, closing its biggest historical gap[7][3].

Feature matrix

CapabilityDockviewrc-dockFlexLayoutreact-mosaic
Docking model Tabs + groups + grid/splitview (full VS Code dock)[8] Tabs + 5-position dock zones[5] Nested tabsets + border panels[4] N-ary tiling; tabs added v7[3]
Tab-stack groups ✓ core ✓ core ✓ core ✓ v7+ only[3]
Floating / detached groups (in-app overlay) ✓ floating groups w/ nested grid[9] ✓ float box[5] ✗ (borders/overlays only)
Popout / separate browser window ✓ + lifecycle events[10] ✓ popup window[5] enablePopout[4]
Serialize + restore layout toJSON/fromJSON[8] saveLayout/loadLayout[5] Model.toJson/fromJson[4] ✓ plain JSON tree → localStorage[30]
Framework coupling Agnostic TS core + React/Vue/Angular[2] React-only[15] React-only[4] React-only[20]
React 19 peer dep 16.8–19[12] ≥17 (latest is 4.0 alpha)[16] 18–19[18] 16–19 (v7 fixed)[21]
Runtime dependencies 0 (core)[8] 6 (lodash, rc-component…)[16] 0 (React only)[18] 11 (react-dnd stack)[21]
Bundle (min+gzip) ~80 KB[25] ~61 KB[26] ~40 KB[27] ~37 KB[28]
Theming 6 built-in themes + CSS vars[11] Light/dark, CSS[5] 9 built-in themes[4] Default CSS + Blueprint optional[20]
License MIT[2] Apache-2.0[15] MIT[17] Apache-2.0[20]

Popularity & maintenance (Jul 2026)

MetricDockviewrc-dockFlexLayoutreact-mosaicgolden-layout
⭐ Stars3.3k[2]812[15]1.3k[17]4.8k[7]6.7k[22]
Weekly npm downloads139k core / 55k react[36]~20k[24]~58k[24]~76k[24]~37k[24]
Latest releasev7.0.2, Jun 2026[9]4.0.0-alpha.2[16]v0.10.0, Jul 2026[18]v7.0.0, Jul 2026[3]v2.6.0, Sep 2022[22]
Release cadence~biweekly through 2025[35]SporadicActive, slower on major React[40]Active (big v7 rewrite)[29]Effectively dormant

Drag-and-drop UX & TypeScript quality

Dockview draws the strongest community praise: the Show HN thread called it "one of the coolest things I've seen on HN recently" and singled out the TypeScript ("looks really proper"), zero dependencies, and docs; a commenter who tried several libraries still put Dockview "in the top," while noting FlexLayout's "vertical tabs and predefined behavior" as a strength[14]. Dockview is TypeScript-first with full type definitions[39]. All four ship types; react-mosaic and Dockview have the most polished DnD, but react-mosaic's drag rests on the react-dnd stack (11 transitive deps), which is why its bundle stays small but its dependency surface is the largest[21].

React 19 / StrictMode caveats

  • Dockview — peer dep spans React 16.8–19[12], but there's an open issue where SplitviewReact renders twice under StrictMode (dev-only double-render); works fine outside StrictMode[13]. As of v7 the React bindings live in the separate dockview-react package[9].
  • react-mosaic — v7 explicitly fixed React 19 (JSX namespace, removed React.ReactFragment, upgraded react-dnd-multi-backend) and expanded the peer dep to 16–19[3]. If you're on React 19, use v7, not v6.
  • FlexLayout — current peer dep is React 18/19[18], but early React 19 / Next.js 15 users hit install-time errors on older releases[19]; pin ≥0.9.
  • rc-dock — peer dep is React ≥17[16]; the current 4.x line is still published as an alpha, the main maintenance flag against it.

golden-layout — historical context

golden-layout is the ancestor everything here imitates and, at ⭐ 6.7k, still the most-starred[22] — but it is not a 2026 choice for React. v2 deliberately dropped React support during its TypeScript rewrite and its own docs tell React developers to use FlexLayout instead[6]. Its last release was September 2022[22], and community wrappers are stale. HN consensus mirrors this: v2 "drops react support and has no documentation… it's not that great"[14]. Treat Dockview as its spiritual successor[23].

Recommendation by use case

Your situationPickWhy
Full VS Code / Visual Studio dock: tabs, tiling, float, popout, restore Dockview Only one covering every axis; agnostic core, best TS, active releases, MIT[8][2]
React-only app, want tab docking working this afternoon rc-dock Five-position drag docking + float + popup with minimal setup; watch the alpha status[5][16]
Trading terminal / admin cockpit; layout state is sacred; multi-monitor FlexLayout Cleanest serializable JSON model, popout windows, zero deps, MIT; golden-layout's own React pick[4][6]
Tiling dashboard, i3 vibe, minimal chrome; don't need popout windows react-mosaic Smallest bundle, cleanest JSON tree; v7 adds tabs but no floating/popout[3][28]
Need Vue/Angular too, or a vanilla-TS core shared across frameworks Dockview Only framework-agnostic option; wrappers for React, Vue, Angular, vanilla[2]
Just resizable split panes, no tabs/floating Not a dock manager Use react-resizable-panels or Allotment — far lighter[32][33]

Niche/edge options if the big four don't fit: react-dockable ⭐ 26 (small, dynamic dockable tabs)[37] and the aperturerobotics/flex-layout ⭐ 4 fork of FlexLayout (perf tweaks, OptimizedLayout)[38]. Neither is a mainstream bet.

Bottom line: default to Dockview; deviate only for the specific reasons above.

Citations · 40 sources

Click the Citations tab to load…