Layout

ResizablePanels

Measured splitter layout that renders adjacent resize handles between panes and emits persisted layout state after pointer, keyboard, and collapse interactions.

import { ResizablePanels } from '@lostgradient/cinder/resizable-panels';
layoutsplitterpanels
01

Overview

Measured splitter layout for editor-style panes. The component keeps sizing state in pixels internally, exposes structured size payloads for persistence, and leaves storage up to the caller.

Usage

svelte 
<script lang="ts">
  import ResizablePanels from '@lostgradient/cinder/resizable-panels';
  import type { ResizablePanelDefinition } from '@lostgradient/cinder/resizable-panels';

  const panes: ResizablePanelDefinition[] = [
    {
      id: 'files',
      label: 'Files',
      defaultSize: { value: 25, unit: 'percent' },
      minSize: { value: 200, unit: 'px' },
    },
    { id: 'editor', label: 'Editor', defaultSize: { value: 50, unit: 'percent' } },
    {
      id: 'preview',
      label: 'Preview',
      defaultSize: { value: 25, unit: 'percent' },
      minSize: { value: 15, unit: 'percent' },
    },
  ];
</script>

<ResizablePanels {panes}>
  {#snippet children(pane)}
    <div>{pane.label}</div>
  {/snippet}
</ResizablePanels>
Live preview
02

When to use

Use when
  • Building editor, inspector, or dashboard layouts where neighboring panes must be resized directly by dragging a separator.
  • Persisting a multi-pane workspace layout without coupling the component to localStorage.
Avoid when
  • You only need a static two-column or stack layout with no interactive resizing.
  • Content should wrap naturally instead of claiming a fixed share of a measured container.
03

Examples

Basic horizontal layout

Two panes with a draggable separator and persisted layout payloads.

Double-click collapse

Double-click the handle to collapse or restore the leading pane.

Nested panes

Compose outer and inner splitters without cross-talk.

Vertical layout

Stack panes and resize them along the block axis.

04

Props

Props for resizable-panels
NameTypeDefaultDescription
panes required ResizablePanelDefinition[]
orientation 'horizontal' | 'vertical' 'horizontal'
keyboardStep { value: number; unit: ResizablePanelSizeUnit; }
snapThreshold { value: number; unit: ResizablePanelSizeUnit; } {"value":8,"unit":"px"}
collapseOnDoubleClick boolean false
collapseTarget 'leading''trailing''nearest-collapsible' 'nearest-collapsible'
onLayoutChange (event: ResizablePanelsResizeEvent) => void
onLayoutCommit (event: ResizablePanelsResizeEvent) => void
children required snippet