elementsresizable

Resizable

Resizable panel layout with draggable dividers and keyboard support.

Import#

import { Resizable } from 'moraine'

Slot Structure#

Panels separated by interactive dividers with optional handle and intersection targets.

root
├── panel (×n)
└── divider (between panels)
    ├── cross-target (optional, intersection start)
    ├── handle (optional)
    └── cross-target (optional, intersection end)

Examples#

Basic Horizontal#

Two panels with auto-inserted divider and root-level handle rendering.

1
function BasicHorizontal() {
2
  function createPanel(title: string, description: string, tone: string) {
3
    return (
4
      <div class={`p-4 h-full ${tone}`}>
5
        <p class="text-sm text-foreground font-semibold">{title}</p>
6
        <p class="text-xs text-muted-foreground mt-1">{description}</p>
7
      </div>
8
    )
9
  }
10

11
  return (
12
    <div class="b-1 b-border border-border rounded-xl h-52 overflow-hidden">
13
      <Resizable
14
        handle
15
        panels={[
16
          {
17
            defaultSize: '40%',
18
            min: '20%',
19
            content: createPanel('Navigation', 'Left panel can shrink to 20%.', 'bg-muted'),
20
          },
21
          {
22
            defaultSize: '60%',
23
            min: '30%',
24
            content: createPanel(
25
              'Content',
26
              'Right panel keeps enough width for details.',
27
              'bg-background',
28
            ),
29
          },
30
        ]}
31
      />
32
    </div>
33
  )
34
}

Controlled Sizes#

Use panel.size + onResize to sync external state. The callback now returns pixel sizes.

1
function ControlledSizes() {
2
  function formatPixelSizes(sizes: number[]): string {
3
    return sizes.map((size) => `${Math.round(size)}px`).join(' / ')
4
  }
5

6
  const [controlledPanels, setControlledPanels] = createStore([
7
    {
8
      size: 360,
9
      min: '20%' as const,
10
      content: createPanel(
11
        'Logs',
12
        'Drag or use arrow keys to rebalance with px callbacks.',
13
        'bg-muted',
14
      ),
15
    },
16
    {
17
      size: 640,
18
      min: '25%' as const,
19
      content: createPanel(
20
        'Preview',
21
        'The external store writes callback px values back into panel.size.',
22
        'bg-background',
23
      ),
24
    },
25
  ])
26

27
  const controlledSizes = createMemo(() =>
28
    controlledPanels.map((panel) => (typeof panel.size === 'number' ? panel.size : 0)),
29
  )
30

31
  function handleControlledResize(nextSizes: number[]): void {
32
    nextSizes.forEach((nextSize, index) => {
33
      if (Number.isFinite(nextSize)) {
34
        setControlledPanels(index, 'size', nextSize)
35
      }
36
    })
37
  }
38

39
  function createPanel(title: string, description: string, tone: string) {
40
    return (
41
      <div class={`p-4 h-full ${tone}`}>
42
        <p class="text-sm text-foreground font-semibold">{title}</p>
43
        <p class="text-xs text-muted-foreground mt-1">{description}</p>
44
      </div>
45
    )
46
  }
47

48
  return (
49
    <div class="space-y-3">
50
      <div class="b-1 b-border border-border rounded-xl h-48 overflow-hidden">
51
        <Resizable handle onResize={handleControlledResize} panels={controlledPanels} />
52
      </div>
53
      <p class="text-xs text-muted-foreground">
54
        Current sizes: {formatPixelSizes(controlledSizes())}
55
      </p>
56
    </div>
57
  )
58
}

Vertical + Disable#

The root disable prop keeps dividers visible while turning off drag and keyboard resizing.

1
function VerticalDisable() {
2
  function createPanel(title: string, description: string, tone: string) {
3
    return (
4
      <div class={`p-4 h-full ${tone}`}>
5
        <p class="text-sm text-foreground font-semibold">{title}</p>
6
        <p class="text-xs text-muted-foreground mt-1">{description}</p>
7
      </div>
8
    )
9
  }
10

11
  return (
12
    <div class="gap-4 grid md:grid-cols-2">
13
      <div class="space-y-2">
14
        <p class="text-xs text-muted-foreground">
15
          <code>disable: false</code>
16
        </p>
17
        <div class="b-1 b-border border-border rounded-xl h-72 overflow-hidden">
18
          <Resizable
19
            orientation="vertical"
20
            handle
21
            classes={{ divider: 'bg-accent/80' }}
22
            panels={[
23
              {
24
                defaultSize: '33%',
25
                content: createPanel(
26
                  'Top',
27
                  'Interactive vertical divider between top and middle.',
28
                  'bg-muted',
29
                ),
30
              },
31
              {
32
                defaultSize: '34%',
33
                min: '30%',
34
                content: createPanel(
35
                  'Middle',
36
                  'All dividers remain present because handle settings live on the root now.',
37
                  'bg-background',
38
                ),
39
              },
40
              {
41
                defaultSize: '33%',
42
                content: createPanel('Bottom', 'Last panel in the vertical stack.', 'bg-muted'),
43
              },
44
            ]}
45
          />
46
        </div>
47
      </div>
48

49
      <div class="space-y-2">
50
        <p class="text-xs text-muted-foreground">
51
          <code>disable: true</code>
52
        </p>
53
        <div class="b-1 b-border border-border rounded-xl h-72 overflow-hidden">
54
          <Resizable
55
            disable
56
            orientation="vertical"
57
            handle
58
            classes={{ divider: 'bg-accent/80 opacity-80' }}
59
            panels={[
60
              {
61
                defaultSize: '33%',
62
                content: createPanel(
63
                  'Top',
64
                  'Divider stays visible but is not interactive.',
65
                  'bg-muted',
66
                ),
67
              },
68
              {
69
                defaultSize: '34%',
70
                content: createPanel(
71
                  'Middle',
72
                  'Keyboard and pointer resizing are both disabled.',
73
                  'bg-background',
74
                ),
75
              },
76
              {
77
                defaultSize: '33%',
78
                content: createPanel('Bottom', 'Useful for read-only layouts.', 'bg-muted'),
79
              },
80
            ]}
81
          />
82
        </div>
83
      </div>
84
    </div>
85
  )
86
}

Nested Panels#

Use the root intersection prop to control whether crossed dividers become draggable.

1
function NestedPanels() {
2
  function createPanel(title: string, description: string, tone: string) {
3
    return (
4
      <div class={`p-4 h-full ${tone}`}>
5
        <p class="text-sm text-foreground font-semibold">{title}</p>
6
        <p class="text-xs text-muted-foreground mt-1">{description}</p>
7
      </div>
8
    )
9
  }
10

11
  return (
12
    <div class="gap-4 grid md:grid-cols-2">
13
      <div class="space-y-2">
14
        <p class="text-xs text-muted-foreground">
15
          <code>intersection: true</code>
16
        </p>
17
        <div class="b-1 b-border border-border rounded-xl h-72 overflow-hidden">
18
          <Resizable
19
            handle
20
            intersection
21
            panels={[
22
              {
23
                defaultSize: '32%',
24
                min: '20%',
25
                content: createPanel(
26
                  'Sidebar',
27
                  'Outer divider can intersect with the nested group.',
28
                  'bg-muted',
29
                ),
30
              },
31
              {
32
                defaultSize: '68%',
33
                min: '35%',
34
                content: (
35
                  <Resizable
36
                    orientation="vertical"
37
                    handle
38
                    intersection
39
                    panels={[
40
                      {
41
                        defaultSize: '50%',
42
                        min: '25%',
43
                        content: createPanel('Editor', 'Nested top panel.', 'bg-background'),
44
                      },
45
                      {
46
                        defaultSize: '50%',
47
                        min: '20%',
48
                        content: createPanel(
49
                          'Console',
50
                          'Nested bottom panel with cross drag enabled.',
51
                          'bg-muted/50',
52
                        ),
53
                      },
54
                    ]}
55
                  />
56
                ),
57
              },
58
              {
59
                defaultSize: '32%',
60
                min: '20%',
61
                content: createPanel(
62
                  'Sidebar',
63
                  'Outer divider can intersect with the nested group.',
64
                  'bg-muted',
65
                ),
66
              },
67
            ]}
68
          />
69
        </div>
70
      </div>
71

72
      <div class="space-y-2">
73
        <p class="text-xs text-muted-foreground">
74
          <code>intersection: false</code>
75
        </p>
76
        <div class="b-1 b-border border-border rounded-xl h-72 overflow-hidden">
77
          <Resizable
78
            handle
79
            intersection={false}
80
            panels={[
81
              {
82
                defaultSize: '68%',
83
                min: '35%',
84
                content: (
85
                  <Resizable
86
                    orientation="vertical"
87
                    handleRender={() => <Icon name="i-lucide:activity" />}
88
                    intersection={false}
89
                    panels={[
90
                      {
91
                        defaultSize: '50%',
92
                        min: '25%',
93
                        content: createPanel('Editor', 'Nested top panel.', 'bg-background'),
94
                      },
95
                      {
96
                        defaultSize: '50%',
97
                        min: '20%',
98
                        content: createPanel(
99
                          'Console',
100
                          'Nested bottom panel with cross drag disabled.',
101
                          'bg-muted/50',
102
                        ),
103
                      },
104
                    ]}
105
                  />
106
                ),
107
              },
108
              {
109
                defaultSize: '32%',
110
                min: '20%',
111
                content: createPanel(
112
                  'Inspector',
113
                  'Comparison panel for nested intersection behavior.',
114
                  'bg-muted',
115
                ),
116
              },
117
            ]}
118
          />
119
        </div>
120
      </div>
121
    </div>
122
  )
123
}

Collapsible + Collapsible Min#

Clicking handle toggles collapse/expand while dragging divider still resizes. The collapsibleMin rail remains visible in collapsed state.

1
function CollapsibleCollapsibleMin() {
2
  function createPanel(title: string, description: string, tone: string) {
3
    return (
4
      <div class={`p-4 h-full ${tone}`}>
5
        <p class="text-sm text-foreground font-semibold">{title}</p>
6
        <p class="text-xs text-muted-foreground mt-1">{description}</p>
7
      </div>
8
    )
9
  }
10

11
  const [externalSizes, setExternalSizes] = createSignal<[number, number]>([320, 680])
12

13
  const externalPixelSizes = createMemo(() => formatPixelSizes(externalSizes()))
14

15
  function handleExternalResize(nextSizes: number[]): void {
16
    const sidebarSize = nextSizes[0]!
17
    const contentSize = nextSizes[1]!
18
    if (!Number.isFinite(sidebarSize) || !Number.isFinite(contentSize)) {
19
      return
20
    }
21

22
    setExternalSizes([sidebarSize, contentSize])
23
  }
24

25
  function formatPixelSizes(sizes: number[]): string {
26
    return sizes.map((size) => `${Math.round(size)}px`).join(' / ')
27
  }
28

29
  return (
30
    <div class="space-y-4">
31
      <div class="b-1 b-border border-border rounded-xl h-56 overflow-hidden">
32
        <Resizable
33
          handleAction="collapse"
34
          handleRender={(state) => (
35
            <Icon name={state.collapsed ? 'i-lucide:align-justify' : 'i-lucide:align-left'} />
36
          )}
37
          onResize={handleExternalResize}
38
          classes={{
39
            divider:
40
              'w-[6px] rounded-full bg-accent/45 transition-colors duration-200 hover:bg-accent/45 data-dragging:bg-primary/70',
41
          }}
42
          panels={[
43
            {
44
              size: externalSizes()[0],
45
              min: '16%',
46
              collapsible: true,
47
              collapsibleMin: '10%',
48
              content: createPanel(
49
                'Sidebar',
50
                'Click the handle to collapse/expand. Drag the divider to resize.',
51
                'bg-muted',
52
              ),
53
            },
54
            {
55
              size: externalSizes()[1],
56
              min: '24%',
57
              content: createPanel(
58
                'Editor',
59
                'Dragging still works and keeps controlled px sizes in sync.',
60
                'bg-background',
61
              ),
62
            },
63
          ]}
64
        />
65
      </div>
66

67
      <p class="text-xs text-muted-foreground">
68
        Try: click handle to toggle, drag divider to resize.
69
      </p>
70
      <p class="text-xs text-muted-foreground">Current sizes: {externalPixelSizes()}</p>
71
    </div>
72
  )
73
}

API Reference#

Attributes#

Slotroot2 attributes

Layout container that owns resizable panels and handles.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.
data-resizable-root	State or slot attribute exposed for styling hooks and selectors.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`ResizableT.Classes \| undefined`	—	—
disable	`boolean \| undefined`	`false`	Whether the resizable component is disabled.
handle	`boolean \| undefined`	`true`	Whether to render handles between panels.
handleAction	`"resize" \| "collapse" \| undefined`	`resize`	Handle interaction behavior. - `resize`: handle area follows divider resize interactions. - `collapse`: handle click toggles the nearest collapsible panel.
handleRender	`ComponentOrElement<ResizableT.HandleRenderProps> \| undefined`	—	Custom component rendered inside each handle.
id	`string \| undefined`	—	Unique identifier for the resizable root.
intersection	`boolean \| undefined`	`false`	Whether to use intersection-based handle sizing.
keyboardDelta	`ResizableSize \| undefined`	`10%`	The amount to resize when using keyboard shortcuts.
onHandleKeyDown	`((context: { event: KeyboardEvent; handleIndex: number; sizes: number[]; }) => void) \| undefined`	—	Callback when a key is pressed on a handle.
onResize	`((sizes: number[]) => void) \| undefined`	—	Callback when any panel is resized.
onResizeEnd	`((sizes: number[]) => void) \| undefined`	—	Callback when a resize operation ends.
onResizeStart	`((sizes: number[]) => void) \| undefined`	—	Callback when a resize operation starts.
orientation	`"horizontal" \| "vertical" \| undefined`	—	—
panels	`ResizableT.Item[] \| undefined`	—	Array of panels to render.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`ResizableT.Styles \| undefined`	—	—

Items#

Prop	Type	Default	Description
class	`string \| undefined`	—	Additional CSS classes for the panel.
collapsible	`boolean \| undefined`	`false`	Whether the panel is collapsible. This prop is reactive; toggling `true/false` can be used as a simple collapse signal.
collapsibleMin	`ResizableSize \| undefined`	`0`	Size of the panel when collapsed. Only works when `collapsible` is true. - Use string as percent, like `20%` - Use number as px, like `328`
content	`JSX.Element`	—	Content to render inside the panel.
defaultSize	`ResizableSize \| undefined`	—	Default size of the panel (uncontrolled). - Use string as percent, like `20%` - Use number as px, like `328`
max	`ResizableSize \| undefined`	`1`	Maximum size of the panel. - Use string as percent, like `20%` - Use number as px, like `328`
min	`ResizableSize \| undefined`	`0`	Minimum size of the panel. - Use string as percent, like `20%` - Use number as px, like `328`
onCollapse	`((size: number) => void) \| undefined`	—	Callback when the panel is collapsed.
onExpand	`((size: number) => void) \| undefined`	—	Callback when the panel is expanded.
onResize	`((size: number) => void) \| undefined`	—	Callback when the panel is resized.
panelId	`string \| undefined`	—	Unique identifier for the panel.
resizable	`boolean \| undefined`	`true`	Whether the panel is resizable.
size	`ResizableSize \| undefined`	—	Current size of the panel (controlled). - Use string as percent, like `20%` - Use number as px, like `328`
style	`JSX.CSSProperties \| undefined`	—	Additional CSS styles for the panel.