File Tree

The File Tree component renders a hierarchical structure from a plain ASCII tree block — no nested directives needed. Write it the way you would in a README; the component parses the box-drawing characters into a collapsible, interactive tree.

Basic Usage

::::tree
src/
├─ App.tsx
├─ index.tsx
└─ components/
│  ├─ Button.tsx
│  └─ Card.tsx
::::

Render as:

Folders (names ending in /) are collapsible — click the row or use the keyboard (←/→ collapse/expand, Enter/Space toggle).

Process Example

::::tree
build()
├─ loadPlugins → plugin.setup(build)        ← hooks registered
├─ onStart(config)                          ← validate
├─ for each MDX file:
│   ├── onLoad({filter})                    ← transform raw content
│   ├── transformFrontmatter()              ← mutate frontmatter
│   ├── compileMdx() ← remark / rehype      ← MDX pipeline
│   ├── injectHead() / injectBody()         ← inject HTML
│   └── transformHtml()                     ← final transform
├─ onEnd(config, pages)                     ← sitemap, RSS, etc.
└─ write output
::::

Render as:

Props

Notes

• Depth is derived from the │ pipes and leading spaces before the connector (├─ / └─); folder = name ending in /.
• The content is authored as plain text — box-drawing characters are preserved by the markdown parser.
• Everything inside ::::tree … :::: renders as one interactive tree.