Split UI

Persistent Panel Positions

Panel positions are automatically persisted to localStorage when you provide persistenceId props. This enables panel states to survive page refreshes and sync across browser tabs.

Basic Persistence#

Resize the panels then reload this page.

Left PanelDrag to resize →Position persisted!
Main ContentFlexible widthTry resizing and refreshing!
Right Panel← Drag to resizeSynchronized across instances!
import { Panel, Resizer } from '@split-ui/react';

export default function PersistenceDemo() {
  return (
    <Panel group persistenceId="persistence-demo">
      <Panel initialSize="200px" minSize="100px" className="demo-panel">
        Left Panel
        <small>Drag to resize →</small>
        <small>Position persisted!</small>
      </Panel>
      <Resizer />
      <Panel className="demo-panel">
        Main Content
        <small>Flexible width</small>
        <small>Try resizing and refreshing!</small>
      </Panel>
      <Resizer />
      <Panel initialSize="150px" maxSize="300px" className="demo-panel">
        Right Panel
        <small>← Drag to resize</small>
        <small>Synchronized across instances!</small>
      </Panel>
    </Panel>
  );
}

Synchronized Instances#

The same demo rendered twice to demonstrate real-time synchronization across instances:

Left PanelDrag to resize →Position persisted!
Main ContentFlexible widthTry resizing and refreshing!
Right Panel← Drag to resizeSynchronized across instances!