@blitzd/resizable-panels
  • Changelog
GitHub
four-panel · IDE demo
240px
Explorer
props
axis
horizontal
side
start
min
180px
max
360px
files

Each open file is a peer panel in the editors group — opening one makes room for it, closing one gives its space back.

app.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {
  Panel,
  PanelGroup,
} from "@blitzd/resizable-panels";

export function Editors({ files }) {
  return (
    <PanelGroup orientation="horizontal">
      {files.map((file) => (
        <Panel
          key={file.id}
          panelId={file.id}
          minSize={140}
        >
          <Editor file={file} />
        </Panel>
      ))}
    </PanelGroup>
  );
}
333px
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
# Editor splits

Every open file is a peer
<Panel> in one horizontal
PanelGroup.

- Open files from the Explorer;
  each mounts a new panel and
  the group makes room for it.
- Drag the seams to resize a
  split; 140px is the minimum.
- Close a split and the others
  reclaim its space.
333px
200px
Terminal
props
axis
vertical
side
end
min
100px
max
500px
360px
Inspector
props
axis
horizontal
side
end
min
280px
max
600px
persist
draggingresizing