Rsbuild

Rsbuild is a modern build tool for web applications, built on top of the Rust-based Rspack bundler. It packages Rspack’s raw bundling speed behind a semantic configuration API (source, output, server, dev, html, tools, performance, environments), so teams get out-of-the-box builds for React, Vue, Svelte, Solid, and Preact projects without hand-writing bundler config.

Beyond the config layer, Rsbuild ships its own dev server (HMR, HTTPS, proxying, error overlay), a CLI for dev/build/preview/inspect workflows, and a set of internal plugins that handle asset processing, code splitting, syntax downgrading, and polyfill injection to keep development and production artifacts consistent. It is part of the broader Rstack toolchain (Rspack, Rslib, Rspress, Rsdoctor) from the same maintainers (Bytedance’s web-infra-dev team).

What You Get

• A CLI (rsbuild dev/build/preview/inspect) plus a programmatic createRsbuild() API for custom tooling and scripts
• Official framework plugins (@rsbuild/plugin-react, -vue, -svelte, -solid, -preact) for zero-config JSX/SFC support and HMR
• A built-in dev server with hot module replacement over WebSockets, HTTPS, request proxying, and an in-browser error overlay
• Rust-based build performance from Rspack and SWC without needing to configure either bundler directly
• An environments API for building multiple targets (browser, Node.js, worker) from one project config

Common Use Cases

• Bundling a new web app with zero hand-written Rspack or webpack configuration
• Migrating an existing webpack or Create React App project to a faster Rust-based build pipeline
• Building framework-agnostic component libraries that need multiple output targets
• Composing independently-built micro-frontends together via Module Federation

Under The Hood

Architecture Rsbuild’s core builds around createRsbuild() in src/createRsbuild.ts, which wires roughly thirty internal plugins (pluginAsset, pluginCss, pluginHtml, pluginServer, pluginSwc, pluginModuleFederation, and others under src/plugins/) into a PluginManager (src/pluginManager.ts) that validates plugin shape and orders setup hooks. The CLI (src/cli/) parses commands and delegates to build(), createDevServer(), and startPreviewServer(), which lean on rspackConfig.ts and configChain.ts (a chainable config builder) to translate a resolved RsbuildConfig into an actual Rspack configuration. This cleanly separates “what config means” (initConfigs.ts, defaultConfig.ts, mergeConfig.ts) from “how Rspack builds it” (createCompiler.ts, rspackConfig.ts) and from “how it serves and watches” (src/server/*, restart.ts for HMR) — the plugin registration order and the Rspack adapter layer are the areas with the widest blast radius if changed.

Tech Stack TypeScript makes up over 90% of the codebase, built on @rspack/core (the Rust-based Rspack bundler) and @swc/helpers for fast transforms. The dev server layers connect-next middleware, ws for HMR sockets, chokidar for file watching, sirv for static serving, and http-proxy-middleware/cors for request proxying. Config loading goes through jiti and @rstackjs/load-config to support TypeScript rsbuild.config.ts files, and CSS is processed via postcss/postcss-loader/css-loader/style-loader. The repo is a pnpm workspace with a dozen packages/* (core, create-rsbuild, plugin-react, plugin-vue, plugin-svelte, plugin-solid, plugin-preact, and more) sharing dependency versions through a pnpm catalog, and builds itself using the team’s own “rs” toolchain.

Code Quality The core package alone carries dozens of *.test.ts files covering assets, caching, CSS, environments, externals, and config merging, plus snapshot tests, run through the project’s own rs test task. TypeScript config extends a shared strict base with isolatedDeclarations enabled, and linting/formatting run through the team’s own rs lint/rs fmt tools plus cspell for spell-checking, all gated in GitHub Actions CI. Naming is consistent and every public type is exported from a dedicated types module, giving strong end-to-end type safety across the public API.

API Design Rsbuild’s public surface centers on one semantic RsbuildConfig object (source/output/server/dev/html/tools/performance/environments) that maps directly onto build concerns instead of exposing raw Rspack or webpack config. createRsbuild() plus official framework plugins gives near-zero-config startup for common stacks, while the tools.rspack escape hatch lets existing webpack or Rspack plugins run unmodified alongside Rsbuild’s own plugin system. The environments API lets one config target multiple runtimes from a single project, and the rsbuild inspect command surfaces the fully-resolved config for debugging, meaningfully lowering the learning curve compared to hand-writing Rspack or webpack setups directly.