MdxEditor
Props, ref, parts and keyboard shortcuts
import { MdxEditor } from "@fumadocs-editor/ui";Props
Prop
Type
sync
See Sync.
Prop
Type
Ref
Prop
Type
Page variant
variant="page" makes the editor fill the page, with a sticky header and a
centered column. header adds your own controls to it. Studio
is built this way.
import { useState, type CSSProperties } from "react";
import { MdxEditor } from "@fumadocs-editor/ui";
export function Page({ path }: { path: string }) {
const [panel, setPanel] = useState(false);
return (
<div style={{ "--fde-page-inset": panel ? "18rem" : "0px" } as CSSProperties}>
<MdxEditor
variant="page"
header={{
start: (
<button type="button" onClick={() => setPanel(!panel)}>
Files
</button>
),
}}
sync={{ path }}
/>
{panel && (
<aside style={{ position: "fixed", top: "3.25rem", left: "0.75rem", width: "17rem" }} />
)}
</div>
);
}
| CSS variable | Default | Sets |
|---|---|---|
--fde-page-width | 52rem | the column width |
--fde-page-inset | 0px | space kept clear at the start, for a side panel |
Parts
MdxEditor shows one surface at a time with tabs to switch. For another
layout, compose the parts:
import { MdxEditor } from "@fumadocs-editor/ui";
export function SplitEditor({ path }: { path: string }) {
return (
<MdxEditor.Root sync={{ path }}>
<MdxEditor.Status />
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
<MdxEditor.Visual />
<MdxEditor.Source />
</div>
</MdxEditor.Root>
);
}
| Part | Renders |
|---|---|
MdxEditor.Root | nothing; owns the document, takes the props above |
MdxEditor.Visual | the WYSIWYG surface |
MdxEditor.Source | the MDX source |
MdxEditor.Status | the sync status and conflict buttons |
MdxEditor.Tabs | the Visual / MDX switch |
For fully custom surfaces, read the document with useSourceText,
useSyncStatus and useEditorMode inside MdxEditor.Root.
Keyboard
| Keys | Does |
|---|---|
⌘B ⌘I ⌘E ⌘⇧S | bold, italic, code, strikethrough |
→ at a line's end | stop the current formatting |
⌘. | open the block menu |
⌥↑ ⌥↓ | move the block |
Esc | select the component around the caret, then its parent |
⌘A | select the region, then wider, then everything |
Tab ⇧Tab | next or previous region of a component |
⌘Enter | add the next item (a Step, Tab, File or code tab) |
- Mouse: double-click a component's border or icon to select it, then drag its handle to move it.
- Touch: the toolbar stays visible while typing, and each block has a drag handle beside it.
EditorThemeProvider
For pages without their own theme: tracks light, dark or system,
remembers the choice and applies it to the editor. Read or change it with
useEditorTheme().
import { EditorThemeProvider, MdxEditor } from "@fumadocs-editor/ui";
export function StandaloneEditor({ source }: { source: string }) {
return (
<EditorThemeProvider>
<MdxEditor defaultValue={source} />
</EditorThemeProvider>
);
}
Prop
Type
Last updated on