# File Tree

Edit file and folder trees used in Astro and MDX documentation without changing repository files.

import ContentEditor from '@/components/editor/ContentEditor.astro';

Use Prosefly’s MDX component editor to edit illustrative file trees while keeping your Astro or MDX source files unchanged.

## Supported profiles

The same editor supports the [Astro](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

## Edit in Visual

Edit file and folder names in the tree. Use item menus to add or remove entries and arrange them under folders. Supported icon and comment controls depend on the profile.

Moving a tree item changes the documentation example. It does not move or rename the corresponding repository file.

<ContentEditor content="file-tree" />

## Source example

```mdx
import { FileTree } from '@astrojs/starlight/components';

## Documentation files

<FileTree>

- src/
  - content/
    - docs/
      - getting-started.mdx
- astro.config.mjs
- package.json

</FileTree>
```

## Profile differences

Starlight and Prosefly use FileTree with a nested Markdown list. Fumadocs uses Files, Folder, and File components. Preserve that nesting in Source; the editor’s folder expansion is separate from any supported published default-open setting.

Custom nodes and unsupported properties remain editable in Source. Preview the documentation page to check the final tree styling.

## Related MDX guides

Read next: [Card](/docs/editor/components/card/) · [Steps](/docs/editor/components/steps/) · [Callout](/docs/editor/components/callout/).