close
Rspress
  • English

      • Build extension

      Rsbuild

      Rspress builds docs with Rsbuild.

      Configure Rsbuild

      Rsbuild provides a rich set of build options. Customize them through builderConfig. For example, change the output directory to doc_dist:

      rspress.config.ts
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  builderConfig: {
    output: {
      distPath: {
        root: 'doc_dist',
      },
    },
  },
});

      Rspress also provides builderConfig.plugins for registering Rsbuild plugins. Use Rsbuild's plugin ecosystem to extend build behavior.

      For example, add Google Analytics with rsbuild-plugin-google-analytics:

      rspress.config.ts
      import { defineConfig } from '@rspress/core';
import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics';

export default defineConfig({
  builderConfig: {
    plugins: [
      pluginGoogleAnalytics({
        // replace this with your Google tag ID
        id: 'G-xxxxxxxxxx',
      }),
    ],
  },
});
      Tip

      Learn more in the Rsbuild - Config documentation.

      Configure Rspack

      You can configure Rspack through the tools.rspack option provided by Rsbuild:

      rspress.config.ts
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  builderConfig: {
    tools: {
      rspack(options) {
        // modify the rspack configuration
      },
    },
  },
});

      MDX compilation

      Rspress compiles MDX with unified. Add related compilation plugins through the markdown configuration. For example:

      rspress.config.ts
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      [
        require('remark-autolink-headings'),
        {
          behavior: 'wrap',
        },
      ],
    ],
    rehypePlugins: [require('rehype-slug')],
  },
});