File Tree

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, Starlight, Fumadocs, and Prosefly 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.

file-tree.mdx

StarlightProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

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 · Steps · Callout.