State Preservation

Keep React, form, and iframe state mounted while panels move.

State preservation is about the mounted runtime content inside a panel. Update each panel, then move it with the controls or by dragging the tab bar.

This is separate from layout persistence: no snapshot is being saved here. The panel keeps the same identity while Tilery changes its position.

const initialLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'react-panel',
      size: 34,
      tabs: [
        {
          id: 'react-counter',
          data: { title: 'React counter', kind: 'react' },
        },
      ],
    },
    {
      type: 'group',
      direction: 'vertical',
      size: 66,
      children: [
        {
          type: 'panel',
          id: 'form-panel',
          size: 50,
          tabs: [
            {
              id: 'draft-form',
              data: { title: 'Uncontrolled form', kind: 'form' },
            },
          ],
        },
        {
          type: 'panel',
          id: 'iframe-panel',
          size: 50,
          tabs: [
            {
              id: 'iframe-counter',
              data: { title: 'Iframe counter', kind: 'iframe' },
            },
          ],
        },
      ],
    },
  ],
};

const tileryRef = useRef<TileryController | null>(null);

const moveReactPanel = () => {
  tileryRef.current?.movePanel('react-panel', {
    splitPanel: 'form-panel',
    direction: 'right',
  });
};

const moveFormPanel = () => {
  tileryRef.current?.movePanel('form-panel', {
    splitPanel: 'iframe-panel',
    direction: 'right',
  });
};

const moveIframePanel = () => {
  tileryRef.current?.movePanel('iframe-panel', {
    splitPanel: 'react-panel',
    direction: 'left',
  });
};

<Tilery<TabData>
  ref={tileryRef as Ref<TileryController>}
  initialLayout={initialLayout}
  renderTabHeader={(tab) => <span>{tab.data.title}</span>}
  renderTabContent={renderContent}
/>

Concepts — See how stable tab content hosts preserve mounted state.
Layout Persistence — Save and restore serialized layout snapshots.

State Preservation

Related