How to Build a Fully Customizable IDE Layout System with React Components

Background

IDE layout system needs to integrate various functional view modules to provide a complete, easy‑to‑use development environment. Existing IDEs usually expose a fixed set of views that can be extended but not fully customized. KAITIAN aims to provide a powerful, extensible and customizable IDE foundation that can satisfy diverse layout requirements from different business units.

Design Approach

The original layout was built on Phosphor.js with a predefined set of views and slots. Configuration‑only customization became heavy as more integrations required different layouts, so the system is being refactored. The new design opens the previously predefined layout implementation, allowing integrators to define their own layout through three abstractions: LayoutComponent (template), LayoutConfig (mapping), and SlotRenderer (rendering).

Core Components

BoxPanel : a simple Flex container supporting different directions.

SplitPanel : extends BoxPanel with mouse‑draggable resize and min/max size constraints.

Accordion : a collapsible multi‑view panel built on SplitPanel.

TabBar : manages multiple tabs, supports activation, collapse, drag‑and‑drop, context menus, and state persistence.

TabPanel : renders the view associated with the active tab.

Example JSX for composing a layout:

<BoxPanel direction="top-to-bottom">
  <SlotRenderer slot="top" />
  <SplitPanel overflow="hidden" id="main-horizontal" flex={1}>
    <SlotRenderer slot="left" defaultSize={310} minResize={204} minSize={49} />
    <SplitPanel id="main-vertical" minResize={300} flexGrow={1} direction="top-to-bottom">
      <SlotRenderer flex={2} flexGrow={1} minResize={200} slot="main" />
      <SlotRenderer flex={1} minResize={160} slot="bottom" />
    </SplitPanel>
    <SlotRenderer slot="right" defaultSize={310} minResize={200} minSize={41} />
  </SplitPanel>
  <SlotRenderer slot="statusBar" />
</BoxPanel>

The SlotRenderer maps one or more view components to a slot. The default renderer renders components sequentially, while more advanced renderers provide tab management, drag‑and‑drop, context menus, and state persistence. Implementations such as LeftTabbarRenderer, LeftTabPanelRenderer, and the registration of slot renderers illustrate how to assemble the full layout.

Conclusion

With this three‑layer abstraction, the IDE layout can be fully customized for various products like CloudIDE, Alipay Mini‑Program IDE, and DEF IDE, while keeping integration cost low. Future work will expose higher‑level layout customization through the KAITIAN plugin system.