File Tree

The File Tree component renders a fenced code block with the filetree language as an interactive tree. Write one entry per line and indent an entry to place it inside the entry above it. No connector characters are needed.

Basic usage

```filetree
my-app/
  src/
    App.tsx
    components/
      Button.tsx
      Card.tsx
  package.json
  README.md
```

Renders as:

Click a folder to collapse or expand it.

Indentation

• An entry indented further than the line above it becomes that line's child.
• An entry at the same indentation as an earlier entry becomes its sibling.
• Any width works, as long as children sit deeper than their parent. Two or four spaces are the usual choices. A tab counts as four spaces.
• Several entries without indentation are shown as separate top-level entries.

Folders and files

An entry is a folder when its name ends in / or when it has children. A folder with a trailing slash and no children shows as an empty folder. Files get an icon by type: code, JSON, Markdown, images, configuration and lock files.

```filetree
src/routes/
  +layout.svelte
  +page.svelte
  blog/
    +page.ts
    [slug]/
      +page.svelte
  drafts/
```

Notes on entries

Text after # or //, separated from the name by a space, is shown as a muted note beside the entry.

```filetree
docs/
  index.mdx          # home page
  docu.json          # site configuration
  getting-started/
    introduction.mdx
```

Label

The title is not shown on the page. Screen readers announce the tree as "File tree"; give it a more specific label with title="…", or with the filetree:title shorthand that code blocks also accept.

```filetree title="Build hooks"
build()
  loadPlugins → plugin.setup(build)
  onStart(config)
  for each MDX file
    onLoad({filter})
    compileMdx()
    transformHtml()
  onEnd(config, pages)
  write output
```

The tree also works for structures that are not files, such as this sequence of build steps:

Keyboard

The tree is a single tab stop. Once it has focus:

Legacy ::::tree directive

Earlier versions wrote the tree as a ::::tree directive with box-drawing connectors (├─, └─) and │ pipes. Its body goes through the markdown parser, which strips leading spaces, so the pipes had to carry the depth. The directive still renders with the same component; use the filetree fence for new content.