File Tree

Visualize directory and file structures using the DocstraFileTree component.

The DocstraFileTree component lets you display a visual file and folder hierarchy inside your MDX files.

Setup

First, import DocstraFileTree in your mdx-components.tsx file:

mdx-components.tsx
import { defaultMdxComponents } from 'docstra/mdx';
import { DocstraCodeBlock, DocstraFileTree } from 'docstra';
 
export function getMDXComponents() {
    return {
        ...defaultMdxComponents,
        code: DocstraCodeBlock,
        DocstraFileTree,
    };
}

Usage

There are two ways to define the file tree: using the data prop or using fromText.

Using `data` prop

Pass a structured array of file/folder nodes:

Example with data
<DocstraFileTree
    data={[
        {
            name: 'app',
            type: 'folder',
            children: [
                {
                    name: 'docs',
                    type: 'folder',
                    children: [{ name: 'page.tsx', type: 'file' }]
                }
            ]
        },
        {
            name: 'next.config.ts',
            type: 'file'
        }
    ]}
/>

Output

app

docs

page.tsx

next.config.ts

Using `fromText`

Pass a plain-text indented tree string for a quicker authoring experience:

Example with fromText
<DocstraFileTree
    fromText={`
app/
    docs/
        page.tsx
next.config.ts
`}
/>

Folders are denoted by a trailing /. Files are written normally.

Make sure your tab size is 4 spaces. Otherwise the tree will not render properly.

Props

Prop	Type	Description
`data`	`FileTreeNode[]`	A structured array of file/folder nodes
`fromText`	`string`	A plain-text indented string representing the tree

Only one of data or fromText should be provided at a time.

How is this guide?

Last updated on March 30, 2026

Code Block

Tables