ビジュアルエディター

ファイルを信頼できる唯一の情報源（Source of Truth）としたまま、Markdown と MDX を視覚的に編集できます。

はじめに

Fumadocs Editor は、Fumadocs MDX 向けのビジュアルエディターです。

Studio を使えば、アプリにエディターを組み込まずに、ローカルのドキュメントをブラウザーで開けます。 Fumadocs プロジェクトのディレクトリで、次のコマンドを実行してください。

npx @fumadocs-editor/studio

Studioを使用するにはNode.js 24以降が必要です。Studioはcontent/docsを探し、見つからない場合は親ディレクトリを探索します。別のコンテンツフォルダーを指定するには、次のようにします。

npx @fumadocs-editor/studio --root ./docs

編集内容はディスクに自動保存され、コードエディターで加えた変更は開いているドキュメントにマージされます。ファイル一覧は meta.json で指定した順序で表示されます。

変更内容を Git で確認し、サイトの通常のデプロイワークフローで公開してください。

Studio で編集できるのは既存のファイルのみです。ファイルの作成、名前の変更、削除は、コードエディターまたはファイルマネージャーで行ってください。

@fumadocs-editor/ui を使用すると、独自のアプリ内に編集インターフェースを構築できます。詳しくはドキュメントを参照してください。

エディターをインストールしてスタイルをインポートし、最初の編集可能なドキュメントをレンダリングします。

コンテンツフォルダー、カスタムコンポーネント、スタイルを設定します。

開発サーバーを介して、埋め込みエディターをファイルと接続します。

Callout、Cards、Steps、Accordions、Files などの Fumadocs コンポーネントは、標準で編集に対応しています。

カスタムコンポーネントでは、コンポーネント仕様を使って独自の編集可能領域を定義できます。

既存のコンテンツ構成はそのまま使えます

エディターは Markdown および MDX ファイルを直接編集します。ファイルの読み込みには引き続き Fumadocs MDX を、公開サイトのレンダリングにはお使いの React フレームワークを使用してください。