diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md
index a99ca9b372e2f9e7865987a093b1d5566bef067f..a4144bde7d65241c73dc829347b97963b29c65a7 100644
--- a/en/application-dev/Readme-EN.md
+++ b/en/application-dev/Readme-EN.md
@@ -20,6 +20,7 @@
       - [Data Management](database/Readme-EN.md)
       - [Device](device/Readme-EN.md)
       - [DFX](dfx/Readme-EN.md)
+      - [Window Manager](windowmanager/Readme-EN.md)
 -   Tools
     - [DevEco Studio \(OpenHarmony\) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
 -   Hands-On Tutorials
diff --git a/en/application-dev/windowmanager/Readme-EN.md b/en/application-dev/windowmanager/Readme-EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..188b3d734af30592e6a886093e8193636cae6357
--- /dev/null
+++ b/en/application-dev/windowmanager/Readme-EN.md
@@ -0,0 +1,12 @@
+# Window Manager
+
+* Window
+  *  [Window Overview](window-overview.md)
+  *  [Window Development](window-guidelines.md)
+* Display
+  * [Display Overview](display-overview.md)
+  * [Display Development](display-guidelines.md)
+* Screenshot
+  * [Screenshot Overview](screenshot-overview.md)
+  * [Screenshot Development](screenshot-guidelines.md)
+
diff --git a/en/application-dev/windowmanager/display-guidelines.md b/en/application-dev/windowmanager/display-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..818d6dc3fa769d894c37754840ec7711f141c40c
--- /dev/null
+++ b/en/application-dev/windowmanager/display-guidelines.md
@@ -0,0 +1,24 @@
+# Display Development
+
+## When to Use
+
+An application can obtain the default display object or all display objects by calling the **Display** APIs.
+
+## Available APIs
+
+For details about the APIs, see [Display](../reference/apis/js-apis-display.md).
+
+### How to Develop
+
+Call **getDefaultDisplay(): Promise<Display>** to obtain the default display object. An example code snippet is as follows:
+
+```js
+import display from '@ohos.display' // Import the module.
+
+let disp; // disp is used to save the default display object.
+display.getDefaultDisplay().then((disp) => {
+	console.log('display.getDefaultDisplay success, display :' + JSON.stringify(disp));
+}, (err) => {
+    console.log('display.getDefaultDisplay failed, error : ' + JSON.stringify(err));
+})
+```
diff --git a/en/application-dev/windowmanager/display-overview.md b/en/application-dev/windowmanager/display-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..702ff0961e6111f0d73f16f81e52cf7fcaca444f
--- /dev/null
+++ b/en/application-dev/windowmanager/display-overview.md
@@ -0,0 +1,7 @@
+# Display Overview
+
+The **Display** APIs present the window layout of an application. The display attributes include the display ID, name, active status, state, refresh rate, rotation angle, width, height, pixel density, font scaling factor, and exact physical dots per inch.
+
+## Basic Concepts
+
+**Display**: a screen visible to an application. It can be used as a window container. It is an abstract concept that is different from a physical screen.
diff --git a/en/application-dev/windowmanager/screenshot-guidelines.md b/en/application-dev/windowmanager/screenshot-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..a5023d76ec0645511de1c9a0a5f39779363a5729
--- /dev/null
+++ b/en/application-dev/windowmanager/screenshot-guidelines.md
@@ -0,0 +1,37 @@
+# Screenshot Development
+
+## When to Use
+
+You can specify a display device to take screenshots, with screenshot parameters specified.
+
+## Available APIs
+
+For details about the APIs, see [Screenshot](../reference/apis/js-apis-screenshot.md).
+
+## How to Develop
+
+Call **save(options?: ScreenshotOptions): Promise<image.PixelMap>** to take a screenshot. In this API, **options** is a predefined screenshot parameter. If **options** is unspecified, the entire screen is captured by default. An example code snippet is as follows:
+
+```js
+import screenshot from '@ohos.screenshot' // Import the module.
+
+// Set screenshot parameters.
+var ScreenshotOptions = {
+	"screenRect": {
+		"left": 200,
+		"top": 100,
+		"width": 200,
+		"height": 200},
+	"imageSize": {
+		"width": 300,
+		"height": 300},
+	"rotation": 0
+};
+
+let image; // image is used to save the screenshot.
+screenshot.save(ScreenshotOptions).then((image) => {
+	console.log('screenshot.save success, screenshot image :' + JSON.stringify(image));
+}, (err) => {
+    console.log('screenshot.save failed, error : ' + JSON.stringify(err));
+})
+```
diff --git a/en/application-dev/windowmanager/screenshot-overview.md b/en/application-dev/windowmanager/screenshot-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f1a485a711e031dfc9762fb803d41c55c4380fd
--- /dev/null
+++ b/en/application-dev/windowmanager/screenshot-overview.md
@@ -0,0 +1,7 @@
+# Screenshot Overview
+
+The screenshot APIs, with parameters, enable you to take screenshots on display devices.
+
+## Basic Concepts
+
+Screenshot: provides the screenshot capability.
diff --git a/en/application-dev/windowmanager/window-guidelines.md b/en/application-dev/windowmanager/window-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..0f265cb868132595fb4311c07dae0ecd69934207
--- /dev/null
+++ b/en/application-dev/windowmanager/window-guidelines.md
@@ -0,0 +1,108 @@
+# Window Development
+
+# When to Use
+The interface layer of the window runs in the application process. It loads the page layout and provides APIs.
+By calling these APIs, you can create and destroy a window, set the position and size of a window, and enter the immersive mode (full-screen mode).
+
+## Available APIs
+For details about the APIs, see [Window](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-window.md).
+
+**Table 1** Main window APIs
+
+| API                                                      | Description                                          |
+| :----------------------------------------------------------- | :--------------------------------------------- |
+| create(id: string, type: WindowType, callback: AsyncCallback\<Window>): void | Creates a subwindow.                                  |
+| moveTo(x: number, y: number): Promise\<void>                 | Moves the window position. A positive value of **x** indicates that the window moves to the right, and a positive value of **y** indicates that the window moves downwards.|
+| resetSize(width: number, height: number): Promise\<void>     | Changes the window size.                            |
+| hide(): Promise\<void>                                       | Hides the window.                                |
+| destroy(): Promise\<void>                                    | Destroys the window.                                |
+
+## How to Develop
+
+### Creating a Main Window
+
+Currently, the main window is automatically created when the application is started. The declaration period, hiding, and destruction of the main window are managed by the application.
+###Creating a Subwindow
+You can call **create** to create a subwindow. The sample code is as follows:
+
+```
+ import window from '@ohos.window';
+ var windowClass = null;
+ let promise = window.create("subWindow", window.WindowType.TYPE_APP);
+ promise.then((data)=> {
+ 	windowClass = data;
+    console.info('SubWindow created. Data: ' + JSON.stringify(data))
+ }).catch((err)=>{
+    console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err));
+ });
+```
+
+### Obtaining a Window Object
+
+- Call **getTopWindow** to obtain the top window of the application. The sample code is as follows:
+
+```
+ var windowClass = null;
+ let promise = window.getTopWindow();
+ promise.then((data)=> {
+ 	windowClass = data;
+    console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data))
+ }).catch((err)=>{
+    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
+ })
+```
+
+- You can also call **find** to obtain created subwindows in the application. The sample code is as follows:
+
+```
+ var windowClass = null;
+ let promise = window.find("subWindow");
+ promise.then((data)=> {
+ 	windowClass = data;
+    console.info('window found. Data: ' + JSON.stringify(data))
+ }).catch((err)=>{
+    console.error('Failed to find the Window. Cause: ' + JSON.stringify(err));
+ });
+```
+
+### Hiding and Destroying a Window
+
+After a window object is obtained, you can call **hide** and **destroy** to hide and destroy the window object, respectively. The sample code is as follows:
+
+```
+ let promise = windowClass.hide();
+ promise.then((data)=> {
+    console.info('window hidden. Data: ' + JSON.stringify(data))
+    windowClass.destroy((err, data) => {
+        if (err.code) {
+            console.error('Failed to destroy the window. Cause:' + JSON.stringify(err));
+            return;
+        }
+    	console.info('Succeeded in destroying the window. Data: ' + JSON.stringify(data))
+	})
+ }).catch((err)=>{
+    console.error('Failed to hide the window. Cause: ' + JSON.stringify(err));
+ })
+```
+
+### Enabling the Full-Screen Mode
+
+After a window object is obtained,
+
+- call **setFullScreen** to enable the full-screen mode for the window.
+
+The sample code is as follows:
+
+```
+import window from '@ohos.window';
+.onClick(async () => {
+    try {
+      const win = await window.getTopWindow()
+      await win.setFullScreen(true)
+    } catch (err) {
+      console.log(`setFullScreen fail, code = ${err.code}`)
+    }
+})
+```
+
+For the complete code, see [immersive](https://gitee.com/openharmony/windowmanager/tree/master/AppDemo/window/immersive).
diff --git a/en/application-dev/windowmanager/window-overview.md b/en/application-dev/windowmanager/window-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..dee6a1730aeec73764782d1534e2d17109663fa8
--- /dev/null
+++ b/en/application-dev/windowmanager/window-overview.md
@@ -0,0 +1,18 @@
+# Window Overview
+
+The Window Manager subsystem provides basic capabilities of window and display management. It is the basis for UI display.
+The Window Manager subsystem enables multiple applications to use the same physical screen for display and interaction. For each application, you only need to implement the interaction interface in the allocated display area. A window acts as a display container of the application interface, and the Window Manager subsystem organizes the interaction interfaces into a form visible to end users.
+
+## Basic Concepts
+
+**Immersive**
+
+The colors of the application interface, status bar, and navigation bar are the same to achieve the visual integrity.
+
+## Working Principles
+
+To display a UI on a screen, the application and system need to request a window object from the Window Manager subsystem. This object generally represents a rectangular area on the screen and has attributes such as the position, width, height, and overlay layer. The object also loads the root node of the UI framework in the interface. The UI of the application is loaded and displayed in the window through the root node.
+
+## Constraints
+
+Except the **on** and **off** APIs used for callback subscription and unsubscription, all other window APIs are asynchronous interfaces.