Modern.js: A React Framework Built Around Rsbuild and ByteDance's Internal Workflow

What Modern.js Actually Solves

Modern.js is a progressive web framework for React, developed at ByteDance. The README states that it supports the development of thousands of web applications internally. The problem it tackles is the fragmentation of the React tooling landscape. Developers normally assemble a stack from separate libraries for routing, data fetching, and state management, and they also have to configure a build tool. Modern.js bundles these concerns into one framework, with a focus on progressive adoption. You can start with plain React for the UI and then add Modern.js features as your needs grow. Its target user is a React developer who wants an integrated solution, not someone who enjoys wiring up individual packages.

The Architecture: React on Top of Rsbuild

The key architectural fact is that Modern.js is built on Rsbuild, which the README describes as an Rspack-based build tool rebranded from Modern.js Builder. Rspack is a Rust-based bundler. This gives Modern.js a distinctive foundation: it is not a Vite or webpack-based framework. Instead, it inherits Rspack's performance characteristics and its plugin model. The framework layer adds routing, data acquisition, and state management on top of this build core. The README mentions that some implementations are modified from create-react-app, remix, and jest, so it borrows ideas from established projects. The hooks API references farrow-pipeline, and the data loader references remix. This is a framework that has been shaped by real production use at ByteDance, not a toy project.

Getting Started: Commands and Configuration

The README points to a Quick Start guide at modernjs.dev, but it does not list the exact commands. Based on the repository layout and typical Rsbuild-based projects, you would likely install the framework via npm and use a command like `npx @modern-js/create` to scaffold a new app. The configuration is done through a `modern.config.ts` file, which is a standard pattern for Modern.js projects. The documentation mentions that Modern.js supports all configurations and tools needed by React applications. For a concrete example, you would define routes and data loaders in the framework's own conventions. Since the README does not provide explicit commands, you must consult the official documentation for the current CLI syntax. The framework also offers a collection of examples in a separate repository, which is the best starting point for seeing real usage.

The Ecosystem and Its Trade-offs

Modern.js is part of a larger family of tools from ByteDance's web-infra-dev organization. The README lists Rspack, Rsbuild, Rspress, and Rslib as ecosystem solutions. This is both a strength and a constraint. If you adopt Modern.js, you are implicitly betting on the Rspack ecosystem. Rsbuild is the build tool, and Rspack is the underlying bundler. This means you will not be using webpack or Vite plugins directly, unless there is a compatibility layer. The README does not mention such a layer. The advantage is a cohesive stack where the build tool and framework are developed together. The disadvantage is a smaller plugin ecosystem compared to more established tools. You should check whether the specific plugins you need exist for Rsbuild before committing.

A Genuine Limitation: Progressive Adoption Has a Ceiling

The README emphasizes progressive adoption, but that claim has limits. You can start with React and add features gradually, but the framework is opinionated. Once you use its routing or data loading, you are tied to its conventions. The README says Modern.js supports all configurations and tools needed by React applications, but it does not explain how to escape its abstractions. If you need a non-standard routing solution or a custom state management approach, you may fight the framework. Also, the README notes that it is used at ByteDance for internal frameworks, which means the priorities may not match an open-source user's needs. The documentation is the only guide, and it can be incomplete for edge cases. This is a framework that works well when you stay within its intended path, but it may be the wrong tool for highly bespoke applications.

Alternatives: Next.js and Vite-Based Solutions

The most direct alternative is Next.js, which also provides routing, data fetching, and build tooling for React. The difference is in the build core: Next.js uses webpack and Turbopack, while Modern.js uses Rspack. Next.js has a larger ecosystem and more community resources. Another alternative is to assemble your own stack with Vite and React Router, which gives you full control but requires more setup. The README mentions that Modern.js is based on React, so it does not compete with Vue or Svelte frameworks. If you want a Rust-based bundler, you could also use Rsbuild directly without the Modern.js framework layer. That gives you the build performance without the opinionated framework. Choose based on whether you want an integrated solution or a modular one.

Maintenance, License, and Upgrade Considerations

Modern.js is MIT licensed, which is permissive and allows commercial use. The README lists third-party licenses, so you should review those if you distribute a product. The project is actively maintained, with releases in August 2026, including v3.8.3. The roadmap is tracked in a GitHub issue, which is a good place to check for breaking changes. The framework is under active development, so upgrades may require attention. The README mentions a benchmark site that tracks bundle size and compile speed, which is useful for evaluating performance over time. However, there is no explicit migration guide in the README. You should plan for regular updates and test your app against new versions. The maintenance cost is moderate: you are dependent on the Modern.js team's release cadence and the Rspack ecosystem's evolution.

Editorial conclusion

Adopt Modern.js if you are already invested in the Rspack ecosystem or need a batteries-included React framework that handles routing, data, and state without assembly. Skip it if you prefer minimal dependencies or want to stay with Vite or Next.js. Before adopting, verify the current state of Rsbuild's plugin ecosystem and Modern.js's documentation for your specific features, and check the roadmap for any breaking changes in the v3 line.

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes