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