Octri

FileTree

A file tree draws a directory layout, such as what an SDK package contains or where a config file goes. It shows the text exactly as you type it, in a fixed-width box, so the indentation lines up.

Example

src/
  client.ts
  methods/
    users.ts
    invoices.ts
README.md
package.json
mdx
<FileTree>
src/
  client.ts
  methods/
    users.ts
    invoices.ts
README.md
package.json
</FileTree>

Props

childrentextrequired

The layout, one entry per line between the tags. Nothing is parsed: indent an entry to show it's inside the folder above, and end a folder's name with / so readers can tell it from a file.

Rules

  • No blank lines inside the tags. A blank line ends the block, and the rest spills out as text.
  • Not a Markdown list. Write plain lines. A list inside the tags is read as a list, not a tree.
  • Spaces, not tabs. A tab's width depends on the browser, so a tree indented with tabs can come out uneven. Two spaces per level is the usual indent.