File tree
The sidebar as an editor for pages, folders and meta.json
FileTree shows the synced directory like a Fumadocs sidebar, and lets you
create, delete and reorder pages. Every change is written to disk, so the
site's navigation follows.
import { useState } from "react";
import { FileTree, MdxEditor, useWorkspace } from "@fumadocs-editor/ui";
export function Workspace() {
const [path, setPath] = useState("index.mdx");
const { tree, run } = useWorkspace();
return (
<div style={{ display: "flex", gap: 16 }}>
{tree && <FileTree tree={tree} run={run} active={path} onSelect={setPath} />}
<MdxEditor sync={{ path }} />
</div>
);
}
useWorkspace shares the editors' connection. If you created your own
sync client, pass it as useWorkspace({ client }).
What it edits
| Action | On disk |
|---|---|
| New page | <slug>.mdx with a frontmatter title |
| New folder | <slug>/meta.json and <slug>/index.mdx |
| Reorder | the folder's pages in meta.json |
| Delete | the file, and its pages entry |
- A name typed as
Guides/Getting startednests: it createsguides/getting-started.mdx. - A folder without a
meta.json, or whosepagesends in..., lists new pages automatically.
Keyboard
| Keys | Does |
|---|---|
↑ ↓ Home End | Move between rows |
← → | Close or open a folder |
Alt+↑ Alt+↓ | Move the row within its folder |
Enter / Escape | Create or cancel a new row |
On touch screens, drag rows by their grip.
Props
Prop
Type
Permissions
The tree only lists the pages a user may read, and refuses changes they may not write.
Last updated on