How to write documents


Fumadocs provides many useful extensions to MDX, a markup language. Here is a brief introduction to the default MDX syntax of Fumadocs UI.

MDX is not the only supported format of Fumadocs. In fact, you can use any renderers such as next-mdx-remote or CMS.


We use GFM (GitHub Flavored Markdown), a superset of Markdown (CommonMark). See GFM Specification.

# Heading
## Heading
### Heading
#### Heading
Hello World, **Bold**, _Italic_, ~~Hidden~~
console.log('Hello World');
1. First
2. Second
3. Third
- Item 1
- Item 2
> Quote here
| Table | Description |
| ----- | ----------- |
| Hello | World       |

Internal links use the next/link component to allow prefetching and avoid hard-reload.

External links will get the default rel="noreferrer noopener" target="_blank" attributes for security.

[My Link](https://github.github.com/gfm)
This also works: https://github.github.com/gfm.


MDX is a superset of Markdown, with support of JSX syntax. It allows you to import components, and use them right in the document, or even export values.

import { Component } from './component';
<Component name="Hello" />

see MDX Syntax to learn more.


A Card component is included by default. Similar to links, but you can display more information (e.g. icons).

    title="Fetching, Caching, and Revalidating"
    description="Learn more about caching in Next.js"


Useful for adding tips/warnings, you have to import them.

import { Callout } from 'fumadocs-ui/components/callout';
<Callout title="Title" type="info">
  Hello World
<Callout title="Title" type="warn">
  Hello World
<Callout title="Title" type="error">
  Hello World

Hello World


Hello World


Hello World

Heading Anchors

An anchor is automatically applied to all headings, it sanitizes invalid characters like spaces. (e.g. Hello World to hello-world)

Custom Anchor

You can add [#slug] to customise heading anchors.

# heading [#my-heading-id]

To link people to a specific heading, add the heading id to hash fragment: /page#my-heading-id.


We support YAML frontmatter. It is a way to specify common information of the document (e.g. title). Place it at the top of document.

title: Hello World
## Title

See Page Conventions for a list of properties available for frontmatter.


Syntax Highlighting is done with Rehype Code automatically.

console.log('Hello World');

You can add a title to the codeblock.

```js title="My Title"
console.log('Hello World');

Highlight Lines

You spectify highlighted lines by adding [!code highlight].

<div>Hello World</div>  // [!code highlight]
<div>Hello World</div>
<div>Hello World</div>

Highlight Words

You can highlight a specific word by adding [!code word:<match>].

// [!code word:config]
const config = {
  reactStrictMode: true,

As Tab

You can use code block as a <Tab /> component.

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={["Tab 1", "Tab 2"]}>
```ts tab="Tab 1"
```ts tab="Tab 2"

Using Typescript Twoslash

Write Typescript codeblocks with hover type information and detected types errors.

Not enabled by default. See Twoslash.


All built-in content sources handle images properly. Images are automatically optimized for next/image.



Some optional plugins you can enable.

Math Equations

Write math equations with TeX.

f(x) = x * e^{2 pi i \xi x}
f(x)=xe2piiξxf(x) = x * e^{2 pi i \xi x}

To enable, see Math Integration.

Package Install

Generate code blocks for installing packages via package managers (JS/Node.js).

npm i next -D
npm i next -D

To enable, see Remark Install.


You can see a list of plugins supported by Fumadocs.

Last updated on

On this page

Edit on Github