close
logologo
Guide
Config
Plugin
API
Community
Version
Changelog
Rsbuild 0.x Doc
English
简体中文
Guide
Config
Plugin
API
Community
Changelog
Rsbuild 0.x Doc
English
简体中文
logologo

Plugins

Plugin list
React plugin
SVGR plugin
Vue plugin
Preact plugin
Svelte plugin
Solid plugin
Babel plugin
Sass plugin
Less plugin
Stylus plugin

Development

Plugin development
Plugin API
Plugin hooks
📝 Edit this page on GitHub
Next PageReact plugin

#Plugin list

#Plugin system

You can read about the functionality of Rsbuild plugins and how to develop an Rsbuild plugin in the Plugin System documentation.

#Using plugins

You can register Rsbuild plugins in the rsbuild.config.ts file using the plugins option. For more details, refer to plugins.

If you are using Rsbuild's JavaScript API, you can register the plugin using the addPlugins method.

#Official plugins

The following are official plugins that can be used in Rsbuild.

#React

Plugins available for the React:

  • @rsbuild/plugin-react: Support for React.
  • @rsbuild/plugin-svgr: Support convert SVG to React components.
  • @rsbuild/plugin-styled-components: Provide compile-time support for styled-components.

#Vue

Plugins available for the Vue:

  • @rsbuild/plugin-vue: Support for Vue 3 SFC (Single File Components).
  • @rsbuild/plugin-vue-jsx: Support for Vue 3 JSX / TSX syntax.
  • @rsbuild/plugin-vue2: Support for Vue 2 SFC (Single File Components).
  • @rsbuild/plugin-vue2-jsx: Support for Vue 2 JSX / TSX syntax.

#Preact

Plugins available for the Preact:

  • @rsbuild/plugin-preact: Support for Preact.

#Svelte

Plugins available for the Svelte:

  • @rsbuild/plugin-svelte: Support for Svelte components (.svelte files).

#Solid

Plugins available for the Solid:

  • @rsbuild/plugin-solid: Support for Solid.

#Common

The following are common framework-agnostic plugins:

  • @rsbuild/plugin-assets-retry: Used to automatically resend requests when static assets fail to load.
  • @rsbuild/plugin-babel: Support for Babel transpilation capabilities.
  • @rsbuild/plugin-sass: Use Sass as the CSS preprocessor.
  • @rsbuild/plugin-less: Use Less as the CSS preprocessor.
  • @rsbuild/plugin-stylus: Use Stylus as the CSS preprocessor.
  • @rsbuild/plugin-basic-ssl: Generate an untrusted, self-signed certificate for the HTTPS server.
  • @rsbuild/plugin-eslint: Run ESLint checks during the compilation.
  • @rsbuild/plugin-type-check: Run TypeScript type checker on a separate process.
  • @rsbuild/plugin-image-compress: Compress the image assets.
  • @rsbuild/plugin-mdx: Provide support for MDX.
  • @rsbuild/plugin-node-polyfill: Used to inject polyfills of Node core modules in the browser side.
  • @rsbuild/plugin-source-build: This plugin is designed for the monorepo scenario. It supports referencing source code from other subdirectories and performs build and hot update.
  • @rsbuild/plugin-check-syntax: Check the syntax compatibility of output files and determine if there are any advanced syntaxes that could cause compatibility issues.
  • @rsbuild/plugin-css-minimizer: Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression.
  • @rsbuild/plugin-typed-css-modules: Generate TypeScript declaration file for CSS Modules.
  • @rsbuild/plugin-pug: Support for the Pug template engine.
  • @rsbuild/plugin-rem: Implements the rem adaptive layout for mobile pages.
  • @rsbuild/plugin-umd: Generate outputs in UMD format.
  • @rsbuild/plugin-yaml: Import YAML files and convert them into JavaScript objects.
  • @rsbuild/plugin-toml: Import TOML files and convert them into JavaScript objects.
TIP

You can find the source code of all official plugins in web-infra-dev/rsbuild and rspack-contrib.

#Community plugins

You can check out the Rsbuild plugins provided by the community at awesome-rstack - Rsbuild Plugins.

You can also discover more Rsbuild plugins on npm by searching for the keyword rsbuild-plugin.

#React

  • rsbuild-plugin-react-router: Provides seamless integration with React Router.

#Angular

  • @ng-rsbuild/plugin-angular: Allows you to build Angular applications easily.