---
title: Introduction
sidebar_position: 1
---

# Introduction to Modern.js

**Modern.js is an open source web engineering system from ByteDance**, which provides multiple solutions to help developers solve problems in different development scenarios.

Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:

import { SolutionCards } from '@site/src/components/SolutionCards';

<SolutionCards
  cards={[
    {
      title: 'Modern.js Framework',
      description: 'For web application development',
      link: 'http://modernjs.dev/en/',
    },
    {
      title: 'Modern.js Module',
      description: 'For npm package development',
      link: 'http://modernjs.dev/module-tools/en/',
    },
    {
      title: 'Modern.js Doc',
      description: 'For document site development',
      link: 'http://modernjs.dev/doc-tools/',
    },
  ]}
/>

As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.

## About Documentation

**This documentation site corresponds to the Modern.js framework**, which is used to developing web applications.

- If you are developing an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools/en) documentation.
- If you are developing a document site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools) documentation.
- If you want to use the Modern.js's builder engine to implement a web framework, please refer to the [Modern.js Builder](https://modernjs.dev/builder/en) documentation.

:::tip
As the Modern.js framework is the most widely used, in this documentation site, we will omit the "framework" and simply call it as Modern.js.
:::

## Modern.js Framework

**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.

Modern.js can provide developers with the ultimate **development experience**, making the application get better **user experience**.

In the process of developing React applications, developers often need to design implementations for certain functions, or use other libraries and frameworks to solve these problems.

Modern.js supports all the configuration and tools required by React applications, and has additional features and optimisations built in. Developers can use React to build the UI of the application, and then gradually adopt Modern.js functions to solve common application requirements, such as routing, data fetching, state management, etc.

It mainly contains the following features:

- 🚀 **Rust Bundler**: Easily switch to Rspack bundler with faster build speed.
- 🪜 **Progressive**: Create projects with the most streamlined templates, gradually turn on plugin capabilities through generators, and customize solutions.
- 🏠 **Integration**: The development is unique to the production environment Web Server, CSR and SSR are isomorphic development, and the function as the API service call.
- 📦 **Out Of The Box**: Default TS support, built-in build core, ESLint, debugging tools, full functionality can be tested.
- 🌏 **Ecology**: Self-developed state management, micro frontend, module packaging, Monorepo solution and other peripheral requirements.
- 🕸 **Routing Modes**: Contains controlled routing, routing based on file conventions (nested routing), configurable routing, etc.
- 🚀 **Independently Build Core**: Support a variety of packaging tools, deep optimization bundle.

## Next

If you want to know how to use Modern.js, you can try [Create your first app](/tutorials/first-app/c01-start), or read [Quick Start](/guides/get-started/quick-start).
