Reading and restoring a panel layout

Apps often save the user's panel sizes and restore them later. The group reports its layout as an object keyed by panel id.

All react-resizable-panels examples react-resizable-panels: usage and stats

Reading and restoring a panel layout: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Start from a saved layout. defaultLayout gives the starting percentage for each panel id: 20, 50 and 30. [1]
Listen for finished changes. onLayoutChanged stores the new layout in state, and the box above the panels prints it as JSON. [1]
Keep panel ids stable. Each Panel has an id; those ids are the keys of the layout object. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useState } from 'react';
import { Group, Panel, Separator } from 'react-resizable-panels';

const pane = (bg) => ({ height: '100%', background: bg, color: '#f1f1f1', display: 'grid',
  placeItems: 'center', font: '14px system-ui, sans-serif', borderRadius: 8 });
const saved = { nav: 20, main: 50, aside: 30 };
const bar = { width: 8, background: '#2c303a', borderRadius: 4 };
const fmt = l => Object.entries(l).map(([k, v]) => k + ': ' + v.toFixed(1) + '%').join('   ');

export default function App() {
  const [layout, setLayout] = useState(saved);
  return (
    <div style={{ width: 560, margin: '24px auto', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ marginBottom: 10, padding: '8px 12px', borderRadius: 8, background: '#1e1f26',
        color: '#e5e7eb', fontFamily: 'monospace', fontSize: 14 }}>{fmt(layout)}</div>
      <div style={{ height: 260, padding: 8, boxSizing: 'border-box', background: '#1b1d23', borderRadius: 12 }}>
        <Group style={{ height: '100%' }} defaultLayout={saved} onLayoutChanged={l => setLayout(l)}>
          <Panel id="nav"><div style={pane('#264653')}>nav</div></Panel>
          <Separator style={bar} />
          <Panel id="main"><div style={pane('#2a3d66')}>main</div></Panel>
          <Separator style={bar} />
          <Panel id="aside"><div style={pane('#5b3758')}>aside</div></Panel>
        </Group>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Drag a bar and release it; the JSON line shows the new sizes. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-resizable-panels 4.14.4, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More react-resizable-panels examples

Horizontal resizable panels with react-resizable-panels Vertical and nested panel groups Collapsible panels in react-resizable-panels Size limits and resize events

Sources

react-resizable-panels README (GitHub)

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with react-resizable-panels? Ask AgentGid →