Configuration

Plugin Options

Fumadocs MDX offers webpack plugins and a Fumadocs Source API adapter to integrate with Fumadocs. You can configure Fumadocs MDX by passing options to createMDX in next.config.mjs.

import createMDX from 'fumadocs-mdx/config';
 
const withMDX = createMDX({
  // options
});

Root Content Directory

Fumadocs MDX only scans for a specific folder to produce the .map file, it's called the root content directory.

By default, it points to ./content in the root directory. You can customise it with the rootContentDir option.

Map File Path

Customise the file path of .map file with the rootMapPath option.

Include

Include or filter files to the .map file, it uses micromatch under the hood which supports Regex.

import createMDX from 'fumadocs-mdx/config';
 
const withMDX = createMDX({
  include: ['./**/*.{md,mdx,json}'],
});

Current Working Directory

Customise the current working directory with the cwd option, default to process.cwd().

MDX Options

Fumadocs MDX uses the MDX Compiler to compile MDX files into JavaScript files. You can configure the compiler with the mdxOptions option.

Remark Plugins

These plugins are applied by default:

• Remark Image - Handle images
• Remark Heading - Extract table of contents
• Remark Structure - Generate search indexes
• Custom Remark Plugin - Exports the output generated by remark plugins above

You can add other remark plugins with:

import createMDX from 'fumadocs-mdx/config';
import { myPlugin } from './remark-plugin';
 
const withMDX = createMDX({
  mdxOptions: {
    remarkPlugins: [myPlugin],
  },
});

You can also pass a function to control the order of remark plugins.

import createMDX from 'fumadocs-mdx/config';
import { myPlugin } from './remark-plugin';
 
const withMDX = createMDX({
  mdxOptions: {
    remarkPlugins: (v) => [myPlugin, ...v],
  },
});

Rehype Plugins

These plugins are applied by default:

• Rehype Code - Syntax highlighting

Same as remark plugins, you can pass an array or a function to add other rehype plugins.

import createMDX from 'fumadocs-mdx/config';
import { myPlugin } from './rehype-plugin';
 
const withMDX = createMDX({
  mdxOptions: {
    rehypePlugins: (v) => [myPlugin, ...v],
  },
});

Rehype Code

Customise the options for Rehype Code and Shiki.

import createMDX from 'fumadocs-mdx/config';
 
const withMDX = createMDX({
  mdxOptions: {
    rehypeCode: { ... }
  },
});

Export Properties from vfile.data

Some remark plugins store their output in vfile.data (an compile-time memory) which cannot be accessed from your code. Fumadocs MDX applies a remark plugin that turns vfile.data properties into exports, so that you can access these properties when importing the MDX file.

You can define additional properties to be exported.

const withMDX = createMDX({
  mdxOptions: {
    valueToExport: ['dataName'],
  },
});

By default, it includes:

• toc for the Remark Heading plugin
• structuredData for the Remark Structure Plugin
• frontmatter for the frontmatter of MDX (using gray-matter)

Search Index Options

Pass the buildSearchIndex option to configure search index generation.

See Search Index Generation to learn more.