IDE Layout

VS Code-like layout with sidebar, editor, and terminal.

Use this layout for an editor-style shell with a sidebar, main editor, and terminal. Resize the sidebar and terminal, then move editor tabs to see which parts of the workspace are structural and which are document-like.

The first demo keeps the terminal inside the right-hand editor column. Drag the empty space in the Explorer tab bar to move the whole sidebar; dropping it on the bottom edge of the workspace creates the full-width bottom row shown in the second demo.

Explorer is modeled as non-closable app chrome, while the editor and terminal are ordinary tabbed panels inside nested groups.

const layout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'sidebar',
      size: 40,
      tabs: [
        {
          id: 'explorer',
          data: { title: 'Explorer', kind: 'explorer' },
          closable: false,
        },
      ],
    },
    {
      type: 'group',
      direction: 'vertical',
      size: 60,
      children: [
        {
          type: 'panel',
          id: 'editor',
          size: 60,
          tabs: [
            { id: 'index-ts', data: { title: 'index.ts', kind: 'editor' } },
            { id: 'app-tsx', data: { title: 'app.tsx', kind: 'editor' } },
          ],
        },
        {
          type: 'panel',
          id: 'terminal',
          size: 40,
          tabs: [
            {
              id: 'bash',
              data: { title: 'Terminal', kind: 'terminal' },
              closable: false,
            },
          ],
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent>
      {tab.data.kind === 'explorer' && (
        <div style={monoBlockStyle}>
          <div>src/</div>
          <div style={{ paddingLeft: 12 }}>index.ts</div>
          <div style={{ paddingLeft: 12 }}>app.tsx</div>
          <div>package.json</div>
        </div>
      )}
      {tab.data.kind === 'editor' && (
        <pre style={codeBlockStyle}>
          {`export function ${tab.data.title.replace(/\.\w+$/, '')}() {\n  return 'hello';\n}`}
        </pre>
      )}
      {tab.data.kind === 'terminal' && (
        <pre style={monoBlockStyle}>
          {'$ npm run dev\n> ready on http://localhost:3000'}
        </pre>
      )}
    </TabContent>
  )}
/>

const rootBottomRowLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'vertical',
  children: [
    {
      type: 'panel',
      id: 'editor',
      size: 40,
      tabs: [
        { id: 'index-ts', data: { title: 'index.ts', kind: 'editor' } },
        { id: 'app-tsx', data: { title: 'app.tsx', kind: 'editor' } },
      ],
    },
    {
      type: 'panel',
      id: 'terminal',
      size: 26.6666666667,
      tabs: [
        {
          id: 'bash',
          data: { title: 'Terminal', kind: 'terminal' },
          closable: false,
        },
      ],
    },
    {
      type: 'panel',
      id: 'sidebar',
      size: 33.3333333333,
      tabs: [
        {
          id: 'explorer',
          data: { title: 'Explorer', kind: 'explorer' },
          closable: false,
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent>
      {tab.data.kind === 'explorer' && (
        <div style={monoBlockStyle}>
          <div>src/</div>
          <div style={{ paddingLeft: 12 }}>index.ts</div>
          <div style={{ paddingLeft: 12 }}>app.tsx</div>
          <div>package.json</div>
        </div>
      )}
      {tab.data.kind === 'editor' && (
        <pre style={codeBlockStyle}>
          {`export function ${tab.data.title.replace(/\.\w+$/, '')}() {\n  return 'hello';\n}`}
        </pre>
      )}
      {tab.data.kind === 'terminal' && (
        <pre style={monoBlockStyle}>
          {'$ npm run dev\n> ready on http://localhost:3000'}
        </pre>
      )}
    </TabContent>
  )}
/>

Concepts — Learn how panels, tabs, and groups fit together.
Layouts & Snapshots — See the tree shape behind the IDE layout.

IDE Layout

Related