> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# plugins [![plugins](https://assets.rspack.rs/rsbuild/rsbuild-logo.svg)plugins](https://rsbuild.rs/config/plugins)
`plugins` is used to register Rsbuild plugins.

Rslib and Rsbuild share the same plugin system, so you can use Rsbuild plugins in Rslib.

## Using plugins

You can register Rsbuild plugins in `rslib.config.*` using the `plugins` option, see [Rsbuild - plugins](https://rsbuild.rs/config/plugins).

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});
```

## Official plugins

The following are official plugins that can be used in Rsbuild, and applicable to Rslib.

### For React

Plugins available for React:

- [React Plugin](https://rsbuild.rs/plugins/list/plugin-react): Provides support for React.
- [SVGR Plugin](https://rsbuild.rs/plugins/list/plugin-svgr): Support convert SVG to React components.
- [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components.

### For Vue

Plugins available for Vue:

- [Vue Plugin](https://rsbuild.rs/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components).
- [Vue JSX Plugin](https://github.com/rstackjs/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax.
- [Vue2 Plugin](https://github.com/rstackjs/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components).
- [Vue2 JSX Plugin](https://github.com/rstackjs/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax.

### For Preact

Plugins available for Preact:

- [Preact Plugin](https://rsbuild.rs/plugins/list/plugin-preact): Provides support for Preact.

### For Svelte

Plugins available for Svelte:

- [Svelte Plugin](https://rsbuild.rs/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files).

### For Solid

Plugins available for Solid:

- [Solid Plugin](https://rsbuild.rs/plugins/list/plugin-solid): Provides support for Solid.

### Common

The following are common framework-agnostic plugins:

- [Babel Plugin](https://rsbuild.rs/plugins/list/plugin-babel): Provides support for Babel transpilation capabilities.
- [Sass Plugin](https://rsbuild.rs/plugins/list/plugin-sass): Use Sass as the CSS preprocessor.
- [Less Plugin](https://rsbuild.rs/plugins/list/plugin-less): Use Less as the CSS preprocessor.
- [Stylus Plugin](https://github.com/rstackjs/rsbuild-plugin-stylus): Use Stylus as the CSS preprocessor.
- [Tailwind CSS Plugin](https://rsbuild.rs/plugins/list/plugin-tailwindcss): Use Tailwind CSS v4.
- [ESLint Plugin](https://github.com/rstackjs/rsbuild-plugin-eslint): Run ESLint checks during the compilation.
- [Type Check Plugin](https://github.com/rstackjs/rsbuild-plugin-type-check): Run TypeScript type checker on a separate process.
- [publint Plugin](https://github.com/rstackjs/rsbuild-plugin-publint): Run [`publint`](https://github.com/bluwy/publint) to lint npm packages after the build.
- [Are The Types Wrong Plugin](https://github.com/rstackjs/rsbuild-plugin-arethetypeswrong): Run [`arethetypeswrong`](https://github.com/arethetypeswrong/arethetypeswrong.github.io) to check TypeScript types of npm packages after the build.
- [Image Compress Plugin](https://github.com/rstackjs/rsbuild-plugin-image-compress): Compress the image assets.
- [MDX Plugin](https://github.com/rstackjs/rsbuild-plugin-mdx): Provide support for MDX.
- [Node Polyfill Plugin](https://github.com/rstackjs/rsbuild-plugin-node-polyfill): Used to inject polyfills of Node core modules in the browser side.
- [Source Build Plugin](https://github.com/rstackjs/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.
- [Check Syntax Plugin](https://github.com/rstackjs/rsbuild-plugin-check-syntax): Check the syntax compatibility of output files and determine if there are any advanced syntaxes that could cause compatibility issues.
- [CSS Minimizer Plugin](https://github.com/rstackjs/rsbuild-plugin-css-minimizer): Used to customize CSS minimizer, switch to [cssnano](https://github.com/cssnano/cssnano) or other tools for CSS compression.
- [Typed CSS Modules Plugin](https://github.com/rstackjs/rsbuild-plugin-typed-css-modules): Generate TypeScript declaration file for CSS Modules.
- [Pug Plugin](https://github.com/rstackjs/rsbuild-plugin-pug): Provides support for the Pug template engine.
- [Rem Plugin](https://github.com/rstackjs/rsbuild-plugin-rem): Implements the rem adaptive layout for mobile pages.
- [UMD Plugin](https://github.com/rstackjs/rsbuild-plugin-umd): Generate outputs in UMD format.
- [YAML Plugin](https://github.com/rstackjs/rsbuild-plugin-yaml): Import YAML files and convert them into JavaScript objects.
- [TOML Plugin](https://github.com/rstackjs/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](https://github.com/web-infra-dev/rsbuild) and [rstackjs](https://github.com/rstackjs).
:::

## Community plugins

You can check out the Rsbuild plugins provided by the community at [awesome-rstack - Rsbuild Plugins](https://github.com/rstackjs/awesome-rstack?tab=readme-ov-file#rsbuild-plugins).

You can also discover more Rsbuild plugins on npm by searching for the keyword [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin\&ranking=popularity).