#MDX and React components

Rspress supports MDX, a powerful way to develop content.

#Markdown

MDX is a superset of Markdown, which means you can write Markdown files as usual. For example:

# Hello world

#Componentization

In MDX, all .mdx files are compiled into React components, which means they can be used as React components and can freely use React components. For example:

import MdxFragment from './_mdx-fragment.mdx';
import TsxComponent from './_tsx-component';

Testing the use of MDX fragments and React components.

<MdxFragment />

<TsxComponent />

It will be rendered as:

You can use built-in components provided by Rspress or install some React component libraries to enrich your documentation in .mdx files.

#Routing convention

In the docs directory, MDX fragments or React components need to be excluded from routing through the route.exclude configuration. For convenience, we agree that files starting with "_" will be excluded by default via route.excludeConvention.

You can also place components in adjacent directories outside the docs directory, for example:

import ButtonFragment from './_button.mdx';
import Button from '../../components/button';

<ButtonFragment />
<Button />

It will be rendered as:

#Escape Hatch: writing document content using tsx or html

export default () => {
  return (
    <p className="rp-doc">
      This is content in tsx, but the styles are the same as in the
      documentation, such as <code>@rspress/core</code>. However, this text with
      className="rp-not-doc"
      <code className="rp-not-doc">@rspress/core</code> will not take effect
    </p>
  );
};

It will be rendered as: