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)
├─ onStart(config)
├─ for each MDX file:
│   ├── onLoad({filter})
│   ├── transformFrontmatter()
│   ├── compileMdx()
│   ├── injectHead() / injectBody()
│   └── transformHtml()
├─ onEnd(config, pages)
└─ 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.