modern.js is a free, open source build & deployment project written in TypeScript and released under MIT. It has 5,042 GitHub stars, 420 forks and 66 open issues, and was last pushed 13 hours ago. On this registry it ranks #29 of 59 tracked projects in Build & Deployment, with 5 head-to-head comparisons available.

What is modern.js?

What it is

Modern.js is a progressive web framework built on React, written in TypeScript and released under the MIT license. It is developed by ByteDance, where it is used to build upper-level frameworks that have supported the development of thousands of web applications. The project lives in the JavaScript and React ecosystem, and it is closely tied to the web-infra-dev family of tools, which includes Rspack, Rsbuild, Rspress and Rslib. The repository has been active for roughly five years, carries about 5,042 stars and 420 forks, and shows 66 open issues.

The concrete problem it addresses is the assembly work that precedes almost every React application. Developers normally have to design an implementation plan for common requirements or pull in separate libraries and frameworks to cover them. Modern.js instead ships all of the configuration and tooling a React application needs, together with additional built-in features and optimizations. A team can build the user interface with React first and then adopt framework features gradually, using them to handle routing, data acquisition and state management as those needs appear.

Key capabilities

  • Progressive adoption model: React UI first, then framework features added incrementally for routing, data acquisition and state management.
  • Built-in support for all configuration and tools required by React applications, with extra features and optimizations on top.
  • Server-side rendering, indicated by the ssr topic in the repository metadata.
  • Build tooling rooted in Rspack, the Rust-based web bundler, and Rsbuild, the Rspack-based build tool rebranded from Modern.js Builder.
  • Companion ecosystem tools for adjacent jobs: Rspress for static sites and Rslib for library development.
  • A published benchmark that tracks bundle size, compile speed and install size over time.
  • A collection of ready-to-use examples maintained in the modern-js-examples repository.

Who uses it and how

  • ByteDance uses Modern.js as the base for upper-level frameworks that serve thousands of web applications.
  • Teams building React applications use it to avoid selecting and wiring separate solutions for routing, data fetching and state.
  • Projects that need server-side rendering can adopt the SSR path rather than assembling it themselves.
  • Developers who want a starting point can work from the boilerplate and example repositories instead of an empty project.
  • Users follow the public roadmap and gather in the project Discord for support and contributions.

Getting started

The README points to the Quick Start guide at modernjs.dev/guides/get-started/quick-start as the entry point. The excerpt does not name a package manager, Docker image or hosted option, so installation specifics come from that guide rather than the repository front page.

When to use it — and when not to

No paid product is named as the thing Modern.js replaces, so the comparison is against assembling a React stack from separate libraries. The README excerpt does not describe a database, storage layer or SMTP service that a self-hoster must operate, and it does not list a hosted offering. The evident weakness is documentation placement: the repository itself carries

project readme (upstream, from github) — read inline

Modern.js

Inspire creativity in modern web development.

npm version downloads License

English | 简体中文

Introduction

The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.

When developing React applications, developers usually need to design implementation plans for certain features or use other libraries and frameworks to solve these problems. Modern.js supports all configurations and tools needed by React applications, and has built-in additional features and optimizations. Developers can use React to build the UI of the application, and then gradually adopt the features of Modern.js to solve common application requirements, such as routing, data acquisition, and state management.

Getting Started

See Quick Start.

Ecosystem

The following solutions and libraries are available within the Modern.js ecosystem:

  • 🦀 Rspack: A fast Rust-based web bundler.
  • 🐬 Rsbuild: An Rspack-based build tool for the web, rebranded from Modern.js Builder.
  • 🐹 Rspress: A fast Rspack-based static site generator.
  • 🦄 Rslib: An Rspack-based library development tool.

Benchmark

We use Modern.js Benchmark to observe the trend of key metrics, such as bundle size, compile speed and install size.

Roadmap

Please refer to the Modern.js Roadmap. We will update the Roadmap content regularly. Please stay tuned.

Examples

Modern.js provides a collection of ready-to-use examples that you can find and use in the modern-js-examples repository.

Contributing

New contributors welcome!

Please read the Contributing Guide.

Code of Conduct

This repo has adopted the Bytedance Open Source Code of Conduct. Please check Code of Conduct for more details.

All Contributors

Thanks to the following friends for their contributions to Modern.js:

contributors

Community

Come and chat with us on Discord! The Modern.js team and users are active there, and we're always looking for contributions.

Credits

Some implementations of Modern.js are modified from existing projects, such as create-react-app, remix, jest and bundle-require. Thanks for them.

  • @modern-js/bundle-require: is modified from bundle-require.
  • @modern-js/plugin: the hooks API is referenced from farrow-pipeline.
  • @modern-js/plugin-data-loader: some code is referenced from remix.
  • @modern-js/babel-plugin-module-resolver: is modified from babel-plugin-module-resolver.
  • Netlify for hosting this site, Thanks for the great service and support for open source.

License

Modern.js is MIT licensed.

Third party licenses are listed in THIRD-PARTY-LICENSE.

Frequently asked questions

Is modern.js free to use?

modern.js is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does modern.js do?

A progressive web framework based on React and Rsbuild.

What is modern.js written in?

modern.js is primarily written in TypeScript. Its source is publicly available at https://github.com/web-infra-dev/modern.js, and it has 5,042 GitHub stars.