Getting Started

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 processing layer for React frameworks, you can use it to handle blog posts and other contents.

What is a Collection?

Collection refers to a collection containing a certain type of files. You can define them with the Macro API in your app:

lib/source.ts

import { defineDocs } from 'fumadocs-mdx/macro';
import { loader } from 'fumadocs-core/source';

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

Available collections:

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

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

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

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

ui.md

hello.md

index.mdx

meta.json

You can also define collections in source.config.ts with the Config API, which generates entry files under .source.

Installation

Configure Fumadocs MDX on:

Next.js

Using Fumadocs MDX with Next.js.

Vite

Using Fumadocs MDX with Vite.

Runtime Loader

Using Fumadocs MDX with a JavaScript runtime.

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
`extractedReferences`	For analyzing `hrefs` references

Customize Frontmatter

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

Customize MDX Compiler

Fumadocs MDX uses MDX Compiler to compile MDX files into JavaScript files. The default preset includes a set of plugins and configurations out-of-the-box.

You can customize it on Global Config or Collection Config.