Resizable Split Panes
Drag the divider, and the layout remembers where you left it.
IntermediateWeb appUI component10–20hAI-buildable 4/5no setup
Nested resizable panes with draggable dividers, minimum sizes, collapse-to-edge, and persisted layout. The recursive nesting is what makes it interesting — a pane can itself contain a split, and the sizing maths has to hold at every level.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Horizontal and vertical splits with draggable dividers
- Splits nest, so a pane can contain another split
- Minimum sizes are respected during drag
- Double-clicking a divider collapses or restores a pane
- Layout persists across reloads
- Dividers are keyboard operable with arrow keys
- Resizing the window redistributes space proportionally
The interesting part
- Recursive size calculation that stays stable through nesting
- Preventing text selection during a divider drag
- Proportional redistribution when minimums conflict with available space
Once it works
- Add drag-to-reorder panes
- Add saved layout presets
- Add a maximise-one-pane mode
Suggested stack
reacttypescripttailwindlocalstorage