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 collections in the config file (source.config.ts).

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

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

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

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

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

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:

We will cover in Accessing Collections later on how to access collection outputs.

Installation

Configure Fumadocs MDX on:

FAQ

Built-in Properties

These properties are exported from MDX files by default.

Customise Frontmatter

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

Customise 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 customise it on Global Config or Collection Config.