Getting Started

Quick Start

Get started with Fumadocs MDX:

Next.js

Using Fumadocs MDX with Next.js.

React Router

Using Fumadocs MDX with React Router 7 or above.

Tanstack Start

Using Fumadocs MDX with Tanstack Start/Router.

Introduction

Fumadocs MDX is a tool to transform content into type-safe data, similar to Content Collections.

It is not a full CMS but rather a content compiler + validator, you can use it to handle blog posts and other contents.

Defining Collections

Collection refers to a collection containing a certain type of files. You can define collections in the config file (source.config.ts).

Fumadocs MDX transforms collections into type-safe data, accessible in your app. Available collections:

Compile Markdown & MDX files into a React Server Component, with useful properties like Table of Contents.

source.config.ts

import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'doc',
  dir: 'content/docs',
});

Transform YAML/JSON files into an array of data.

source.config.ts

import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'meta',
  dir: 'content/docs',
});

Combination of meta and doc collections, which is needed for Fumadocs.

source.config.ts

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    // options for `doc` collection
  },
  meta: {
    // options for `meta` collection
  },
});

For example, a doc collection will transform the .md and .mdx files:

ui.md

hello.md

index.mdx

meta.json

Accessing Collections

Collections will be compiled into JavaScript files that your app can access, the output format varies according to the framework you use.

Get started with your framework to learn more.

FAQ

Built-in Properties

These properties are exported from MDX files by default.

Property	Description
`frontmatter`	Frontmatter
`toc`	Table of Contents
`structuredData`	Structured Data, useful for implementing search

Customise Frontmatter

Use the schema option to pass a validation schema to validate frontmatter and define its output properties.

MDX Plugins

Fumadocs MDX uses MDX Compiler to compile MDX files into JavaScript files.

You can customise it on Global Config or Collection Config.

Next.js

React Router

Tanstack Start

On this page