INTERACTIVE DEMOS

@dannysir/floating-components

VS Code-style panel layouts in one React component

A VS Code-style panel tree. Drag a panel header onto another panel to reorder, drag the borders to resize. Try the toolbar to split, add, or reset.

Selected: a

Size limits · ↔ width (W)

panel-a

Panel a

panel-b

Panel b

panel-c

Panel c

Tree state

{
  "type": "split",
  "direction": "horizontal",
  "size": 1,
  "children": [
    {
      "type": "panel",
      "id": "a",
      "size": 1,
      "componentKey": "a"
    },
    {
      "type": "split",
      "direction": "vertical",
      "size": 2,
      "children": [
        {
          "type": "panel",
          "id": "b",
          "size": 1,
          "componentKey": "b"
        },
        {
          "type": "panel",
          "id": "c",
          "size": 1,
          "componentKey": "c"
        }
      ]
    }
  ]
}

Activity log

16:30:53INITTree structure rendered