React Resizable Panels

react-resizable-panels gives React applications a Group/Panel/Separator primitive for building resizable split-pane layouts — code editors, dashboards, admin panels, and file browsers with adjustable columns. Panels register with a shared per-group store that computes flex-based sizing from ResizeObserver measurements, so layouts stay correct across window resizes, conditional panel mounting, and nested groups without manual pixel math.

Built by Brian Vaughn (formerly of the React core team), the library ships draggable separators with full keyboard support, persisted layouts via a pluggable storage interface, collapsible panels with expand/collapse callbacks, and first-class server-side rendering — a common pain point for percentage-based layout libraries. It has no runtime dependencies beyond React itself and includes official integration examples for Next.js, Vite, and Vike.

What You Get

• Group, Panel, and Separator components composing into horizontal or vertical resizable layouts, including nested groups
• Draggable separators with full keyboard support (arrow keys, Home/End) and correct ARIA attributes for accessibility
• Panel size constraints in percent, pixels, em, rem, vh, or vw, plus collapsible panels with expand/collapse callbacks
• A pluggable LayoutStorage interface for persisting and restoring panel layouts (e.g. to localStorage) across sessions
• Server-side rendering support that avoids the layout-shift problems common to percentage-based split-pane libraries
• Imperative handles (useGroupRef, usePanelRef) for programmatic resize, collapse, and expand control outside of props

Common Use Cases

• Code editor and IDE-style layouts with resizable file trees, editor panes, and terminal/output panels
• Admin dashboards and data tools where users adjust the width of a sidebar, table, or detail panel
• Documentation or reference sites with a resizable navigation sidebar next to scrollable content
• Multi-pane comparison views (diff viewers, before/after previews) where panel proportions need to be user-adjustable

Under The Hood

Architecture — The library centers on a single global, per-document mutable store (lib/global/mutable-state/groups.ts, mountGroup.ts) rather than React state for hot-path layout data. Each Group registers its DOM element with a shared ResizeObserver on mount (mountGroup.ts); the observer recalculates panel constraints and a flex-grow-based layout whenever the group or a panel resizes, then pushes updates to subscribers via useSyncExternalStore. Drag interactions are handled by document-level pointer/keyboard listeners (global/event-handlers/) that compute hit-regions between separators and adjacent panels (calculateHitRegions.ts) and adjust layout deltas (adjustLayoutForSeparator.ts) without triggering React re-renders until a frame is due. This keeps dragging performant even with many panels, at the cost of a more complex mental model than a typical prop-driven React component.

Tech Stack — Pure TypeScript with React 18/19 as a peer dependency and zero runtime dependencies; builds with Vite (vite-plugin-dts for type declarations) targeting both CJS and ESM outputs (dist/react-resizable-panels.cjs / .js). The docs/demo site in src/ uses Tailwind CSS v4, Zustand, and React Router, but none of that ships in the published package. Official framework integrations for Next.js, Vite, and Vike live under integrations/ with their own Playwright end-to-end test suites.

Code Quality — 29 .test.ts/.test.tsx files (roughly 330 individual test cases) cover the core layout math (calculateDefaultLayout, validatePanelGroupLayout, adjustLayoutByDelta), DOM geometry helpers, and component behavior via Vitest and Testing Library. Code is organized into clear components/, global/, hooks/, and utils/ layers with small, single-purpose files, consistent TypeScript typing throughout, and an internal assert() helper used to fail loudly on invariant violations (e.g. duplicate panel ids) rather than degrade silently.

API Design — The public surface is intentionally small: three components plus a handful of hooks (useGroupRef, usePanelRef, useDefaultLayout, useGroupCallbackRef, usePanelCallbackRef) and typed callbacks (onLayoutChange, onResize). Size props accept plain numbers or unit-suffixed strings ("33%", "200px", "50vh") rather than requiring separate props per unit, and every rendered element carries a data-testid for easy testing. The one area with real learning cost is the global-store architecture: it’s invisible in simple layouts but surfaces once consumers reach for imperative handles or custom layout persistence.