Quick Start

Fumadocs Editor renders an MDX file as an editable page. Prose, code blocks, tables and MDX components are all edited in place, and the file stays the source of truth: blocks you did not touch serialize byte-for-byte, so a one-line edit stays a one-line diff.

Installation

npm install @fumadocs-editor/ui

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

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

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);
      }}
    />
  );
}

What is editable

Out of the box the editor knows the fumadocs-ui components: Callout, Cards, Tabs, Steps, Accordions, Files, TypeTable, GithubInfo and <include>. Each renders in place with its own editable regions, a slash-menu entry and an attributes panel. Code blocks are highlighted, a mermaid fence renders its diagram below the source, and frontmatter is edited in place as YAML.

Anything else still round-trips. A component without a spec shows as a neutral card and is edited as source. Syntax the editor does not understand is preserved verbatim rather than reformatted.

Saving to disk

onChange is enough when you own the persistence. If your documents are files in a repository, sync runs the read, autosave and merge loop for you:

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

export function SyncedEditor({ path }: { path: string }) {
  return <MdxEditor sync={{ path }} />;
}

Theming

The --fde-* tokens follow a .dark class on an ancestor, so a Fumadocs or next-themes site themes the editor with no extra setup. Standalone, wrap it in EditorThemeProvider:

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

export function StandaloneEditor({ source }: { source: string }) {
  return (
    <EditorThemeProvider>
      <MdxEditor defaultValue={source} />
    </EditorThemeProvider>
  );
}

The provider tracks light | dark | system, persists the choice to localStorage and sets the class on a wrapper. Pin a single editor with theme="light" or theme="dark".

Packages

Next steps