Skip to Content
Fumadocs

Include

Reuse content from other files.

Usage

Fumadocs MDX always enables Remark Include, on both unified and Sätteri.

Content

To display content from another Markdown/MDX file, specify its path relative to the file itself in the <include> tag.

<include>./another.mdx</include>

Do not pass untrusted paths to <include>, it can embed any file on your machine, like .env.

For Markdown

Markdown (.md) files do not support JSX syntax. Use the directive syntax instead. Sätteri parses directives by default. On unified, add the remark-directive remark plugin:

source.config.ts
import { defineConfig } from 'fumadocs-mdx/config';
import remarkDirective from 'remark-directive';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkDirective],
  },
});

You may also need rehype-raw for HTML comments and content.

CodeBlock

For other types of files, it will become a codeblock:

<include>./script.ts</include>

<include lang="md" meta='title="lib.md"'>
  page.md
</include>

You can include only a region of content:

code.ts
export function fn() {
  //#region a
  console.log('one');
  //#endregion
}
<include>./code.ts#a</include>

cwd

Resolve relative paths from cwd instead of the current file:

<include cwd lang="tsx" meta='title="lib.ts"'>
  ./script.ts
</include>

Extraction

When referencing content files, you can only include a certain part of the document.

Section

Encapsulate by a <section /> tag:

## Hello World

<section id="test">This is included</section>

This is not included.

In Markdown:

## Hello World

:::section{#test}
This is included
:::

This is not included.

Heading

Include contents under a certain heading.

## Included Section

I'm here!

## Not Included

Some random text.

In Markdown:

## Included Section

I'm here!

## Not Included

Some random text.

How is this guide?

Last updated on