React · UI Layout · 2026 Adoption Brief
Splitters & dockable panes in React: which libraries to adopt
Two different needs, two different libraries. A splitter for the app shell; a docking layer on top only if users need to rearrange the workspace itself. They aren't competitors — they answer different questions.
The verdict
Unstyled, zero-dependency, TypeScript-first — the de-facto standard for fixed side-by-side splits with draggable dividers.[1]
Which problem are you actually solving?
"A grid next to a form."
Splitter problem"Drag the form into a tab beside the grid, then tear it into its own OS window."
Docking problemTwo-tier recommendation matrix
Framework-agnostic core; tabs, groups, grid/splitview, drag-dock, floating groups, popout windows — closest modern successor to golden-layout.[2]
Watch — open StrictMode double-render under React 19.[7]
Fastest drop-in five-way tab docking in a React-only app; float boxes, popup-to-window, saveLayout/loadLayout.[16]
Scope — React-only.
Clean serializable JSON tree + multi-monitor popouts; golden-layout's official React recommendation.[18]
Scope — React-only.
i3-style tiling dashboards — and, new in v7, an n-ary tree with first-class tab-stacking.[6]
Note — v7 invalidates the old "mosaic can't tab-stack" lore.
2026 — the year of breaking majors
Both winners are zero-dependency and TypeScript-first — and both shipped disruptive rewrites the tutorials haven't caught up to. Pin versions and read the changelog, not the blog posts.
The persistence seam — where the tiers diverge, and where it bites
Splitter
Serializes a plain array of sizes. Set autoSaveId, swap the storage prop for where it lives, done.[8]
- Version-stamped layouts
- Unknown-panel pruning
- A
try/catchfallback to a default layout
Hosting the actual grids & forms — where naive setups break
The flex chain
A grid only fills a resizing pane if every ancestor in the flex chain has min-height: 0.[11]
Let the grid resize itself
Prefer AG Grid flex columns over calling sizeColumnsToFit on every resize event.[12]
The sharpest trap
Dockview's default onlyWhenVisible renderer removes hidden panels from the DOM — switching tabs unmounts your form and loses its state. Fix with renderer: 'always' or lift form state out of the pane tree.[13]
not six
The open question isn't which library.
It's where user-controlled layout stops paying for itself. Every docking feature you enable — float, popout, tab-stack — multiplies the persistence and unmount edge cases. Start with fixed splits; add docking only for the screens that genuinely earn it.
The four angles
The default pick for app-shell splits; reach for Allotment only for VS Code look-and-feel with snapping.
ExpeditionDockview is the default modern pick for VS Code-style pane docking; three real alternatives fit narrower cases.
SurveyHow each library serializes layouts, where to persist them, and how to survive a saved layout that references a deleted panel.
SurveyPer-library patterns and pitfalls for AG Grid / TanStack Table and forms in resizable and dockable panes without layout thrash or lost state.