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

## Modern.js Plugin System

Modern.js is a system used for extending the functionality of a project at different stages such as running, requesting, and rendering. It mainly consists of three parts: the Hook model, the Manager, and the Context Sharing mechanism.

The Hook model is used to determine the execution method of the current Hook, and functions with different Hook models have different execution logics. The Manager is used to control the execution and scheduling of Hooks. The Context Sharing mechanism is used to pass information between different Hooks.

Currently, Modern.js provides several different Hook models:

- Pipeline
  - Sync
  - Async
- Waterfall
  - Sync
  - Async
- Workflow
  - Sync
  - Async
  - Parallel(Async)

:::note
Subsequent chapters will introduce the execution methods of each model in detail.
:::

Based on the Hook model and Manager, Modern.js exposes three sets of plugins: CLI, Runtime, and Server.

Among them, the CLI plugin is the main running flow control model in Modern.js, and most of the features in Modern.js are mainly run through this set of models. The Runtime plugin is mainly responsible for processing the rendering logic of React components. The Server plugin is mainly used for controlling the server lifecycle and user requests.

## What Plugins Can Do

All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can write plugins to extend more functionality and adapt to complex scenarios, including but not limited to:

- Registering commands
- Modifying Modern.js configuration and validation schema
- Modifying compilation configurations for Webpack/Babel/Less/Sass/Tailwind CSS/...
- Modifying the React components/elements to be rendered at runtime
- Modifying page routing
- Modifying server routing
- Customizing console output
- Customizing dynamic HTML templates
- Customizing Node.js server frameworks
- Customizing React component client/server rendering
- ...

When Modern.js does not currently cover the functionality or scenario that you need, you can develop a custom plugin to implement the related functionality for adapting to special scenarios.
