Get started →

    IDE Window

    The <IDEWindow> component wraps code in an editor-style window with file tabs in the title bar. Built on top of DesktopWindow.

    Single file

    Pass a code string via the code prop:

    Code

    import { IDEWindow } from '@theme'

<IDEWindow
  files={[{ name: 'ciderpress.config.ts', active: true }]}
  lang="ts"
  code={
    "import { defineConfig } from 'ciderpress'\n\nexport default defineConfig({\n  title: 'My Docs',\n  description: 'A documentation site',\n  sections: [\n    {\n      title: 'Getting Started',\n      path: '/getting-started',\n      include: 'docs/getting-started/*.md',\n    },\n  ],\n})"
  }
/>

    Output

    ciderpress.config.ts
    import { defineConfig } from 'ciderpress'

export default defineConfig({
  title: 'My Docs',
  description: 'A documentation site',
  sections: [
    {
      title: 'Getting Started',
      path: '/getting-started',
      include: 'docs/getting-started/*.md',
    },
  ],
})

    Multiple tabs

    Show multiple file tabs to indicate context. The active tab is visually highlighted:

    Code

    <IDEWindow
  files={[{ name: 'index.ts' }, { name: 'config.ts', active: true }, { name: 'types.ts' }]}
  lang="ts"
  code={"export const config = {\n  port: 3000,\n  host: 'localhost',\n}"}
/>

    Output

    index.tsconfig.tstypes.ts
    export const config = {
  port: 3000,
  host: 'localhost',
}

    With path-style filenames

    Use full paths for clarity in monorepo contexts:

    Code

    <IDEWindow
  files={[{ name: 'packages/lib/src/sync/index.ts', active: true }]}
  lang="ts"
  code={
    "import { resolveConfig } from './config'\nimport { generateSidebar } from './sidebar'\nimport { writeManifest } from './manifest'\n\nexport const sync = async (root: string) => {\n  const config = await resolveConfig(root)\n  const sidebar = generateSidebar(config.sections)\n  await writeManifest(root, sidebar)\n}"
  }
/>

    Output

    packages/lib/src/sync/index.ts
    import { resolveConfig } from './config'
import { generateSidebar } from './sidebar'
import { writeManifest } from './manifest'

export const sync = async (root: string) => {
  const config = await resolveConfig(root)
  const sidebar = generateSidebar(config.sections)
  await writeManifest(root, sidebar)
}

    JSON example

    Code

    <IDEWindow
  files={[{ name: 'package.json', active: true }]}
  lang="json"
  code={
    '{\n  "name": "@acme/docs",\n  "scripts": {\n    "dev": "ciderpress dev",\n    "build": "ciderpress build"\n  },\n  "dependencies": {\n    "ciderpress": "^0.2.4"\n  }\n}'
  }
/>

    Output

    package.json
    {
  "name": "@acme/docs",
  "scripts": {
    "dev": "ciderpress dev",
    "build": "ciderpress build"
  },
  "dependencies": {
    "ciderpress": "^0.2.4"
  }
}

    Props

    IDEWindow

    PropTypeRequiredDefaultDescription
    filesIDEFileTab[]yes—File tabs in the title bar
    codestringno—Code string to display
    langstringno—Language identifier (e.g. 'ts', 'json')
    childrenReactNodeno—Fallback content when code is not provided

    IDEFileTab

    PropTypeRequiredDefaultDescription
    namestringyes—Filename displayed in the tab
    activebooleannofalseWhether this tab is selected

    References