File tree

Display directory structures as visual file trees using the FileTree component.

The <FileTree> component renders a nested markdown list as a visual directory tree, complete with file and folder icons. Use it to show project layouts, configuration structures, or any hierarchical file system.

Basic usage

Write a nested markdown list inside <FileTree>. Items ending with / become folders; all others are treated as files.

<FileTree>
- src/
  - pages/
    - index.astro
  - components/
    - Header.astro
    - Footer.astro
- astro.config.ts
- package.json
</FileTree>

Highlighting a file

Wrap a filename in **bold** to highlight it in accent color — useful for pointing out which file is being discussed.

<FileTree>
- src/
  - pages/
    - **[...slug].astro**
    - index.astro
- **astro.config.ts**
</FileTree>

Omitting content

Use ... as a list item to indicate that some entries have been left out for brevity.

<FileTree>
- content/
  - docs/
    - en/
      - getting-started/
        - installation.mdx
        - ...
    - fr/
    - ...
</FileTree>

Dustavez project structure

Here is the full structure of a fresh Dustavez project: