Quick Start

Experimental

This project is still in early stage, breaking changes expected for future v1 release.

Fumadocs Editor turns an MDX file into an editable page. The file stays the source of truth: blocks you did not touch serialize byte-for-byte, so a one-line edit is a one-line diff.

Installation

Try it without code

npx @fumadocs-editor/studio opens an editor for a Fumadocs app from the terminal. See Studio.

Install the package

npm install @fumadocs-editor/ui

Add the styles

app.css

@import "@fumadocs-editor/ui/styles.css";

Render it

editor.tsx

import { MdxEditor } from "@fumadocs-editor/ui";

export function EditorPage({ source }: { source: string }) {
  return (
    <MdxEditor
      defaultValue={source}
      onChange={(markdown) => {
        // persist it wherever your content lives
        console.log(markdown);
      }}
    />
  );
}

defaultValue is the initial MDX. After that the editor is uncontrolled, like <textarea defaultValue>.
onChange receives the serialized MDX, debounced.

The editor is a React 19 client component. In a server-rendered app, mount it from a 'use client' file.

What is editable

Markdown: prose, lists, tables, code blocks (a mermaid fence also renders its diagram) and frontmatter.
fumadocs-ui components: Callout, Cards, Tabs, Steps, Accordions, Files, TypeTable, GithubInfo and <include>, each with a slash-menu entry and an attributes panel.
Other JSX keeps its children editable, and its tags are edited as text. A spec makes your own components fully editable.
Anything else is kept verbatim and edited as source.

Theming

The editor follows a .dark class on any ancestor, so a Fumadocs or next-themes site needs no setup. To match your site's colors, alias the --fde-* tokens after the import:

app.css

:root {
  --fde-background: var(--color-fd-background);
  --fde-primary: var(--color-fd-primary);
}

On a page without a theme, wrap the editor in EditorThemeProvider.

Next steps

Sync

Save to files on disk, with autosave and live merge.

Component authoring

Make your own MDX components editable in place.

Syntax

Math, directive admonitions and other dialects.

MdxEditor reference

Every prop, the ref and the keyboard shortcuts.