diff --git a/en/application-dev/application-dev-guide.md b/en/application-dev/application-dev-guide.md
index a6b12502918a7c3adfa37378241ffceda3e4f015..ad34cdd099a470dd7731cc0c3c086125044261b7 100644
--- a/en/application-dev/application-dev-guide.md
+++ b/en/application-dev/application-dev-guide.md
@@ -64,7 +64,8 @@ API references encompass all components and APIs available in OpenHarmony, helpi
 They are organized as follows:
 
 - [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/ts-components-summary.md)
-- [Component Reference (JavaScript-compatible Web-like Development Paradigm)](reference/arkui-js/js-components-common-attributes.md)
+- [Component Reference (JavaScript-compatible Web-like Development Paradigm- ArkUI.Full)](reference/arkui-js/Readme-EN.md)
+- [Component Reference (JavaScript-compatible Web-like Development Paradigm- ArkUI.Lite)](reference/arkui-js-lite/Readme-EN.md)
 - [JS Service Widget UI Components](reference/js-service-widget-ui/js-service-widget-file.md)
 - [JS and TS APIs](reference/apis/development-intro.md)
 - Native APIs
diff --git a/en/application-dev/application-models/accessibilityextensionability.md b/en/application-dev/application-models/accessibilityextensionability.md
index 5e88bb69d8fec4fc1abd5488a5998930a6a894ad..62f0bd981504d1249e04dcf62c0041e8091496bf 100644
--- a/en/application-dev/application-models/accessibilityextensionability.md
+++ b/en/application-dev/application-models/accessibilityextensionability.md
@@ -1,4 +1,4 @@
-# AccessibilityExtensionAbility Development
+# AccessibilityExtensionAbility
 
 The **AccessibilityExtensionAbility** module provides accessibility extension capabilities based on the **ExtensionAbility** framework. You can develop your accessibility applications by applying the **AccessibilityExtensionAbility** template to enhance usability.
 
diff --git a/en/application-dev/application-models/arkts-ui-widget-working-principles.md b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
index a0edb6c6c68d9ada32cd3ff34f5117d5cc012ed6..b1b09dc409380da8e530f571b2e5711ec63edd10 100644
--- a/en/application-dev/application-models/arkts-ui-widget-working-principles.md
+++ b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
@@ -3,42 +3,45 @@
 
 ## Implementation Principles
 
-  **Figure 1** ArkTS widget implementation principles 
+**Figure 1** ArkTS widget implementation principles
+
 ![WidgetPrinciple](figures/WidgetPrinciple.png)
 
 - Widget host: an application that displays the widget content and controls the widget location. Only the system application can function as a widget host.
 
 - Widget provider: an application that provides the widget content to display and controls how widget components are laid out and how they interact with users.
 
-- Widget Manager: a resident agent that manages widgets in the system. It provides the [formProvider](../reference/apis/js-apis-app-form-formProvider.md) and [formHost](../reference/apis/js-apis-app-form-formHost.md) APIs as well as widget management, usage, and periodic updates. 
+- Widget Manager: a resident agent that manages widgets in the system. It provides the [formProvider](../reference/apis/js-apis-app-form-formProvider.md) and [formHost](../reference/apis/js-apis-app-form-formHost.md) APIs as well as the APIs for widget management, usage, and periodic updates.
 
 - Widget rendering service: a service that manages widget rendering instances. Widget rendering instances are bound to the [widget components](../reference/arkui-ts/ts-basic-components-formcomponent.md) on the widget host on a one-to-one basis. The widget rendering service runs the widget page code **widgets.abc** for rendering, and sends the rendered data to the corresponding widget component on the widget host.
 
   **Figure 2** Working principles of the ArkTS widget rendering service 
 ![WidgetRender](figures/WidgetRender.png)
 
-Unlike JS widgets, ArkTS widgets support logic code running. To avoid potential ArkTS widget issues from affecting the use of applications, the widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of an application provider run in the same virtual machine operating environment, and rendering instances of different application providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different application providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) object. Use one **globalThis** object for widgets by the same application provider, and different **globalThis** objects for widgets by different application providers.
+Unlike JS widgets, ArkTS widgets support logic code running. The widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of a widget provider run in the same virtual machine operating environment, and rendering instances of different widget providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different widget providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) object. Use one **globalThis** object for widgets from the same widget provider, and different **globalThis** objects for widgets from different widget providers.
 
 
 ## Advantages of ArkTS Widgets
 
-As a quick entry to applications, ArkTS widgets have the following advantages over JS widgets:
+As a quick entry to applications, ArkTS widgets outperform JS widgets in the following aspects:
 
 - Improved development experience and efficiency, thanks to the unified development paradigm
+  
   ArkTS widgets share the same declarative UI development framework as application pages. This means that the page layouts can be directly reused in widgets, improving development experience and efficiency.
-
-    **Figure 3** Comparison of widget project structures 
+  
+  **Figure 3** Comparison of widget project structures
+  
   ![WidgetProject](figures/WidgetProject.png)
-
+  
 - More widget features
-  - Animation: The ArkTS widget supports the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
-  - Custom drawing: The ArkTS widget allows you to draw graphics with the [Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
-  - Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the service application scenarios of widgets.
+  - Animation: ArkTS widgets support the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
+  - Custom drawing: ArkTS widgets allow you to draw graphics with the [\<Canvas>](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
+  - Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the use cases of widgets.
 
 
 ## Constraints on ArkTS Widgets
 
-Compared with JS widgets, ArkTS widgets provide more capabilities, but they are also more prone to malicious behavior. The ArkTS widget is displayed in the widget host, which is usually the home screen. To ensure user experience and power consumption, the ArkTS widget capability is restricted as follows:
+Compared with JS widgets, ArkTS widgets provide more capabilities, but they are also more prone to malicious behavior. To account for the impact on the widget host – typically the home screen, ArkTS widgets are subject to the following restrictions:
 
 - The .so file cannot be loaded.
 
@@ -46,12 +49,14 @@ Compared with JS widgets, ArkTS widgets provide more capabilities, but they are
 
 - Only [partial](arkts-ui-widget-page-overview.md) components, events, animations, data management, state management, and API capabilities of the declarative paradigm are supported.
 
-- The event processing of the widget is independent of that of the widget host. It is recommended that you do not use the left and right sliding components when the widget host supports left and right swipes to prevent gesture conflicts.
+- The event processing of the widget is independent of that of the widget host. To prevent gesture conflicts, avoid using swipers in the widget when the widget host supports left and right swipes.
 
-The following features are coming to ArkTS widgets in later versions:
+In addition, ArkTS widgets do not support the following features:
 
-- Breakpoint debugging
-
-- import statements
+- Importing modules
 
 - Instant preview
+
+- Breakpoint debugging.
+
+- Hot reload
diff --git a/en/application-dev/application-models/figures/WidgetPrinciple.png b/en/application-dev/application-models/figures/WidgetPrinciple.png
index 588975d0095de58d0d220809ba77aec541a64984..68ca315394fe2cb5bd2580ca6df38b9940ac1349 100644
Binary files a/en/application-dev/application-models/figures/WidgetPrinciple.png and b/en/application-dev/application-models/figures/WidgetPrinciple.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProject.png b/en/application-dev/application-models/figures/WidgetProject.png
index 788bb3ac63ca5727527bd104f76689f762b7b33d..299eed75fc1edfd9557e0fe743facb0e9c8d94b2 100644
Binary files a/en/application-dev/application-models/figures/WidgetProject.png and b/en/application-dev/application-models/figures/WidgetProject.png differ
diff --git a/en/application-dev/application-models/figures/WidgetRender.png b/en/application-dev/application-models/figures/WidgetRender.png
index 228128b143995fec75c71c4172e3d90ca15177f6..0f46bd74b0e48ac0c9f947d96d5e147786f547c0 100644
Binary files a/en/application-dev/application-models/figures/WidgetRender.png and b/en/application-dev/application-models/figures/WidgetRender.png differ
diff --git a/en/application-dev/file-management/app-fs-space-statistics.md b/en/application-dev/file-management/app-fs-space-statistics.md
index 6854af8c857173db01bcaf730722630c4bffba1b..9596834a5b5bda14e810061817dcdf55da3aaf3a 100644
--- a/en/application-dev/file-management/app-fs-space-statistics.md
+++ b/en/application-dev/file-management/app-fs-space-statistics.md
@@ -10,7 +10,7 @@ For details about the APIs, see [ohos.file.statvfs](../reference/apis/js-apis-fi
 
 | Module| API| Description|
 | -------- | -------- | -------- |
-| \@ohos.file.storageStatistic | getCurrentBundleStats | Obtains the storage space of the current application, in bytes.| 
+| \@ohos.file.storageStatistics | getCurrentBundleStats | Obtains the storage space of the current application, in bytes.| 
 | \@ohos.file.statvfs | getFreeSize | Obtains the free space of a file system, in bytes.| 
 | \@ohos.file.statvfs | getTotalSize | Obtains the total space of a file system, in bytes.| 
 
diff --git a/en/application-dev/file-management/save-user-file.md b/en/application-dev/file-management/save-user-file.md
index d1ca80444deffa2bad38f01442e0135e20ac67c3..db6ad37908be0a1fe1dd00e36c4553830bf03c72 100644
--- a/en/application-dev/file-management/save-user-file.md
+++ b/en/application-dev/file-management/save-user-file.md
@@ -7,10 +7,11 @@ The operations for saving images, audio or video clips, and documents are simila
 
 ## Saving Images or Video Files
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create a **photoSaveOptions** instance.
@@ -20,27 +21,43 @@ The operations for saving images, audio or video clips, and documents are simila
    photoSaveOptions.newFileNames = ["PhotoViewPicker01.jpg"]; // (Optional) Set the names of the files to save.
    ```
 
-3. Create a **photoViewPicker** instance and call [save()](../reference/apis/js-apis-file-picker.md#save) to open the **FilePicker** page to save the files.
-     After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
+3. Create a **photoViewPicker** instance and call [save()](../reference/apis/js-apis-file-picker.md#save) to open the **FilePicker** page to save the files. After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
+   
+   <br>The permission on the URIs returned by **save()** is read/write. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
 
    ```ts
+   let URI = null;
    const photoViewPicker = new picker.PhotoViewPicker();
-   photoViewPicker.save(photoSaveOptions)
-     .then(async (photoSaveResult) => {
-       let uri = photoSaveResult[0];
-       // Perform operations on the files based on the file URIs obtained.
-     })
-     .catch((err) => {
-       console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
-     })
+   photoViewPicker.save(photoSaveOptions).then((photoSaveResult) => {
+     URI = photoSaveResult[0];
+     console.info('photoViewPicker.save to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke photoViewPicker.save failed, code is ${err.code}, message is ${err.message}`);
+   })
+   ```
+
+4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_WRITE**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_WRITE);
+   console.info('file fd: ' + file.fd);
+   ```
+
+5. Use [fs.writeSync()](../reference/apis/js-apis-file-fs.md#writesync) to edit the file based on the FD, and then close the FD.
+
+   ```ts
+   let writeLen = fs.writeSync(file.fd, 'hello, world');
+   console.info('write data to file succeed and size is:' + writeLen);
+   fs.closeSync(file);
    ```
 
 ## Saving Documents
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create a **documentSaveOptions** instance.
@@ -50,31 +67,43 @@ The operations for saving images, audio or video clips, and documents are simila
    documentSaveOptions.newFileNames = ["DocumentViewPicker01.txt"]; // (Optional) Set the names of the documents to save.
    ```
 
-3. Create a **documentViewPicker** instance, and call [save()](../reference/apis/js-apis-file-picker.md#save-3) to open the **FilePicker** page to save the documents.
-   After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
-
-   > **NOTE**
-   >
-   > Currently, **DocumentSelectOptions** is not configurable. By default, all types of user files are selected.
+3. Create a **documentViewPicker** instance, and call [save()](../reference/apis/js-apis-file-picker.md#save-3) to open the **FilePicker** page to save the documents. After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
+   
+   The permission on the URIs returned by **save()** is read/write. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
 
    ```ts
+   let URI = null;
    const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
-   documentViewPicker.save(documentSaveOptions)
-     .then(async (documentSaveResult) => {
-       let uri = documentSaveResult[0];
-       // For example, write data to the documents based on the obtained URIs.
-     })
-     .catch((err) => {
-       console.error(`Invoke documentPicker.save failed, code is ${err.code}, message is ${err.message}`);
-     })
+   documentViewPicker.save(documentSaveOptions).then((documentSaveResult) => {
+     URI = documentSaveResult[0];
+     console.info('documentViewPicker.save to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke documentViewPicker.save failed, code is ${err.code}, message is ${err.message}`);
+   })
+   ```
+
+4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_WRITE**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_WRITE);
+   console.info('file fd: ' + file.fd);
+   ```
+
+5. Use [fs.writeSync()](../reference/apis/js-apis-file-fs.md#writesync) to edit the file based on the FD, and then close the FD.
+
+   ```ts
+   let writeLen = fs.writeSync(file.fd, 'hello, world');
+   console.info('write data to file succeed and size is:' + writeLen);
+   fs.closeSync(file);
    ```
 
 ## Saving Audio Files
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create an **audioSaveOptions** instance.
@@ -84,20 +113,33 @@ The operations for saving images, audio or video clips, and documents are simila
    audioSaveOptions.newFileNames = ['AudioViewPicker01.mp3']; // (Optional) Set the names of the files to save.
    ```
 
-3. Create an **audioViewPicker** instance, and call [save()](../reference/apis/js-apis-file-picker.md#save-6) to open the **FilePicker** page to save the files.
-     After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
-   > **NOTE**
-   >
-   > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.
-
+3. Create an **audioViewPicker** instance, and call [save()](../reference/apis/js-apis-file-picker.md#save-6) to open the **FilePicker** page to save the files. After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned.
+   
+   The permission on the URIs returned by **save()** is read/write. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
+   
    ```ts
+   let URI = null;
    const audioViewPicker = new picker.AudioViewPicker();
-   audioViewPicker.save(audioSaveOptions)
-     .then((audioSelectResult) => {
-       let uri = audioSelectResult[0];
-       // Perform operations on the audio files based on the file URIs.
-     })
-     .catch((err) => {
-       console.error(`Invoke audioPicker.select failed, code is ${err.code}, message is ${err.message}`);
-     })
+   audioViewPicker.save(audioSaveOptions).then((audioSelectResult) => {
+     URI = audioSelectResult[0];
+     console.info('audioViewPicker.save to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke audioViewPicker.save failed, code is ${err.code}, message is ${err.message}`);
+   })
+   ```
+
+4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_WRITE**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_WRITE);
+   console.info('file fd: ' + file.fd);
+   ```
+
+5. Use [fs.writeSync](../reference/apis/js-apis-file-fs.md#writesync) to edit the file based on the FD, and then close the FD.
+
+   ```ts
+   let writeLen = fs.writeSync(file.fd, 'hello, world');
+   console.info('write data to file succeed and size is:' + writeLen);
+   fs.closeSync(file);
    ```
+   
diff --git a/en/application-dev/file-management/select-user-file.md b/en/application-dev/file-management/select-user-file.md
index c87015b50235ff9c54721668c019caea9119a5ae..853aae60d7e73fa4238e388eefb19ded0ca59b1d 100644
--- a/en/application-dev/file-management/select-user-file.md
+++ b/en/application-dev/file-management/select-user-file.md
@@ -1,6 +1,6 @@
 # Selecting User Files
 
-If your application needs to support share and saving of user files (such as images and videos) by users, you can use the [FilePicker](../reference/apis/js-apis-file-picker.md) prebuilt in OpenHarmony to implement selecting and saving of user files.
+If your application needs to support share and saving of user files (such as images and videos), you can use OpenHarmony [FilePicker](../reference/apis/js-apis-file-picker.md) to implement selection and saving of user files.
 
 The **FilePicker** provides the following interfaces by file type:
 
@@ -12,10 +12,11 @@ The **FilePicker** provides the following interfaces by file type:
 
 ## Selecting Images or Video Files
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create a **photoSelectOptions** instance.
@@ -32,28 +33,44 @@ The **FilePicker** provides the following interfaces by file type:
    photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
    ```
 
-4. Create a **photoPicker** instance and call [select()](../reference/apis/js-apis-file-picker.md#select) to open the **FilePicker** page for the user to select files.
+4. Create a **photoPicker** instance and call [select()](../reference/apis/js-apis-file-picker.md#select) to open the **FilePicker** page for the user to select files. After the files are selected, [PhotoSelectResult](../reference/apis/js-apis-file-picker.md#photoselectresult) is returned.
+   
+   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the **PhotoSelectResult**. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
 
-   Use [PhotoSelectResult](../reference/apis/js-apis-file-picker.md#photoselectresult) to return a result set. Further operations on the selected files can be performed based on the file URIs in the result set.
+   ```ts
+   let URI = null;
+   const photoViewPicker = new picker.PhotoViewPicker();
+   photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
+     URI = photoSelectResult.photoUris[0];
+     console.info('photoViewPicker.select to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
+   })
+   ```
+
+5. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
+   console.info('file fd: ' + file.fd);
+   ```
+
+6. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
 
    ```ts
-   const photoPicker = new picker.PhotoViewPicker();
-   photoPicker.select(photoSelectOptions)
-     .then(async (photoSelectResult) => {
-       let uri = photoSelectResult.photoUris[0];
-       // Perform operations on the files based on the file URIs obtained.
-     })
-     .catch((err) => {
-       console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
-     })
+   let buffer = new ArrayBuffer(4096);
+   let readLen = fs.readSync(file.fd, buffer);
+   console.info('readSync data to file succeed and buffer size is:' + readLen);
+   fs.closeSync(file);
    ```
 
 ## Selecting Documents
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create a **documentSelectOptions** instance.
@@ -62,26 +79,25 @@ The **FilePicker** provides the following interfaces by file type:
    const documentSelectOptions = new picker.DocumentSelectOptions(); 
    ```
 
-3. Create a **documentViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-3) to open the **FilePicker** page for the user to select documents.
-
-     After the documents are selected successfully, a result set containing the file URIs is returned. Further operations can be performed on the documents based on the file URIs.
-
-   For example, you can use [file management APIs](../reference/apis/js-apis-file-fs.md) to obtain file attribute information, such as the file size, access time, and last modification time, based on the URI. If you need to obtain the file name, use [startAbilityForResult](../../application-dev/application-models/uiability-intra-device-interaction.md).
+3. Create a **documentViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-3) to open the **FilePicker** page for the user to select documents. After the documents are selected, a result set containing the file URIs is returned.
+   
+   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
+   
+   <br>For example, you can use [file management APIs](../reference/apis/js-apis-file-fs.md) to obtain file attribute information, such as the file size, access time, and last modification time, based on the URI. If you need to obtain the file name, use [startAbilityForResult](../../application-dev/application-models/uiability-intra-device-interaction.md).
 
    > **NOTE**
    >
    > Currently, **DocumentSelectOptions** is not configurable. By default, all types of user files are selected.
 
    ```ts
+   let URI = null;
    const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
-   documentViewPicker.select(documentSelectOptions)
-     .then((documentSelectResult) => {
-       let uri = documentSelectResult[0];
-       // Perform operations on the documents based on the file URIs.
-     })
-     .catch((err) => {
-       console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
-     })
+   documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
+     URI = documentSelectResult[0];
+     console.info('documentViewPicker.select to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
+   })
    ```
 
    > **NOTE**
@@ -98,7 +114,7 @@ The **FilePicker** provides the following interfaces by file type:
    try {
      let result = await context.startAbilityForResult(config, {windowMode: 1});
      if (result.resultCode !== 0) {
-       console.error(`DocumentPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
+       console.error(`documentViewPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
        return;
      }
      // Obtain the URI of the document.
@@ -106,16 +122,34 @@ The **FilePicker** provides the following interfaces by file type:
      // Obtain the name of the document.
      let file_name_list = result.want.parameters.file_name_list;
    } catch (err) {
-     console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
+     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    }
    ```
 
+4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
+   console.info('file fd: ' + file.fd);
+   ```
+
+5. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
+
+   ```ts
+   let buffer = new ArrayBuffer(4096);
+   let readLen = fs.readSync(file.fd, buffer);
+   console.info('readSync data to file succeed and buffer size is:' + readLen);
+   fs.closeSync(file);
+   ```
+
+
 ## Selecting an Audio File
 
-1. Import the **FilePicker** module.
+1. Import the **picker** module and **fs** module.
 
    ```ts
    import picker from '@ohos.file.picker';
+   import fs from '@ohos.file.fs';
    ```
 
 2. Create an **audioSelectOptions** instance.
@@ -124,24 +158,39 @@ The **FilePicker** provides the following interfaces by file type:
    const audioSelectOptions = new picker.AudioSelectOptions();
    ```
 
-3. Create an **audioViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-6) to open the **FilePicker** page for the user to select audio files.
-  
-   After the files are selected successfully, a result set containing the URIs of the audio files selected is returned. Further operations can be performed on the documents based on the file URIs.
-
-   For example, use the [file management interface](../reference/apis/js-apis-file-fs.md) to obtain the file handle (FD) of the audio clip based on the URI, and then develop the audio playback function based on the media service. For details, see [Audio Playback Development](../media/audio-playback-overview.md).
+3. Create an **audioViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-6) to open the **FilePicker** page for the user to select audio files. After the files are selected, a result set containing the URIs of the audio files selected is returned.
+   
+   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening.
+   
+   <br>For example, use the [file management interface](../reference/apis/js-apis-file-fs.md) to obtain the file handle (FD) of the audio clip based on the URI, and then develop the audio playback function based on the media service. For details, see [Audio Playback Development](../media/audio-playback-overview.md).
 
    > **NOTE**
    >
    > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.
 
    ```ts
+   let URI = null;
    const audioViewPicker = new picker.AudioViewPicker();
-   audioViewPicker.select(audioSelectOptions)
-     .then(audioSelectResult => {
-       let uri = audioSelectOptions[0];
-       // Perform operations on the audio files based on the file URIs.
-     })
-     .catch((err) => {
-       console.error(`Invoke audioPicker.select failed, code is ${err.code}, message is ${err.message}`);
-     })
+   audioViewPicker.select(audioSelectOptions).then(audioSelectResult => {
+     URI = audioSelectOptions[0];
+     console.info('audioViewPicker.select to file succeed and URI is:' + URI);
+   }).catch((err) => {
+     console.error(`Invoke audioViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
+   })
+   ```
+
+4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
+
+   ```ts
+   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
+   console.info('file fd: ' + file.fd);
+   ```
+
+5. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
+
+   ```ts
+   let buffer = new ArrayBuffer(4096);
+   let readLen = fs.readSync(file.fd, buffer);
+   console.info('readSync data to file succeed and buffer size is:' + readLen);
+   fs.closeSync(file);
    ```
diff --git a/en/application-dev/quick-start/multi-hap-release-deployment.md b/en/application-dev/quick-start/multi-hap-release-deployment.md
index b4587f2c2125c526b86bfa0646af4b1fcbc9e9d3..4d3d1167e7765e25f3e07942a0ce703e7e2b2355 100644
--- a/en/application-dev/quick-start/multi-hap-release-deployment.md
+++ b/en/application-dev/quick-start/multi-hap-release-deployment.md
@@ -9,7 +9,9 @@ Below is the process of developing, debugging, releasing, and deploying multiple
 You can use [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio) to create multiple modules as needed and develop services in respective modules.
 
 ## Debugging
-After building code into one or more HAP files and installing or updating these HAP files, you can debug them by using the methods:
+After building code into one or more HAP files and installing or updating these HAP files, you can debug them. You can leverage a single set of code and files to build multiple target editions for different audiences, deployment environments, operating environments, and more. For details, see [Customizing Multi-Target and Multi-Product Builds](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/customized-multi-targets-and-products-0000001430013853-V3?catalogVersion=V3).
+
+You can debug HAP files using the methods:
 * Using DevEco Studio for debugging
 
    Follow the instructions in [Debugging Configuration](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section10491183521520).
@@ -49,7 +51,7 @@ After building code into one or more HAP files and installing or updating these
     // The execution result is as follows:
     uninstall bundle successfully.
     ```
-    After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/tools/aa-tool.md/).
+    After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](../tools/aa-tool.md).
 
 ## Release
 When your application package meets the release requirements, you can package and build it into an App Pack and release it to the application market on the cloud. The application market verifies the signature of the App Pack. If the signature verification is successful, the application market obtains the HAP files from the App Pack, signs them, and distributes the signed HAP files.
diff --git a/en/application-dev/quick-start/shared-guide.md b/en/application-dev/quick-start/shared-guide.md
index 2a7ed0b4b5fafa4e1afcebca5c6799239b6f814c..1cac8ec4910a7b9d7aa76c5717cee2c8dc260bbb 100644
--- a/en/application-dev/quick-start/shared-guide.md
+++ b/en/application-dev/quick-start/shared-guide.md
@@ -1,6 +1,6 @@
 # Shared Package Overview
 
-OpenHarmony provides two types of shared packages: [Harmony Achive (HAR)](har-package.md) static shared package and Harmony Shared Package (HSP) dynamic shared package.
+OpenHarmony provides two types of shared packages: [Harmony Archive (HAR)](har-package.md) static shared package and Harmony Shared Package (HSP) dynamic shared package.
 
 Both the HAR and HSP are used to share code and resources and can contain code, C++ libraries, resources, and configuration files. The biggest differences between them are as follows: The code and resources in the HAR are compiled with the invoking module, and if there are multiple invoking modules, the build product contains multiple copies of the same code and resources; the code and resources in the HSP can be compiled independently, and the build product contains only one copy of the code and resources.
 
diff --git a/en/application-dev/quick-start/start-with-ets-stage.md b/en/application-dev/quick-start/start-with-ets-stage.md
index 978ffd47a206abc5f5b3e047a8d7f3dcc0e599e9..fb8593d555aec31c44e7a6658f6a68f2ab99dccb 100644
--- a/en/application-dev/quick-start/start-with-ets-stage.md
+++ b/en/application-dev/quick-start/start-with-ets-stage.md
@@ -37,14 +37,14 @@
 
 - **AppScope** > **app.json5**: global configuration of your application.
 - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
-- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
   - **src > main > ets**: a collection of ArkTS source code.
   - **src > main > ets > entryability**: entry to your application/service.
   - **src > main > ets > pages**: pages included in your application/service.
   - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
   - **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [module.json5 Configuration File](module-configuration-file.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application.
-- **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
+  - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
+- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
 - **hvigorfile.ts**: application-level build script.
 
diff --git a/en/application-dev/reference/apis/js-apis-cardEmulation.md b/en/application-dev/reference/apis/js-apis-cardEmulation.md
index 599ec851697326c6329d1d080fe611a3161a9514..946ebd2f881fe66a7ec6b0afc8e308d254a6f68c 100644
--- a/en/application-dev/reference/apis/js-apis-cardEmulation.md
+++ b/en/application-dev/reference/apis/js-apis-cardEmulation.md
@@ -21,11 +21,11 @@ Enumerates the NFC card emulation types.
 
 **System capability**: SystemCapability.Communication.NFC.CardEmulation
 
-| Name| Value| Description|
-| -------- | -------- | -------- |
-| HCE | 0 | HCE.|
-| UICC | 1 | Subscriber identity module (SIM) card emulation.|
-| ESE | 2 | embedded Secure Element (eSE) emulation.|
+| Name  | Value   | Description      |
+| ---- | ---- | -------- |
+| HCE  | 0    | HCE.|
+| UICC | 1    | Subscriber identity module (SIM) card emulation.|
+| ESE  | 2    | embedded Secure Element (eSE) emulation. |
 
 ## CardType<sup>9+</sup>
 
@@ -33,10 +33,10 @@ Enumerates the types of services used by the card emulation application.
 
 **System capability**: SystemCapability.Communication.NFC.CardEmulation
 
-| Name| Value| Description|
-| -------- | -------- | -------- |
+| Name     | Value        | Description               |
+| ------- | --------- | ----------------- |
 | PAYMENT | "payment" | Payment type.|
-| OTHER | "other" | Other types.|
+| OTHER   | "other"   | Other types.|
 
 ## isSupported
 
@@ -51,14 +51,14 @@ Checks whether a certain type of card emulation is supported.
 
 **Parameters**
 
-| Name | Type    | Mandatory| Description                   |
-| ------- | -------- | ---- | ----------------------- |
-| feature | number | Yes  | Card emulation type. For details, see [FeatureType](#featuretype).|
+| Name    | Type    | Mandatory  | Description                                      |
+| ------- | ------ | ---- | ---------------------------------------- |
+| feature | number | Yes   | Card emulation type. For details, see [FeatureType](#featuretype).|
 
 **Return value**
 
-| **Type**| **Description**|
-| -------- | -------- |
+| **Type** | **Description**                                |
+| ------- | -------------------------------------- |
 | boolean | Returns **true** if the card emulation type is supported; returns **false** otherwise.|
 
 ## hasHceCapability<sup>9+</sup>
@@ -73,8 +73,8 @@ Checks whether HCE is supported.
 
 **Return value**
 
-| **Type**| **Description**|
-| -------- | -------- |
+| **Type** | **Description**                          |
+| ------- | -------------------------------- |
 | boolean | Returns **true** if HCE is supported; returns **false** otherwise.|
 
 ## isDefaultService<sup>9+</sup>
@@ -89,15 +89,15 @@ Checks whether an application is the default application of the specified servic
 
 **Parameters**
 
-| Name | Type    | Mandatory| Description                   |
-| ------- | -------- | ---- | ----------------------- |
-| elementName | [ElementName](js-apis-bundleManager-elementName.md#elementname) | Yes| Application description, which consists of the bundle name and component name.|
-| type | [CardType](#cardtype9) | Yes| Card emulation service type.|
+| Name        | Type                                      | Mandatory  | Description                     |
+| ----------- | ---------------------------------------- | ---- | ----------------------- |
+| elementName | [ElementName](js-apis-bundleManager-elementName.md#elementname) | Yes   | Application description, which consists of the bundle name and component name.|
+| type        | [CardType](#cardtype9)                   | Yes   | Card emulation service type.               |
 
 **Return value**
 
-| **Type**| **Description**|
-| -------- | -------- |
+| **Type** | **Description**                              |
+| ------- | ------------------------------------ |
 | boolean | Returns **true** if the application is the default payment application; returns **false** otherwise.|
 
 **Example**
@@ -108,13 +108,11 @@ import cardEmulation from '@ohos.nfc.cardEmulation';
 var isHceSupported = cardEmulation.isSupported(cardEmulation.FeatureType.HCE);
 if (!isHceSupported) {
     console.log('this device is not supported for HCE, ignore it.');
-    return;
 }
 
 var hasHceCap = cardEmulation.hasHceCapability();
 if (!hasHceCap) {
     console.log('this device hasHceCapability false, ignore it.');
-    return;
 }
 
 var elementName = {
diff --git a/en/application-dev/reference/apis/js-apis-data-relationalStore.md b/en/application-dev/reference/apis/js-apis-data-relationalStore.md
index ff821bff9240e8862640eb6dba668c8a9faf46ef..218572271420e03a9ff960879087a818751e4360 100644
--- a/en/application-dev/reference/apis/js-apis-data-relationalStore.md
+++ b/en/application-dev/reference/apis/js-apis-data-relationalStore.md
@@ -6,7 +6,7 @@ The **relationalStore** module provides the following functions:
 
 - [RdbPredicates](#rdbpredicates): provides predicates indicating the nature, feature, or relationship of a data entity in an RDB store. It is used to define the operation conditions for an RDB store.
 - [RdbStore](#rdbstore): provides APIs for managing data in an RDB store.
-- [ResultSet](#resultset): provides APIs for accessing the result set obtained from the RDB store. 
+- [Resultset](#resultset): provides APIs for accessing the result set obtained from the RDB store. 
 
 > **NOTE**
 > 
@@ -38,11 +38,11 @@ Obtains an RDB store. This API uses an asynchronous callback to return the resul
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                     |
-| ------------ | ------------------------------------------------- |
+| **ID**| **Error Message**                                               |
+| ------------ | ----------------------------------------------------------- |
 | 14800010     | Failed to open or delete database by invalid database path. |
-| 14800011     | Failed open database, database corrupted.         |
-| 14800000     | The inner error is occurred.                      |
+| 14800011     | Failed to open database by database corrupted.              |
+| 14800000     | Inner error.                                                |
 
 **Example**
 
@@ -122,11 +122,11 @@ Obtains an RDB store. This API uses a promise to return the result. You can set
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                     |
-| ------------ | ------------------------------------------------- |
+| **ID**| **Error Message**                                               |
+| ------------ | ----------------------------------------------------------- |
 | 14800010     | Failed to open or delete database by invalid database path. |
-| 14800011     | Failed open database, database corrupted.         |
-| 14800000     | The inner error is occurred.                      |
+| 14800011     | Failed to open database by database corrupted.              |
+| 14800000     | Inner error.                                                |
 
 **Example**
 
@@ -198,10 +198,10 @@ Deletes an RDB store. This API uses an asynchronous callback to return the resul
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                     |
-| ------------ | ------------------------------------------------- |
+| **ID**| **Error Message**                                               |
+| ------------ | ----------------------------------------------------------- |
 | 14800010     | Failed to open or delete database by invalid database path. |
-| 14800000     | The inner error is occurred.                      |
+| 14800000     | Inner error.                                                |
 
 **Example**
 
@@ -265,10 +265,10 @@ Deletes an RDB store. This API uses a promise to return the result.
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                     |
-| ------------ | ------------------------------------------------- |
+| **ID**| **Error Message**                                               |
+| ------------ | ----------------------------------------------------------- |
 | 14800010     | Failed to open or delete database by invalid database path. |
-| 14800000     | The inner error is occurred.                      |
+| 14800000     | Inner error.                                                |
 
 **Example**
 
@@ -323,7 +323,7 @@ Enumerates the RDB store security levels.
 
 > **NOTE**
 >
-> To perform data synchronization operations, the RDB store security level must be lower than or equal to that of the peer device. For details, see the [Access Control Mechanism in Cross-Device Synchronization](../../database/access-control-by-device-and-data-level.md#access-control-mechanism-in-cross-device-synchronization).
+> To perform data synchronization operations, the RDB store security level must be lower than or equal to that of the peer device. For details, see the [Cross-Device Data Synchronization Mechanism]( ../../database/sync-app-data-across-devices-overview.md#cross-device-data-synchronization-mechanism).
 
 **System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
 
@@ -378,10 +378,26 @@ Defines the subscription type.
 | Name                 | Value  | Description              |
 | --------------------- | ---- | ------------------ |
 | SUBSCRIBE_TYPE_REMOTE | 0    | Subscribe to remote data changes.|
+| SUBSCRIBE_TYPE_CLOUD<sup>10+</sup> | 1    | Subscribe to cloud data changes.|
+
+## ConflictResolution<sup>10+</sup>
+
+Defines the resolution to use when **insert()** and **update()** conflict.
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+| Name                | Value  | Description                                                        |
+| -------------------- | ---- | ------------------------------------------------------------ |
+| ON_CONFLICT_NONE | 0 | No operation is performed.|
+| ON_CONFLICT_ROLLBACK | 1    | Abort the SQL statement and roll back the current transaction.               |
+| ON_CONFLICT_ABORT    | 2    | Abort the current SQL statement and revert any changes made by the current SQL statement. However, the changes made by the previous SQL statement in the same transaction are retained and the transaction remains active.|
+| ON_CONFLICT_FAIL     | 3    | Abort the current SQL statement. The **FAIL** resolution does not revert previous changes made by the failed SQL statement or end the transaction.|
+| ON_CONFLICT_IGNORE   | 4    | Skip the rows that contain constraint violations and continue to process the subsequent rows of the SQL statement.|
+| ON_CONFLICT_REPLACE  | 5    | Delete pre-existing rows that cause the constraint violation before inserting or updating the current row, and continue to execute the command normally.|
 
 ## RdbPredicates
 
-Defines the predicates for an RDB store. This class determines whether the conditional expression for the RDB store is true or false. This type is not multi-thread safe. If a **RdbPredicates** instance is operated by multiple threads at the same time in an application, use a lock for the instance.
+Defines the predicates for an RDB store. This class determines whether the conditional expression for the RDB store is true or false. This type is not multi-thread safe. If an **RdbPredicates** instance is operated by multiple threads at the same time in an application, use a lock for the instance.
 
 ### constructor
 
@@ -1237,10 +1253,27 @@ predicates.notIn("NAME", ["Lisa", "Rose"]);
 
 ## RdbStore
 
-Provides methods to manage an RDB store.
+Provides APIs to manage an RDB store.
 
 Before using the APIs of this class, use [executeSql](#executesql) to initialize the database table structure and related data.
 
+### Attributes<sup>10+</sup>
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+| Name        | Type           | Mandatory| Description                            |
+| ------------ | ----------- | ---- | -------------------------------- |
+| version<sup>10+</sup>  | number | Yes  | RDB store version, which is an integer greater than 0.      |
+
+**Example**
+
+```js
+// Set the RDB store version.
+store.version = 3;
+// Obtain the RDB store version.
+console.info(`RdbStore version is ${store.version}`);
+```
+
 ### insert
 
 insert(table: string, values: ValuesBucket, callback: AsyncCallback&lt;number&gt;):void
@@ -1257,6 +1290,15 @@ Inserts a row of data into a table. This API uses an asynchronous callback to re
 | values   | [ValuesBucket](#valuesbucket) | Yes  | Row of data to insert.                                |
 | callback | AsyncCallback&lt;number&gt;   | Yes  | Callback invoked to return the result. If the operation is successful, the row ID will be returned. Otherwise, **-1** will be returned.|
 
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                                |
+| ------------ | -------------------------------------------- |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
+
 **Example**
 
 ```js
@@ -1275,6 +1317,49 @@ store.insert("EMPLOYEE", valueBucket, function (err, rowId) {
 })
 ```
 
+### insert<sup>10+</sup>
+
+insert(table: string, values: ValuesBucket,  conflict: ConflictResolution, callback: AsyncCallback&lt;number&gt;):void
+
+Inserts a row of data into a table. This API uses an asynchronous callback to return the result.
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+**Parameters**
+
+| Name  | Type                                       | Mandatory| Description                                                      |
+| -------- | ------------------------------------------- | ---- | ---------------------------------------------------------- |
+| table    | string                                      | Yes  | Name of the target table.                                          |
+| values   | [ValuesBucket](#valuesbucket)               | Yes  | Row of data to insert.                                |
+| conflict | [ConflictResolution](#conflictresolution10) | Yes  | Resolution used to resolve the conflict.                                        |
+| callback | AsyncCallback&lt;number&gt;                 | Yes  | Callback invoked to return the result. If the operation is successful, the row ID will be returned. Otherwise, **-1** will be returned.|
+
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                                |
+| ------------ | -------------------------------------------- |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
+
+**Example**
+
+```js
+const valueBucket = {
+  "NAME": "Lisa",
+  "AGE": 18,
+  "SALARY": 100.5,
+  "CODES": new Uint8Array([1, 2, 3, 4, 5]),
+};
+store.insert("EMPLOYEE", valueBucket, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE, function (err, rowId) {
+  if (err) {
+    console.error(`Insert is failed, code is ${err.code},message is ${err.message}`);
+    return;
+  }
+  console.info(`Insert is successful, rowId = ${rowId}`);
+})
+```
 
 ### insert
 
@@ -1303,7 +1388,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1322,6 +1408,53 @@ promise.then((rowId) => {
 })
 ```
 
+### insert<sup>10+</sup>
+
+insert(table: string, values: ValuesBucket,  conflict: ConflictResolution):Promise&lt;number&gt;
+
+Inserts a row of data into a table. This API uses a promise to return the result.
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+**Parameters**
+
+| Name  | Type                                       | Mandatory| Description                      |
+| -------- | ------------------------------------------- | ---- | -------------------------- |
+| table    | string                                      | Yes  | Name of the target table.          |
+| values   | [ValuesBucket](#valuesbucket)               | Yes  | Row of data to insert.|
+| conflict | [ConflictResolution](#conflictresolution10) | Yes  | Resolution used to resolve the conflict.        |
+
+**Return value**
+
+| Type                 | Description                                             |
+| --------------------- | ------------------------------------------------- |
+| Promise&lt;number&gt; | Promise used to return the result. If the operation is successful, the row ID will be returned. Otherwise, **-1** will be returned.|
+
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                                |
+| ------------ | -------------------------------------------- |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
+
+**Example**
+
+```js
+const valueBucket = {
+  "NAME": "Lisa",
+  "AGE": 18,
+  "SALARY": 100.5,
+  "CODES": new Uint8Array([1, 2, 3, 4, 5]),
+};
+let promise = store.insert("EMPLOYEE", valueBucket, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE);
+promise.then((rowId) => {
+  console.info(`Insert is successful, rowId = ${rowId}`);
+}).catch((err) => {
+  console.error(`Insert is failed, code is ${err.code},message is ${err.message}`);
+})
+```
 
 ### batchInsert
 
@@ -1345,7 +1478,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1406,7 +1540,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1455,14 +1590,14 @@ Updates data in the RDB store based on the specified **RdbPredicates** object. T
 | predicates | [RdbPredicates](#rdbpredicates) | Yes  | Update conditions specified by the **RdbPredicates** object.                   |
 | callback   | AsyncCallback&lt;number&gt;          | Yes  | Callback invoked to return the number of rows updated.                  |
 
-
 **Error codes**
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1484,6 +1619,51 @@ store.update(valueBucket, predicates, function (err, rows) {
 })
 ```
 
+### update<sup>10+</sup>
+
+update(values: ValuesBucket, predicates: RdbPredicates, conflict: ConflictResolution, callback: AsyncCallback&lt;number&gt;):void
+
+Updates data in the RDB store based on the specified **RdbPredicates** object. This API uses an asynchronous callback to return the result.
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+**Parameters**
+
+| Name    | Type                                       | Mandatory| Description                                                        |
+| ---------- | ------------------------------------------- | ---- | ------------------------------------------------------------ |
+| values     | [ValuesBucket](#valuesbucket)               | Yes  | Rows of data to update in the RDB store. The key-value pair is associated with the column name in the target table.|
+| predicates | [RdbPredicates](#rdbpredicates)            | Yes  | Update conditions specified by the **RdbPredicates** object.                     |
+| conflict   | [ConflictResolution](#conflictresolution10) | Yes  | Resolution used to resolve the conflict.                                          |
+| callback   | AsyncCallback&lt;number&gt;                 | Yes  | Callback invoked to return the number of rows updated.                  |
+
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                                |
+| ------------ | -------------------------------------------- |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
+
+**Example**
+
+```js
+const valueBucket = {
+  "NAME": "Rose",
+  "AGE": 22,
+  "SALARY": 200.5,
+  "CODES": new Uint8Array([1, 2, 3, 4, 5]),
+};
+let predicates = new relationalStore.RdbPredicates("EMPLOYEE");
+predicates.equalTo("NAME", "Lisa");
+store.update(valueBucket, predicates, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE, function (err, rows) {
+  if (err) {
+    console.error(`Updated failed, code is ${err.code},message is ${err.message}`);
+    return;
+  }
+  console.info(`Updated row count: ${rows}`);
+})
+```
 
 ### update
 
@@ -1512,7 +1692,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1533,6 +1714,55 @@ promise.then(async (rows) => {
 })
 ```
 
+### update<sup>10+</sup>
+
+update(values: ValuesBucket, predicates: RdbPredicates, conflict: ConflictResolution):Promise&lt;number&gt;
+
+Updates data based on the specified **RdbPredicates** object. This API uses a promise to return the result.
+
+**System capability**: SystemCapability.DistributedDataManager.RelationalStore.Core
+
+**Parameters**
+
+| Name    | Type                                       | Mandatory| Description                                                        |
+| ---------- | ------------------------------------------- | ---- | ------------------------------------------------------------ |
+| values     | [ValuesBucket](#valuesbucket)               | Yes  | Rows of data to update in the RDB store. The key-value pair is associated with the column name in the target table.|
+| predicates | [RdbPredicates](#rdbpredicates)            | Yes  | Update conditions specified by the **RdbPredicates** object.                     |
+| conflict   | [ConflictResolution](#conflictresolution10) | Yes  | Resolution used to resolve the conflict.                                          |
+
+**Return value**
+
+| Type                 | Description                                     |
+| --------------------- | ----------------------------------------- |
+| Promise&lt;number&gt; | Promise used to return the number of rows updated.|
+
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                                |
+| ------------ | -------------------------------------------- |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
+
+**Example**
+
+```js
+const valueBucket = {
+  "NAME": "Rose",
+  "AGE": 22,
+  "SALARY": 200.5,
+  "CODES": new Uint8Array([1, 2, 3, 4, 5]),
+};
+let predicates = new relationalStore.RdbPredicates("EMPLOYEE");
+predicates.equalTo("NAME", "Lisa");
+let promise = store.update(valueBucket, predicates, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE);
+promise.then(async (rows) => {
+  console.info(`Updated row count: ${rows}`);
+}).catch((err) => {
+  console.error(`Updated failed, code is ${err.code},message is ${err.message}`);
+})
+```
 
 ### update
 
@@ -1561,7 +1791,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1616,7 +1847,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1659,7 +1891,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1693,7 +1926,7 @@ Deletes data from the RDB store based on the specified **RdbPredicates** object.
 
 | Type                 | Description                           |
 | --------------------- | ------------------------------- |
-| Promise&lt;number&gt; | Promise used to return the number of rows deleted. |
+| Promise&lt;number&gt; | Promise used to return the number of rows deleted.|
 
 **Error codes**
 
@@ -1701,7 +1934,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1734,7 +1968,7 @@ Deletes data from the RDB store based on the specified **DataSharePredicates** o
 | ---------- | ------------------------------------------------------------ | ---- | --------------------------------------------- |
 | table      | string                                                       | Yes  | Name of the target table.                             |
 | predicates | [dataSharePredicates.DataSharePredicates](js-apis-data-dataSharePredicates.md#datasharepredicates) | Yes  | Conditions specified by the **DataSharePredicates** object for deleting data.|
-| callback   | AsyncCallback&lt;number&gt;                                  | Yes  | Callback invoked to return the number of rows deleted. |
+| callback   | AsyncCallback&lt;number&gt;                                  | Yes  | Callback invoked to return the number of rows deleted.     |
 
 **Error codes**
 
@@ -1742,7 +1976,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1790,7 +2025,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -1826,9 +2062,9 @@ Queries data from the RDB store based on specified conditions. This API uses an
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -1840,8 +2076,17 @@ store.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"], function (err,
     console.error(`Query failed, code is ${err.code},message is ${err.message}`);
     return;
   }
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 })
 ```
 
@@ -1860,20 +2105,20 @@ Queries data from the RDB store based on specified conditions. This API uses a p
 | predicates | [RdbPredicates](#rdbpredicates) | Yes  | Query conditions specified by the **RdbPredicates** object.       |
 | columns    | Array&lt;string&gt;                  | No  | Columns to query. If this parameter is not specified, the query applies to all columns.|
 
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
+
 **Return value**
 
 | Type                                                   | Description                                              |
 | ------------------------------------------------------- | -------------------------------------------------- |
 | Promise&lt;[ResultSet](#resultset)&gt; | Promise used to return the result. If the operation is successful, a **ResultSet** object will be returned.|
 
-**Error codes**
-
-For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
-
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
-
 **Example**
 
   ```js
@@ -1881,8 +2126,17 @@ let predicates = new relationalStore.RdbPredicates("EMPLOYEE");
 predicates.equalTo("NAME", "Rose");
 let promise = store.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]);
 promise.then((resultSet) => {
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 }).catch((err) => {
   console.error(`Query failed, code is ${err.code},message is ${err.message}`);
 })
@@ -1913,9 +2167,9 @@ Queries data from the RDB store based on specified conditions. This API uses an
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -1928,8 +2182,17 @@ store.query("EMPLOYEE", predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"], fu
     console.error(`Query failed, code is ${err.code},message is ${err.message}`);
     return;
   }
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 })
 ```
 
@@ -1963,9 +2226,9 @@ Queries data from the RDB store based on specified conditions. This API uses a p
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -1975,8 +2238,17 @@ let predicates = new dataSharePredicates.DataSharePredicates();
 predicates.equalTo("NAME", "Rose");
 let promise = store.query("EMPLOYEE", predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]);
 promise.then((resultSet) => {
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 }).catch((err) => {
   console.error(`Query failed, code is ${err.code},message is ${err.message}`);
 })
@@ -1988,7 +2260,7 @@ remoteQuery(device: string, table: string, predicates: RdbPredicates, columns: A
 
 Queries data from the RDB store of a remote device based on specified conditions. This API uses an asynchronous callback to return the result.
 
-> **NOTE**
+> **NOTE**<br/>
 >
 > The value of **device** is obtained by [deviceManager.getTrustedDeviceListSync](js-apis-device-manager.md#gettrusteddevicelistsync). The APIs of the **deviceManager** module are system interfaces and available only to system applications.
 
@@ -2008,9 +2280,9 @@ Queries data from the RDB store of a remote device based on specified conditions
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2037,8 +2309,17 @@ store.remoteQuery(deviceId, "EMPLOYEE", predicates, ["ID", "NAME", "AGE", "SALAR
       console.error(`Failed to remoteQuery, code is ${err.code},message is ${err.message}`);
       return;
     }
-    console.info(`ResultSet column names: ${resultSet.columnNames}`);
-    console.info(`ResultSet column count: ${resultSet.columnCount}`);
+    console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+    // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+    while(resultSet.goToNextRow()) {
+      const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+      const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+      const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+      const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+      console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+    }
+    // Release the dataset memory.
+    resultSet.close();
   }
 )
 ```
@@ -2049,7 +2330,7 @@ remoteQuery(device: string, table: string, predicates: RdbPredicates, columns: A
 
 Queries data from the RDB store of a remote device based on specified conditions. This API uses a promise to return the result.
 
-> **NOTE**
+> **NOTE**<br/>
 >
 > The value of **device** is obtained by [deviceManager.getTrustedDeviceListSync](js-apis-device-manager.md#gettrusteddevicelistsync). The APIs of the **deviceManager** module are system interfaces and available only to system applications.
 
@@ -2074,9 +2355,9 @@ Queries data from the RDB store of a remote device based on specified conditions
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2099,8 +2380,17 @@ let predicates = new relationalStore.RdbPredicates('EMPLOYEE');
 predicates.greaterThan("id", 0);
 let promise = store.remoteQuery(deviceId, "EMPLOYEE", predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]);
 promise.then((resultSet) => {
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 }).catch((err) => {
   console.error(`Failed to remoteQuery, code is ${err.code},message is ${err.message}`);
 })
@@ -2126,9 +2416,9 @@ Queries data using the specified SQL statement. This API uses an asynchronous ca
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2138,8 +2428,17 @@ store.querySql("SELECT * FROM EMPLOYEE CROSS JOIN BOOK WHERE BOOK.NAME = ?", ['s
     console.error(`Query failed, code is ${err.code},message is ${err.message}`);
     return;
   }
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 })
 ```
 
@@ -2168,17 +2467,26 @@ Queries data using the specified SQL statement. This API uses a promise to retur
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
 ```js
 let promise = store.querySql("SELECT * FROM EMPLOYEE CROSS JOIN BOOK WHERE BOOK.NAME = 'sanguo'");
 promise.then((resultSet) => {
-  console.info(`ResultSet column names: ${resultSet.columnNames}`);
-  console.info(`ResultSet column count: ${resultSet.columnCount}`);
+  console.info(`ResultSet column names: ${resultSet.columnNames}, column count: ${resultSet.columnCount}`);
+  // resultSet is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+  while(resultSet.goToNextRow()) {
+    const id = resultSet.getLong(resultSet.getColumnIndex("ID"));
+    const name = resultSet.getString(resultSet.getColumnIndex("NAME"));
+    const age = resultSet.getLong(resultSet.getColumnIndex("AGE"));
+    const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY"));
+    console.info(`id=${id}, name=${name}, age=${age}, salary=${salary}`);
+  }
+  // Release the dataset memory.
+  resultSet.close();
 }).catch((err) => {
   console.error(`Query failed, code is ${err.code},message is ${err.message}`);
 })
@@ -2206,7 +2514,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -2248,7 +2557,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -2276,7 +2586,8 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                |
 | ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| 14800047     | The WAL file size exceeds the default limit. |
+| 14800000     | Inner error.                                 |
 
 **Example**
 
@@ -2397,9 +2708,9 @@ Backs up an RDB store. This API uses an asynchronous callback to return the resu
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2427,20 +2738,20 @@ Backs up an RDB store. This API uses a promise to return the result.
 | -------- | ------ | ---- | ------------------------ |
 | destName | string | Yes  | Name of the RDB store backup file.|
 
-**Error codes**
-
-For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
-
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
-
 **Return value**
 
 | Type               | Description                     |
 | ------------------- | ------------------------- |
 | Promise&lt;void&gt; | Promise that returns no value.|
 
+**Error codes**
+
+For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
+
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
+
 **Example**
 
 ```js
@@ -2471,9 +2782,9 @@ Restores an RDB store from a backup file. This API uses an asynchronous callback
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2511,9 +2822,9 @@ Restores an RDB store from a backup file. This API uses a promise to return the
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2547,9 +2858,9 @@ Sets distributed tables. This API uses an asynchronous callback to return the re
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2589,9 +2900,9 @@ Sets distributed tables. This API uses a promise to return the result.
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2630,9 +2941,9 @@ Obtains the distributed table name of a remote device based on the local table n
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2691,9 +3002,9 @@ Obtains the distributed table name of a remote device based on the local table n
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2742,9 +3053,9 @@ Synchronizes data between devices. This API uses an asynchronous callback to ret
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2806,9 +3117,9 @@ Synchronizes data between devices. This API uses a promise to return the result.
 
 For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode-data-rdb.md).
 
-| **ID**| **Error Message**                                |
-| ------------ | -------------------------------------------- |
-| 14800000     | The inner error is occurred.                 |
+| **ID**| **Error Message**                |
+| ------------ | ---------------------------- |
+| 14800000     | Inner error.                 |
 
 **Example**
 
@@ -2854,9 +3165,9 @@ Registers an observer for this RDB store. When the data in the RDB store changes
 
 | Name  | Type                               | Mandatory| Description                                       |
 | -------- | ----------------------------------- | ---- | ------------------------------------------- |
-| event    | string                              | Yes  | Event to observe. The value is **dataChange**, which indicates a data change event. |
+| event    | string                              | Yes  | Event to observe. The value is **dataChange**, which indicates a data change event.         |
 | type     | [SubscribeType](#subscribetype)    | Yes  | Subscription type to register.|
-| observer | Callback&lt;Array&lt;string&gt;&gt; | Yes  | Callback invoked to return the data change. **Array<string>** indicates the IDs of the peer devices whose data in the database is changed.|
+| observer | Callback&lt;Array&lt;string&gt;&gt; | Yes  | Callback invoked to return the data change event. **Array<string>** indicates the IDs of the peer devices whose data in the database is changed.|
 
 **Example**
 
@@ -2885,9 +3196,9 @@ Unregisters the observer of the specified type from the RDB store. This API uses
 
 | Name  | Type                               | Mandatory| Description                                       |
 | -------- | ---------------------------------- | ---- | ------------------------------------------ |
-| event    | string                              | Yes  | Event to observe. The value is **dataChange**, which indicates a data change event. |
-| type     | [SubscribeType](#subscribetype)     | Yes  | Subscription type to unregister.                              |
-| observer | Callback&lt;Array&lt;string&gt;&gt; | Yes  | Callback for the data change. **Array<string>** indicates the IDs of the peer devices whose data in the database is changed.|
+| event    | string                              | Yes  | Event type. The value is **dataChange**, which indicates a data change event.         |
+| type     | [SubscribeType](#subscribetype)     | Yes  | Subscription type to unregister.                                |
+| observer | Callback&lt;Array&lt;string&gt;&gt; | Yes  | Callback for the data change event. **Array<string>** indicates the IDs of the peer devices whose data in the database is changed.|
 
 **Example**
 
@@ -3040,7 +3351,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3081,7 +3392,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3117,7 +3428,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3152,7 +3463,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3187,7 +3498,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3222,7 +3533,7 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
 
 **Example**
 
@@ -3323,7 +3634,7 @@ Obtains the value of the Long type based on the specified column and the current
 
 | Type  | Description                                                        |
 | ------ | ------------------------------------------------------------ |
-| number | Value obtained.<br>The value range supported by this API is **Number.MIN_SAFE_INTEGER** to **Number.MAX_SAFE_INTEGER**. If the value is out of this range, use [getDouble](#getdouble).|
+| number | Value obtained.<br>The value range supported by API is **Number.MIN_SAFE_INTEGER** to **Number.MAX_SAFE_INTEGER**. If the value is out of this range, use [getDouble](#getdouble).|
 
 **Error codes**
 
@@ -3433,4 +3744,4 @@ For details about the error codes, see [RDB Error Codes](../errorcodes/errorcode
 
 | **ID**| **Error Message**                                                |
 | ------------ | ------------------------------------------------------------ |
-| 14800012     | The result set is  empty, or the specified location is invalid. |
+| 14800012     | The result set is empty or the specified location is invalid. |
diff --git a/en/application-dev/reference/apis/js-apis-fileShare.md b/en/application-dev/reference/apis/js-apis-fileShare.md
index 2d0d66de9f6e9860e16820d40d13908767359127..5293993000d0ff6015053875e5093b47f48ef127 100644
--- a/en/application-dev/reference/apis/js-apis-fileShare.md
+++ b/en/application-dev/reference/apis/js-apis-fileShare.md
@@ -14,7 +14,7 @@ import fileShare from '@ohos.fileshare';
 
 ## fileShare.grantUriPermission
 
-grantUriPermission(uri: string, bundleName: string, mode: number, callback: AsyncCallback&lt;void&gt;): void
+grantUriPermission(uri: string, bundleName: string, flag: wantConstant.Flags, callback: AsyncCallback&lt;void&gt;): void
 
 Grants permissions on a user file by the URI to an application. This API uses an asynchronous callback to return the result.
 
@@ -30,7 +30,7 @@ Grants permissions on a user file by the URI to an application. This API uses an
 | ------ | ------ | ---- | -------------------------- |
 | uri   | string | Yes  | URI of a user file.|
 | bundleName   | string | Yes  | Bundle name of the application to be grated with the permissions.|
-| mode   | number | Yes  | Permissions to grant. For details, see [wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags).<br>**wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION**: permission to read the file. <br>**wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION**: permission to write the file.|
+| flag   | wantConstant.Flags | Yes  | Permissions to grant. For details, see [wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags).<br>**wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION**: permission to read the file. <br>**wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION**: permission to write the file.|
  | callback | AsyncCallback&lt;void&gt;  | Yes   | Callback invoked to return the result.                           |
 
 **Error codes**
@@ -67,7 +67,7 @@ try {
 
 ## fileShare.grantUriPermission
 
-grantUriPermission(uri: string, bundleName: string, mode: number): Promise&lt;void&gt;
+grantUriPermission(uri: string, bundleName: string, flag: wantConstant.Flags): Promise&lt;void&gt;
 
 Grants permissions on a user file by the URI to an application. This API uses a promise to return the result.
 
@@ -83,7 +83,7 @@ Grants permissions on a user file by the URI to an application. This API uses a
 | ------ | ------ | ---- | -------------------------- |
 | uri   | string | Yes  | URI of a user file.|
 | bundleName   | string | Yes  | Bundle name of the application to be grated with the permissions.|
-| mode   | number | Yes  | Permissions to grant. For details, see [wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags).<br>**wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION**: permission to read the file. <br>**wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION**: permission to write the file.|
+| flag   | wantConstant.Flags | Yes  | Permissions to grant. For details, see [wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags).<br>**wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION**: permission to read the file. <br>**wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION**: permission to write the file.|
 
 **Return value**
 
diff --git a/en/application-dev/reference/apis/js-apis-fileio.md b/en/application-dev/reference/apis/js-apis-fileio.md
index 1d326862153ed88bbc7bc1c53ffedbdce5d90e80..d0e243b5347338ff8fcef509777281d45f2f215f 100644
--- a/en/application-dev/reference/apis/js-apis-fileio.md
+++ b/en/application-dev/reference/apis/js-apis-fileio.md
@@ -21,8 +21,9 @@ Before using the APIs provided by this module to perform operations on files or
 **Stage Model**
 
  ```js
-import Ability from '@ohos.application.Ability';
-class MainAbility extends Ability {
+import UIAbility from '@ohos.app.ability.UIAbility';
+
+export default class EntryAbility extends UIAbility {
     onWindowStageCreate(windowStage) {
         let context = this.context;
         let pathDir = context.filesDir;
@@ -30,19 +31,18 @@ class MainAbility extends Ability {
 }
  ```
 
- For details about how to obtain the stage model context, see [UIAbilityContext](js-apis-inner-application-uiAbilityContext.md).
-
 **FA Model**
 
  ```js
  import featureAbility from '@ohos.ability.featureAbility';
+ 
  let context = featureAbility.getContext();
  context.getFilesDir().then((data) => {
       let pathDir = data;
  })
  ```
 
- For details about how to obtain the FA model context, see [Contex](js-apis-inner-app-context.md#context).
+For details about how to obtain the FA model context, see [Contex](js-apis-inner-app-context.md#context).
 
 ## fileio.stat
 
diff --git a/en/application-dev/reference/apis/js-apis-font.md b/en/application-dev/reference/apis/js-apis-font.md
new file mode 100644
index 0000000000000000000000000000000000000000..0b7d7fb3abcb1353d022e70ea785f6454cd422b4
--- /dev/null
+++ b/en/application-dev/reference/apis/js-apis-font.md
@@ -0,0 +1,64 @@
+# @ohos.font (Custom Font Registration)
+
+The **font** module provides APIs for registering custom fonts.
+
+> **NOTE**
+>
+> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+
+## Modules to Import
+
+```ts
+import font from '@ohos.font'
+```
+
+## font.registerFont
+
+registerFont(options: FontOptions): void
+
+Registers a custom font with the font manager.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name    | Type                         | Mandatory  | Description         |
+| ------- | --------------------------- | ---- | ----------- |
+| options | [FontOptions](#fontoptions) | Yes   | Information about the custom font to register.|
+
+## FontOptions
+
+| Name        | Type    | Mandatory  | Description          |
+| ---------- | ------ | ---- | ------------ |
+| familyName | string | Yes   | Name of the custom font to register.  |
+| familySrc  | string | Yes   | Path of the custom font to register.|
+
+## Example
+
+```ts
+// xxx.ets
+import font from '@ohos.font';
+
+@Entry
+@Component
+struct FontExample {
+  @State message: string =' Hello, World'
+
+  aboutToAppear() {
+    font.registerFont({
+      familyName: 'medium',
+      familySrc: '/font/medium.ttf'
+    })
+  }
+
+  build() {
+    Column() {
+      Text(this.message)
+        .align(Alignment.Center)
+        .fontSize(20)
+        .fontFamily('medium') // medium: name of the custom font to register.
+        .height('100%')
+    }.width('100%')
+  }
+}
+```
diff --git a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md
index d147c049b2a9aa006b83bef9ed28b266340347db..002ea7b6728a93e26429934f95b04d74c8ab332c 100644
--- a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md
+++ b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md
@@ -610,7 +610,7 @@ Defines the accessibilityelement. Before calling APIs of **AccessibilityElement*
 
 **System capability**: SystemCapability.BarrierFree.Accessibility.Core
 
-## attributeNames
+### attributeNames
 
 attributeNames\<T extends keyof ElementAttributeValues>(): Promise\<Array\<T>>;
 
@@ -636,7 +636,7 @@ rootElement.attributeNames().then((data) => {
     console.log('failed to get attribute names, because '  + JSON.stringify(err));
 });
 ```
-## attributeNames
+### attributeNames
 
 attributeNames\<T extends keyof ElementAttributeValues>(callback: AsyncCallback\<Array\<T>>): void;
 
@@ -664,7 +664,7 @@ rootElement.attributeNames((err, data) => {
     console.info('get attribute names success');
 });
 ```
-## AccessibilityElement.attributeValue
+### attributeValue
 
 attributeValue\<T extends keyof ElementAttributeValues>(attributeName: T): Promise\<ElementAttributeValues[T]>;
 
@@ -709,7 +709,7 @@ try {
     console.log('failed to get attribute value, because ' + JSON.stringify(exception));
 }
 ```
-## AccessibilityElement.attributeValue
+### attributeValue
 
 attributeValue\<T extends keyof ElementAttributeValues>(attributeName: T, 
     callback: AsyncCallback\<ElementAttributeValues[T]>): void;
@@ -752,7 +752,7 @@ try {
     console.log('failed to get attribute value, because ' + JSON.stringify(exception));
 }
 ```
-## actionNames
+### actionNames
 
 actionNames(): Promise\<Array\<string>>;
 
@@ -778,7 +778,7 @@ rootElement.actionNames().then((data) => {
     console.log('failed to get action names because '  + JSON.stringify(err));
 });
 ```
-## actionNames
+### actionNames
 
 actionNames(callback: AsyncCallback\<Array\<string>>): void;
 
@@ -806,7 +806,7 @@ rootElement.actionNames((err, data) => {
     console.info('get action names success');
 });
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, parameters?: object): Promise\<void>;
 
@@ -849,7 +849,7 @@ try {
     console.log('failed to perform action, because ' + JSON.stringify(exception));
 }
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, callback: AsyncCallback\<void>): void;
 
@@ -888,7 +888,7 @@ try {
     console.log('failed to perform action, because ' + JSON.stringify(exception));
 }
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, parameters: object, callback: AsyncCallback\<void>): void;
 
@@ -932,7 +932,7 @@ try {
     console.log('failed to perform action, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('content')
+### findElement('content')
 
 findElement(type: 'content', condition: string): Promise\<Array\<AccessibilityElement>>;
 
@@ -971,7 +971,7 @@ try {
     console.log('failed to find element, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('content')
+### findElement('content')
 
 findElement(type: 'content', condition: string, callback: AsyncCallback\<Array\<AccessibilityElement>>): void;
 
@@ -1007,7 +1007,7 @@ try {
     console.log('failed to find element, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('focusType')
+### findElement('focusType')
 
 findElement(type: 'focusType', condition: FocusType): Promise\<AccessibilityElement>;
 
@@ -1046,7 +1046,7 @@ try {
     console.log('failed to find element, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('focusType')
+### findElement('focusType')
 
 findElement(type: 'focusType', condition: FocusType, callback: AsyncCallback\<AccessibilityElement>): void;
 
@@ -1082,7 +1082,7 @@ try {
     console.log('failed to find element, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('focusDirection')
+### findElement('focusDirection')
 
 findElement(type: 'focusDirection', condition: FocusDirection): Promise\<AccessibilityElement>;
 
@@ -1121,7 +1121,7 @@ try {
     console.log('failed to find element, because ' + JSON.stringify(exception));
 }
 ```
-## findElement('focusDirection')
+### findElement('focusDirection')
 
 findElement(type: 'focusDirection', condition: FocusDirection, callback: AsyncCallback\<AccessibilityElement>): void;
 
diff --git a/en/application-dev/reference/apis/js-apis-nfcTag.md b/en/application-dev/reference/apis/js-apis-nfcTag.md
index 6b1bd68289e090aaa4ee73ce459437a51db5bff1..61bd849804434dfd16db488c933c7b62bb47456d 100644
--- a/en/application-dev/reference/apis/js-apis-nfcTag.md
+++ b/en/application-dev/reference/apis/js-apis-nfcTag.md
@@ -48,10 +48,11 @@ Before developing applications related to tag read and write, you must declare N
 }
 ```
 > **CAUTION**<br>
-1. The **actions** field is mandatory. It must be **ohos.nfc.tag.action.TAG_FOUND** and cannot be changed.
-2. The **name** field under **metadata** is mandatory. It must be **tag-tech** and cannot be changed.
-3. The **value** field under **metadata** is mandatory. It can be **NfcA**, **NfcB**, **NfcF**, **NfcV**, **IsoDep**, **Ndef**, **MifareClassic**, **MifareUL**, **NdefFormatable** or any of their combinations. Incorrect settings of this field will cause a parsing failure.
-4. The **name** field under **requestPermissions** is mandatory. It must be **ohos.permission.NFC_TAG** and cannot be changed.
+>
+> - The **actions** field is mandatory. It must be **ohos.nfc.tag.action.TAG_FOUND** and cannot be changed.
+> - The **name** field under **metadata** is mandatory. It must be **tag-tech** and cannot be changed.
+> - The **value** field under **metadata** is mandatory. It can be **NfcA**, **NfcB**, **NfcF**, **NfcV**, **IsoDep**, **Ndef**, **MifareClassic**, **MifareUL**, **NdefFormatable** or any of their combinations. Incorrect settings of this field will cause a parsing failure.
+> - The **name** field under **requestPermissions** is mandatory. It must be **ohos.permission.NFC_TAG** and cannot be changed.
 
 ## **Modules to Import**
 
@@ -98,7 +99,7 @@ onCreate(want, launchParam) {
     if (isNfcATag) {
         var nfcA;
         try {
-            nfcA = tag.getNfcATag(taginfo);
+            nfcA = tag.getNfcATag(tagInfo);
         } catch (error) {
             console.log("tag.getNfcATag caught error: " + error);
         }
@@ -109,7 +110,7 @@ onCreate(want, launchParam) {
     if (isIsoDepTag) {
         var isoDep;
         try {
-            isoDep = tag.getIsoDep(taginfo);
+            isoDep = tag.getIsoDep(tagInfo);
         } catch (error) {
             console.log("tag.getIsoDep caught error: " + error);
         }
@@ -139,8 +140,8 @@ Obtains an **NfcATag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**|
-| -------- | -------- |
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
 | [NfcATag](js-apis-nfctech.md#nfcatag) | **NfcATag** object obtained.|
 
 ## tag.getNfcA<sup>9+</sup>
@@ -159,16 +160,16 @@ Obtains an **NfcATag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**|
-| -------- | -------- |
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
 | [NfcATag](js-apis-nfctech.md#nfcatag) | **NfcATag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getNfcBTag
@@ -190,9 +191,9 @@ Obtains an **NfcBTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcBTag](js-apis-nfctech.md#nfcbtag)  | **NfcBTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcBTag](js-apis-nfctech.md#nfcbtag) | **NfcBTag** object obtained.|
 
 ## tag.getNfcB<sup>9+</sup>
 
@@ -210,16 +211,16 @@ Obtains an **NfcBTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcBTag](js-apis-nfctech.md#nfcbtag)  | **NfcBTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcBTag](js-apis-nfctech.md#nfcbtag) | **NfcBTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getNfcFTag
@@ -241,9 +242,9 @@ Obtains an **NfcFTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcFTag](js-apis-nfctech.md#nfcftag)  | **NfcFTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcFTag](js-apis-nfctech.md#nfcftag) | **NfcFTag** object obtained.|
 
 ## tag.getNfcF<sup>9+</sup>
 
@@ -261,16 +262,16 @@ Obtains an **NfcFTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcFTag](js-apis-nfctech.md#nfcftag)  | **NfcFTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcFTag](js-apis-nfctech.md#nfcftag) | **NfcFTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getNfcVTag
@@ -292,9 +293,9 @@ Obtains an **NfcVTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcVTag](js-apis-nfctech.md#nfcvtag)  | **NfcVTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcVTag](js-apis-nfctech.md#nfcvtag) | **NfcVTag** object obtained.|
 
 ## tag.getNfcV<sup>9+</sup>
 
@@ -312,16 +313,16 @@ Obtains an **NfcVTag** object, which allows access to the tags that use the NFC-
 
 **Return value**
 
-| **Type**| **Description**        |
-| -------- | ---------------- |
-| [NfcVTag](js-apis-nfctech.md#nfcvtag)  | **NfcVTag** object obtained.|
+| **Type**                               | **Description**       |
+| ------------------------------------- | ------------- |
+| [NfcVTag](js-apis-nfctech.md#nfcvtag) | **NfcVTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getIsoDep<sup>9+</sup>
@@ -334,22 +335,22 @@ Obtains an **IsoDepTag** object, which allows access to the tags that use the IS
 
 **Parameters**
 
-| Name      | Type                       | Mandatory  | Description                                      |
-| --------- | ------------------------- | ---- | ---------------------------------------- |
-| taginfo      | [TagInfo](#taginfo)                   | Yes| Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.                             |
+| Name    | Type                 | Mandatory  | Description                                      |
+| ------- | ------------------- | ---- | ---------------------------------------- |
+| taginfo | [TagInfo](#taginfo) | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.|
 
 **Return value**
 
-| **Type**| **Description**           |
-| ---------- | ------------------|
-| [IsoDepTag](js-apis-nfctech.md#isodeptag9)  | **IsoDepTag** object obtained.|
+| **Type**                                  | **Description**                             |
+| ---------------------------------------- | ----------------------------------- |
+| [IsoDepTag](js-apis-nfctech.md#isodeptag9) | **IsoDepTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getNdef<sup>9+</sup>
@@ -362,22 +363,22 @@ Obtains an **NdefTag** object, which allows access to the tags in the NFC Data E
 
 **Parameters**
 
-| Name      | Type                       | Mandatory  | Description                                      |
-| --------- | ------------------------- | ---- | ---------------------------------------- |
-| taginfo      | [TagInfo](#taginfo)                   | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.                             |
+| Name    | Type                 | Mandatory  | Description                                      |
+| ------- | ------------------- | ---- | ---------------------------------------- |
+| taginfo | [TagInfo](#taginfo) | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.|
 
 **Return value**
 
-| **Type**| **Description**       |
-| ---------| -------------- |
-| [NdefTag](js-apis-nfctech.md#ndeftag9)  | **NdefTag** object obtained.|
+| **Type**                                | **Description**                         |
+| -------------------------------------- | ------------------------------- |
+| [NdefTag](js-apis-nfctech.md#ndeftag9) | **NdefTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getMifareClassic<sup>9+</sup>
@@ -390,22 +391,22 @@ Obtains a **MifareClassicTag** object, which allows access to the tags that use
 
 **Parameters**
 
-| Name      | Type                       | Mandatory  | Description                                      |
-| --------- | ------------------------- | ---- | ---------------------------------------- |
-| taginfo      | [TagInfo](#taginfo)                   | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.                             |
+| Name    | Type                 | Mandatory  | Description                                      |
+| ------- | ------------------- | ---- | ---------------------------------------- |
+| taginfo | [TagInfo](#taginfo) | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.|
 
 **Return value**
 
-| **Type**| **Description**                         |
-| ----------------- | ------------------------|
-| [MifareClassicTag](js-apis-nfctech.md#mifareclassictag-9)  | **MifareClassicTag** object obtained.|
+| **Type**                                  | **Description**                                  |
+| ---------------------------------------- | ---------------------------------------- |
+| [MifareClassicTag](js-apis-nfctech.md#mifareclassictag-9) | **MifareClassicTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getMifareUltralight<sup>9+</sup>
@@ -417,22 +418,22 @@ Obtains a **MifareUltralightTag** object, which allows access to the tags that u
 **System capability**: SystemCapability.Communication.NFC.Tag
 
 **Parameters**
-| Name      | Type                       | Mandatory  | Description                                      |
-| --------- | ------------------------- | ---- | ---------------------------------------- |
-| taginfo      | [TagInfo](#taginfo)                   | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.                             |
+| Name    | Type                 | Mandatory  | Description                                      |
+| ------- | ------------------- | ---- | ---------------------------------------- |
+| taginfo | [TagInfo](#taginfo) | Yes   | Tag information including the technology type and related parameters, which are obtained from **tag.getTagInfo(want: Want)**.|
 
 **Return value**
 
-| **Type**| **Description**                               |
-| -------------------- | ---------------------------|
-| [MifareUltralightTag](js-apis-nfctech.md#mifareultralighttag9)  | **MifareUltralightTag** object obtained.|
+| **Type**                                  | **Description**                                  |
+| ---------------------------------------- | ---------------------------------------- |
+| [MifareUltralightTag](js-apis-nfctech.md#mifareultralighttag9) | **MifareUltralightTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getNdefFormatable<sup>9+</sup>
@@ -445,16 +446,16 @@ Obtains an **NdefFormatableTag** object, which allows access to the tags that ar
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
-| [NdefFormatableTag](js-apis-nfctech.md#ndefformatabletag)  | **NdefFormatableTag** object obtained.|
+| **Type**                                  | **Description**                                  |
+| ---------------------------------------- | ---------------------------------------- |
+| [NdefFormatableTag](js-apis-nfctech.md#ndefformatabletag) | **NdefFormatableTag** object obtained.|
 
 **Error codes**
 
 For details about the error codes, see [NFC Error Codes](../errorcodes/errorcode-nfc.md).
 
-| ID| Error Message|
-| ------- | -------|
+| ID  | Error Message                                    |
+| ------- | ---------------------------------------- |
 | 3100201 | Tag running state is abnormal in service. |
 
 ## tag.getTagInfo<sup>9+</sup>
@@ -467,14 +468,14 @@ Obtains **TagInfo** from **Want**, which is initialized by the NFC service and c
 
 **Parameters**
 
-| Name      | Type                       | Mandatory  | Description                                      |
-| --------- | ------------------------- | ---- | ---------------------------------------- |
-| want      | [Want](js-apis-app-ability-want.md#Want)                   | Yes   | Data obtained from the parameters of the **onCreate** entry function when an ability is dispatched.                             |
+| Name | Type                                      | Mandatory  | Description                               |
+| ---- | ---------------------------------------- | ---- | --------------------------------- |
+| want | [Want](js-apis-app-ability-want.md#Want) | Yes   | Data obtained from the parameters of the **onCreate** entry function when an ability is dispatched.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**             | **Description**                     |
+| ------------------- | --------------------------- |
 | [TagInfo](#taginfo) | **TagInfo** object obtained.|
 
 
@@ -488,14 +489,14 @@ Creates an NDEF record based on the specified URI.
 
 **Parameters**
 
-| Name  | Type                   | Mandatory| Description                                  |
-| -------- | ----------------------- | ---- | -------------------------------------- |
-| uri | string | Yes| Data to write to the NDEF record.|
+| Name | Type    | Mandatory  | Description                    |
+| ---- | ------ | ---- | ---------------------- |
+| uri  | string | Yes   | Data to write to the NDEF record.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                    | **Description**                                  |
+| -------------------------- | ---------------------------------------- |
 | [NdefRecord](#ndefrecord9) | NDEF record created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -527,15 +528,15 @@ Creates an NDEF record based on the specified text data and encoding type.
 
 **Parameters**
 
-| Name  | Type                   | Mandatory| Description                                  |
-| -------- | ----------------------- | ---- | -------------------------------------- |
-| text | string | Yes  | Text to write to the NDEF record.|
-| locale | string | Yes  | Encoding mode of the text.|
+| Name   | Type    | Mandatory  | Description                      |
+| ------ | ------ | ---- | ------------------------ |
+| text   | string | Yes   | Text to write to the NDEF record.|
+| locale | string | Yes   | Encoding mode of the text.            |
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                    | **Description**                                  |
+| -------------------------- | ---------------------------------------- |
 | [NdefRecord](#ndefrecord9) | NDEF record created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -569,15 +570,15 @@ Creates an NDEF record based on the specified MIME data and type.
 
 **Parameters**
 
-| Name  | Type                   | Mandatory| Description                                  |
-| -------- | ----------------------- | ---- | -------------------------------------- |
-| mimeType | string | Yes  | MIME type that complies with RFC rules, for example, **text/plain** or **image/jpeg**.|
-| mimeData | number[] | Yes  | MIME data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
+| Name     | Type      | Mandatory  | Description                                      |
+| -------- | -------- | ---- | ---------------------------------------- |
+| mimeType | string   | Yes   | MIME type that complies with RFC rules, for example, **text/plain** or **image/jpeg**.|
+| mimeData | number[] | Yes   | MIME data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.   |
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                    | **Description**                                  |
+| -------------------------- | ---------------------------------------- |
 | [NdefRecord](#ndefrecord9) | NDEF record created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -609,16 +610,16 @@ Creates an NDEF record based on application-specific data.
 
 **Parameters**
 
-| Name  | Type                   | Mandatory| Description                                  |
-| -------- | ----------------------- | ---- | -------------------------------------- |
-| domainName | string | Yes  | Bundle name of the application or domain name of the organization that releases the applications.|
-| type | string | Yes  | Type of the application data.|
-| externalData | number[] | Yes  | Application data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
+| Name         | Type      | Mandatory  | Description                                 |
+| ------------ | -------- | ---- | ----------------------------------- |
+| domainName   | string   | Yes   | Bundle name of the application or domain name of the organization that releases the applications.            |
+| type         | string   | Yes   | Type of the application data.                         |
+| externalData | number[] | Yes   | Application data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                    | **Description**                                  |
+| -------------------------- | ---------------------------------------- |
 | [NdefRecord](#ndefrecord9) | NDEF record created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -652,14 +653,14 @@ Converts an NDEF message to bytes.
 
 **Parameters**
 
-| Name  | Type                   | Mandatory| Description                                  |
-| -------- | ----------------------- | ---- | -------------------------------------- |
-| ndefMessage | [NdefMessage](js-apis-nfctech.md#ndefmessage9) | Yes  | NDEF message to convert.|
+| Name        | Type                                      | Mandatory  | Description         |
+| ----------- | ---------------------------------------- | ---- | ----------- |
+| ndefMessage | [NdefMessage](js-apis-nfctech.md#ndefmessage9) | Yes   | NDEF message to convert.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**  | **Description**                                  |
+| -------- | ---------------------------------------- |
 | number[] | NDEF message in bytes, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
 
 **Example**
@@ -693,14 +694,14 @@ Creates an NDEF message from raw byte data. The data must comply with the NDEF r
 
 **Parameters**
 
-| **Name**| **Type**| **Mandatory**| **Description**|
-| -------- | -------- | -------- | -------- |
-| data | number[] | Yes| Raw byte data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**. The data must comply with the NDEF record format.|
+| **Name**| **Type**  | **Mandatory**| **Description**                                  |
+| ------- | -------- | ------ | ---------------------------------------- |
+| data    | number[] | Yes     | Raw byte data, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**. The data must comply with the NDEF record format.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                                  | **Description**                                  |
+| ---------------------------------------- | ---------------------------------------- |
 | [NdefMessage](js-apis-nfctech.md#ndefmessage9) | NDEF message created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -727,14 +728,14 @@ Creates an NDEF message from the NDEF records list.
 
 **Parameters**
 
-| **Name**| **Type**| **Mandatory**| **Description**|
-| -------- | -------- | -------- | -------- |
-| ndefRecords | [NdefRecord](js-apis-nfcTag.md#ndefrecord9)[] | Yes| NDEF record list used to create the NDEF message. For details, see *NFCForum-TS-NDEF_1.0*.|
+| **Name**    | **Type**                                  | **Mandatory**| **Description**                                  |
+| ----------- | ---------------------------------------- | ------ | ---------------------------------------- |
+| ndefRecords | [NdefRecord](js-apis-nfcTag.md#ndefrecord9)[] | Yes     | NDEF record list used to create the NDEF message. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Return value**
 
-| **Type**| **Description**                            |
-| ------------------ | --------------------------|
+| **Type**                                  | **Description**                                  |
+| ---------------------------------------- | ---------------------------------------- |
 | [NdefMessage](js-apis-nfctech.md#ndefmessage9) | NDEF message created. For details, see *NFCForum-TS-NDEF_1.0*.|
 
 **Example**
@@ -762,66 +763,66 @@ Defines the **TagInfo** object, which provides information about the tag technol
 
 **Required permissions**: ohos.permission.NFC_TAG
 
-| **Name**| **Type**| **Readable**| **Writable**| **Description**|
-| -------- | -------- | -------- | -------- | -------- |
-| uid<sup>9+</sup> | number[] | Yes| No| Tag unique identifier (UID), which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
-| technology<sup>9+</sup> | number[] | Yes| No| Supported technologies. Each number is a constant indicating the supported technology.|
-| supportedProfiles | number[] | Yes| No|  Supported profiles. This parameter is not supported since API version 9. Use [tag.TagInfo#technology](#tagtaginfo) instead.|
-| extrasData<sup>9+</sup> | [PacMap](js-apis-inner-ability-dataAbilityHelper.md#pacmap)[] | Yes| No|  Extended attribute value of the tag technology.<br>**System API**: This is a system API.|
-| tagRfDiscId<sup>9+</sup> | number | Yes| No|  ID allocated when the tag is discovered.<br>**System API**: This is a system API.|
-| remoteTagService<sup>9+</sup> | [rpc.RemoteObject](js-apis-rpc.md#remoteobject) | Yes| No| Remote object of the NFC service process used for interface communication between the client and the service.<br>**System API**: This is a system API.|
+| **Name**                       | **Type**                                  | **Readable**| **Writable**| **Description**                                  |
+| ----------------------------- | ---------------------------------------- | ------ | ------ | ---------------------------------------- |
+| uid<sup>9+</sup>              | number[]                                 | Yes     | No     | Tag unique identifier (UID), which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.   |
+| technology<sup>9+</sup>       | number[]                                 | Yes     | No     | Supported technologies. Each number is a constant indicating the supported technology.         |
+| supportedProfiles             | number[]                                 | Yes     | No     | Supported profiles. This parameter is not supported since API version 9. Use [tag.TagInfo#technology](#tagtaginfo) instead.|
+| extrasData<sup>9+</sup>       | [PacMap](js-apis-inner-ability-dataAbilityHelper.md#pacmap)[] | Yes     | No     | Extended attribute value of the tag technology.<br>**System API**: This is a system API.   |
+| tagRfDiscId<sup>9+</sup>      | number                                   | Yes     | No     | ID allocated when the tag is discovered.<br>**System API**: This is a system API.     |
+| remoteTagService<sup>9+</sup> | [rpc.RemoteObject](js-apis-rpc.md#remoteobject) | Yes     | No     | Remote object of the NFC service process used for interface communication between the client and the service.<br>**System API**: This is a system API.|
 ## NdefRecord<sup>9+</sup>
 Defines an NDEF record. For details, see *NFCForum-TS-NDEF_1.0*.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Type**| **Readable**| **Writable**| **Description**|
-| -------- | -------- | -------- | -------- | -------- |
-| tnf | number | Yes| No| Type name field (TNF) of the NDEF record.|
-| rtdType| number[] | Yes| No| Record type definition (RTD) of the NDEF record. It consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
-| id | number[] | Yes| No| NDEF record ID, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
-| payload | number[] | Yes| No| NDEF payload, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
+| **Name** | **Type**  | **Readable**| **Writable**| **Description**                                  |
+| ------- | -------- | ------ | ------ | ---------------------------------------- |
+| tnf     | number   | Yes     | No     | Type name field (TNF) of the NDEF record.       |
+| rtdType | number[] | Yes     | No     | Record type definition (RTD) of the NDEF record. It consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
+| id      | number[] | Yes     | No     | NDEF record ID, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
+| payload | number[] | Yes     | No     | NDEF payload, which consists of hexadecimal numbers ranging from **0x00** to **0xFF**.|
 
 ## Technology Type Definition
 Enumerates the tag technology types.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| NFC_A | 1 | NFC-A (ISO 14443-3A).|
+| **Name**                      | **Value**| **Description**                  |
+| ---------------------------- | ----- | ------------------------ |
+| NFC_A                        | 1     | NFC-A (ISO 14443-3A). |
 | NFC_B  | 2 | NFC-B (ISO 14443-3B).|
-| ISO_DEP | 3 | ISO-DEP (ISO 14443-4).|
-| NFC_F  | 4 | NFC-F (JIS 6319-4).|
-| NFC_V | 5 | NFC-V (ISO 15693).|
-| NDEF  | 6 | NDEF.|
-| NDEF_FORMATABLE<sup>9+</sup> | 7 | NDEF formattable.|
-| MIFARE_CLASSIC | 8 | MIFARE Classic.|
-| MIFARE_ULTRALIGHT | 9 | MIFARE Ultralight.|
+| ISO_DEP                      | 3     | ISO-DEP (ISO 14443-4).|
+| NFC_F                        | 4     | NFC-F (JIS 6319-4).   |
+| NFC_V                        | 5     | NFC-V (ISO 15693).    |
+| NDEF                         | 6     | NDEF.                 |
+| NDEF_FORMATABLE<sup>9+</sup> | 7     | NDEF formattable.           |
+| MIFARE_CLASSIC               | 8     | MIFARE Classic.       |
+| MIFARE_ULTRALIGHT            | 9     | MIFARE Ultralight.     |
 
 ## TnfType<sup>9+</sup>
 Enumerates the TNF types. For details, see *NFCForum-TS-NDEF_1.0*.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| TNF_EMPTY | 0x0 | Empty.|
-| TNF_WELL_KNOWN  | 0x1 | NFC Forum Well Known Type [NFC RTD].|
-| TNF_MEDIA | 0x2 | Media-type as defined in RFC 2046 [RFC 2046].|
-| TNF_ABSOLUTE_URI  | 0x3 | Absolute URI as defined in RFC 3986 [RFC 3986].|
-| TNF_EXT_APP | 0x4 | NFC Forum external type [NFC RTD].|
-| TNF_UNKNOWN  | 0x5 | Unknown.|
-| TNF_UNCHANGED | 0x6 | Unchanged (see section 2.3.3 in *NFCForum-TS-NDEF_1.0*).|
+| **Name**          | **Value**| **Description**                                  |
+| ---------------- | ----- | ---------------------------------------- |
+| TNF_EMPTY        | 0x0   | Empty.                                  |
+| TNF_WELL_KNOWN   | 0x1   | NFC Forum Well Known Type [NFC RTD].    |
+| TNF_MEDIA        | 0x2   | Media-type as defined in RFC 2046 [RFC 2046].|
+| TNF_ABSOLUTE_URI | 0x3   | Absolute URI as defined in RFC 3986 [RFC 3986].|
+| TNF_EXT_APP      | 0x4   | NFC Forum external type [NFC RTD].      |
+| TNF_UNKNOWN      | 0x5   | Unknown.                                |
+| TNF_UNCHANGED    | 0x6   | Unchanged (see section 2.3.3 in *NFCForum-TS-NDEF_1.0*).          |
 
 ## NDEF Record RTD
 Enumerates the NDEF record types. For details about the RTD, see *NFCForum-TS-NDEF_1.0*.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| RTD_TEXT<sup>9+</sup> | [0x54] | NDEF record of the text type.|
+| **Name**               | **Value** | **Description**            |
+| --------------------- | ------ | ------------------ |
+| RTD_TEXT<sup>9+</sup> | [0x54] | NDEF record of the text type. |
 | RTD_URI<sup>9+</sup>  | [0x55] | NDEF record of the URI type.|
 
 ## NfcForumType<sup>9+</sup>
@@ -829,46 +830,47 @@ Enumerates the NFC Forum tag types.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| NFC_FORUM_TYPE_1 | 1 |  NFC Forum tag type 1.|
-| NFC_FORUM_TYPE_2 | 2 |  NFC Forum tag type 2.|
-| NFC_FORUM_TYPE_3  | 3 |  NFC Forum tag type 3.|
-| NFC_FORUM_TYPE_4  | 4 |  NFC Forum tag type 4.|
-| MIFARE_CLASSIC  | 101 |   MIFARE Classic.|
+| **Name**          | **Value**| **Description**           |
+| ---------------- | ----- | ----------------- |
+| NFC_FORUM_TYPE_1 | 1     | NFC Forum tag type 1.        |
+| NFC_FORUM_TYPE_2 | 2     | NFC Forum tag type 2.        |
+| NFC_FORUM_TYPE_3 | 3     | NFC Forum tag type 3.        |
+| NFC_FORUM_TYPE_4 | 4     | NFC Forum tag type 4.        |
+| MIFARE_CLASSIC   | 101   | MIFARE Classic.|
 
 ## MifareClassicType<sup>9+</sup>
 Enumerates the MIFARE Classic tag types.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| TYPE_UNKNOWN | 0 |  Unknown type.|
-| TYPE_CLASSIC | 1 |  MIFARE Classic.|
-| TYPE_PLUS   | 2 |  MIFARE Plus.|
-| TYPE_PRO  | 3 |  MIFARE Pro.|
+| **Name**      | **Value**| **Description**           |
+| ------------ | ----- | ----------------- |
+| TYPE_UNKNOWN | 0     | Unknown type.     |
+| TYPE_CLASSIC | 1     | MIFARE Classic.|
+| TYPE_PLUS    | 2     | MIFARE Plus.   |
+| TYPE_PRO     | 3     | MIFARE Pro.    |
 
 ## MifareClassicSize<sup>9+</sup>
 Enumerates the sizes of a MIFARE Classic tag.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| MC_SIZE_MINI | 320 |  Each tag has 5 sectors, and each sector has 4 blocks.|
-| MC_SIZE_1K  | 1024 |  Each tag has 16 sectors, and each sector has 4 blocks.|
-| MC_SIZE_2K   | 2048 |  Each tag has 32 sectors, and each sector has 4 blocks.|
-| MC_SIZE_4K   | 4096 |  Each tag has 40 sectors, and each sector has 4 blocks.|
+| **Name**      | **Value**| **Description**            |
+| ------------ | ----- | ------------------ |
+| MC_SIZE_MINI | 320   | Each tag has 5 sectors, and each sector has 4 blocks. |
+| MC_SIZE_1K   | 1024  | Each tag has 16 sectors, and each sector has 4 blocks.|
+| MC_SIZE_2K   | 2048  | Each tag has 32 sectors, and each sector has 4 blocks.|
+| MC_SIZE_4K   | 4096  | Each tag has 40 sectors, and each sector has 4 blocks.|
 
 ## MifareUltralightType<sup>9+</sup>
 Enumerates the MIFARE Ultralight tag types.
 
 **System capability**: SystemCapability.Communication.NFC.Tag
 
-| **Name**| **Value**|  **Description**|
-| -------- | -------- | -------- |
-| TYPE_UNKNOWN  | 0 |  Unknown type.|
-| TYPE_ULTRALIGHT   | 1 |  MIFARE Ultralight.|
-| TYPE_ULTRALIGHT_C    | 2 |  MIFARE Ultralight C.|
+| **Name**           | **Value**| **Description**                |
+| ----------------- | ----- | ---------------------- |
+| TYPE_UNKNOWN      | 0     | Unknown type.        |
+| TYPE_ULTRALIGHT   | 1     | MIFARE Ultralight.  |
+| TYPE_ULTRALIGHT_C | 2     | MIFARE Ultralight C.|
 
+<!--no_check-->
\ No newline at end of file
diff --git a/en/application-dev/reference/apis/js-apis-rpc.md b/en/application-dev/reference/apis/js-apis-rpc.md
index 0f234517e6b14318e65f2da5c966531fb78b90bd..4e2f4ed96e608f1f91cca03faea5188893be128f 100644
--- a/en/application-dev/reference/apis/js-apis-rpc.md
+++ b/en/application-dev/reference/apis/js-apis-rpc.md
@@ -2397,7 +2397,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -2415,10 +2415,10 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -4860,7 +4860,7 @@ Reads the exception information from this **MessageParcel** object.
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -4878,10 +4878,10 @@ Reads the exception information from this **MessageParcel** object.
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -5452,6 +5452,7 @@ Marshals this **Parcelable** object into a **MessageSequence** object.
   | Type   | Description                            |
   | ------- | -------------------------------- |
   | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
 **Example**
 
   ```ts
@@ -5557,6 +5558,7 @@ Marshals the sequenceable object into a **MessageParcel** object.
   | Type   | Description                             |
   | ------- | --------------------------------  |
   | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
 **Example**
 
   ```ts
@@ -5673,7 +5675,7 @@ Obtains a proxy or remote object. This API must be implemented by its derived cl
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -5691,10 +5693,10 @@ Obtains a proxy or remote object. This API must be implemented by its derived cl
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6117,7 +6119,7 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6135,10 +6137,10 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6193,7 +6195,7 @@ Sends a **MessageSequence** message to the remote process in synchronous or asyn
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6211,10 +6213,10 @@ Sends a **MessageSequence** message to the remote process in synchronous or asyn
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6277,7 +6279,7 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6295,10 +6297,10 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6354,7 +6356,7 @@ Sends a **MessageSequence** message to the remote process in synchronous or asyn
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6385,10 +6387,10 @@ Sends a **MessageSequence** message to the remote process in synchronous or asyn
       result.data.reclaim();
       result.reply.reclaim();
   }
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6435,7 +6437,7 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6466,10 +6468,10 @@ Sends a **MessageParcel** message to the remote process in synchronous or asynch
       result.data.reclaim();
       result.reply.reclaim();
   }
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6519,7 +6521,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6537,10 +6539,10 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6585,7 +6587,7 @@ Obtains the **LocalInterface** object of an interface token.
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6603,10 +6605,10 @@ Obtains the **LocalInterface** object of an interface token.
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6647,7 +6649,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6665,10 +6667,10 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6689,7 +6691,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   }
   ```
 
-### addDeathRecippient<sup>(deprecated)</sup>
+### addDeathRecipient<sup>(deprecated)</sup>
 
 >This API is no longer maintained since API version 9. You are advised to use [registerDeathRecipient](#registerdeathrecipient9).
 
@@ -6719,7 +6721,7 @@ Adds a callback for receiving the death notifications of the remote object, incl
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6737,14 +6739,14 @@ Adds a callback for receiving the death notifications of the remote object, incl
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
-  The proxy object in the **onConnect** callback can be assigned a value only after the ability is connected asynchronously. Then, **addDeathRecippient()** of the proxy object is called to add a callback for receiving the death notification of the remove object.
+  The proxy object in the **onConnect** callback can be assigned a value only after the ability is connected asynchronously. Then, **addDeathRecipient()** of the proxy object is called to add a callback for receiving the death notification of the remove object.
 
   ```ts
   class MyDeathRecipient {
@@ -6786,7 +6788,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6804,10 +6806,10 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6859,7 +6861,7 @@ Removes the callback used to receive death notifications of the remote object.
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6877,10 +6879,10 @@ Removes the callback used to receive death notifications of the remote object.
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -6927,7 +6929,7 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -6945,10 +6947,10 @@ For details about the error codes, see [RPC Error Codes](../errorcodes/errorcode
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
   The proxy object in the **onConnect** callback can be assigned a value only after the ability is connected asynchronously. Then, **getDescriptor()** of the proxy object is called to obtain the interface descriptor of the object.
@@ -6986,7 +6988,7 @@ Obtains the interface descriptor of this proxy object.
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -7004,10 +7006,10 @@ Obtains the interface descriptor of this proxy object.
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -7039,7 +7041,7 @@ Checks whether the **RemoteObject** is dead.
   ```ts
   // Import @ohos.ability.featureAbility only for the application developed based on the FA model.
   // import FA from "@ohos.ability.featureAbility";
-  
+
   let proxy;
   let connect = {
       onConnect: function(elementName, remoteProxy) {
@@ -7057,10 +7059,10 @@ Checks whether the **RemoteObject** is dead.
       "bundleName": "com.ohos.server",
       "abilityName": "com.ohos.server.EntryAbility",
   };
-  
+
   // Use this method to connect to the ability for the FA model.
   // FA.connectAbility(want,connect);
-  
+
   globalThis.context.connectServiceExtensionAbility(want, connect);
   ```
 
@@ -7095,9 +7097,9 @@ A constructor used to create a **MessageOption** object.
 
 **Parameters**
 
-  | Name   | Type  | Mandatory| Description                                  |
-  | --------- | ------ | ---- | -------------------------------------- |
-  | syncFlags | number | No  | Call flag, which can be synchronous or asynchronous. The default value is **synchronous**.|
+| Name| Type   | Mandatory| Description                                  |
+| ------ | ------- | ---- | -------------------------------------- |
+| async  | boolean | No  | Call flag, which can be synchronous or asynchronous. The default value is **synchronous**.|
 
 
 **Example**
@@ -7146,7 +7148,7 @@ Checks whether **SendMessageRequest** is called synchronously or asynchronously.
 
   | Type   | Description                                    |
   | ------- | ---------------------------------------- |
-  | boolean | Returns **true** if **SendMessageRequest** is called synchronously; returns **false** if **SendMessageRequest** is called asynchronously.|
+  | boolean | Returns **true** if **SendMessageRequest** is called asynchronously; returns **false** if it is called synchronously.|
 
 **Example**
 
@@ -7825,7 +7827,7 @@ Sends a **MessageSequence** message to the remote process in synchronous or asyn
 
   | Type                        | Description                                         |
   | ---------------------------- | --------------------------------------------- |
-  | Promise&lt;RequestResult&gt; | Promise used to return the **sendRequestResult** object.|
+  | Promise&lt;RequestResult&gt; | Promise used to return the **RequestResult** instance.    |
 
 **Example**
 
@@ -9101,29 +9103,30 @@ Reads data from the shared file associated with this **Ashmem** object.
 
  ```ts
   import Ability from '@ohos.app.ability.UIAbility';
+
   export default class MainAbility extends Ability {
-    onCreate(want, launchParam) {
-        console.log("[Demo] MainAbility onCreate");
-        globalThis.context = this.context;
-    }
-    onDestroy() {
-        console.log("[Demo] MainAbility onDestroy");
-    }
-    onWindowStageCreate(windowStage) {
-        // Main window is created, set main page for this ability
-        console.log("[Demo] MainAbility onWindowStageCreate");
-    }
-    onWindowStageDestroy() {
-        // Main window is destroyed, release UI related resources
-        console.log("[Demo] MainAbility onWindowStageDestroy");
-    }
-    onForeground() {
-        // Ability has brought to foreground
-        console.log("[Demo] MainAbility onForeground");
-    }
-    onBackground() {
-        // Ability has back to background
-        console.log("[Demo] MainAbility onBackground");
-    }
+      onCreate(want, launchParam) {
+          console.log("[Demo] MainAbility onCreate");
+          globalThis.context = this.context;
+      }
+      onDestroy() {
+          console.log("[Demo] MainAbility onDestroy");
+      }
+      onWindowStageCreate(windowStage) {
+          // Main window is created, set main page for this ability
+          console.log("[Demo] MainAbility onWindowStageCreate");
+      }
+      onWindowStageDestroy() {
+          // Main window is destroyed, release UI related resources
+          console.log("[Demo] MainAbility onWindowStageDestroy");
+      }
+      onForeground() {
+          // Ability has brought to foreground
+          console.log("[Demo] MainAbility onForeground");
+      }
+      onBackground() {
+          // Ability has back to background
+          console.log("[Demo] MainAbility onBackground");
+      }  
   };
  ```
diff --git a/en/application-dev/reference/apis/js-apis-system-date-time.md b/en/application-dev/reference/apis/js-apis-system-date-time.md
index 38d90b668894a52dde1a4ae05578d290182bc6ef..de45c25f8a7ab2ac317bc0a212ba3aef0576febc 100644
--- a/en/application-dev/reference/apis/js-apis-system-date-time.md
+++ b/en/application-dev/reference/apis/js-apis-system-date-time.md
@@ -97,7 +97,7 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
 
 | Name  | Type      | Mandatory| Description                            |
 | -------- | -------------- | ---- | ------------------ |
-| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds. |
 | callback | AsyncCallback&lt;number&gt; | Yes  | Callback used to return the time elapsed since the Unix epoch.        |
 
 **Example**
@@ -128,7 +128,7 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
 
 | Name  | Type              | Mandatory| Description                           |
 | -------- | ----------- | ---- | ---------------------------------- |
-| callback | AsyncCallback&lt;number&gt; | Yes  | Callback used to return the time elapsed since the Unix epoch.        |
+| callback | AsyncCallback&lt;number&gt; | Yes  | Callback used to return the time elapsed since the Unix epoch, in milliseconds.        |
 
 **Example**
 
@@ -158,7 +158,7 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
 
 | Name| Type   | Mandatory| Description                    |
 | ------ | ------- | ---- | ------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
@@ -192,7 +192,7 @@ Obtains the time elapsed since system startup, excluding the deep sleep time. Th
 
 | Name  | Type                       | Mandatory| Description  |
 | -------- | ---------- | ---- | -------------------------- |
-| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds. |
 | callback | AsyncCallback&lt;number&gt; | Yes  | Callback used to return the time.|
 
 **Example**
@@ -253,7 +253,7 @@ Obtains the time elapsed since system startup, excluding the deep sleep time. Th
 
 | Name| Type   | Mandatory| Description                             |
 | ------ | ------- | ---- | ----------------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
@@ -287,7 +287,7 @@ Obtains the time elapsed since system startup, including the deep sleep time. Th
 
 | Name  | Type                       | Mandatory| Description  |
 | -------- | --------------- | ---- | ------------------------------- |
-| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano   | boolean                     | Yes  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds. |
 | callback | AsyncCallback&lt;number&gt; | Yes  | Callback used to return the time.  |
 
 **Example**
@@ -348,7 +348,7 @@ Obtains the time elapsed since system startup, including the deep sleep time. Th
 
 | Name| Type   | Mandatory| Description                              |
 | ------ | ------- | ---- | ------------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: The time to return is in nanoseconds.<br>- **false**: The time to return is in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
diff --git a/en/application-dev/reference/apis/js-apis-system-time.md b/en/application-dev/reference/apis/js-apis-system-time.md
index b1f745e7085764b193567866dc6e6a74e7cb04d4..d1cdd26246f3408d3c930fa061be7ddc972d8bfc 100644
--- a/en/application-dev/reference/apis/js-apis-system-time.md
+++ b/en/application-dev/reference/apis/js-apis-system-time.md
@@ -13,7 +13,7 @@ The **systemTime** module provides system time and time zone features. You can u
 import systemTime from '@ohos.systemTime';
 ```
 
-## systemTime.setTime<sup>(deprecated)</sup>
+## systemTime.setTime
 
 setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void
 
@@ -191,7 +191,7 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
 
 | Name| Type   | Mandatory| Description                    |
 | ------ | ------- | ---- | ------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
@@ -310,7 +310,7 @@ Obtains the time elapsed since system startup, excluding the deep sleep time. Th
 
 | Name| Type   | Mandatory| Description                             |
 | ------ | ------- | ---- | ----------------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
@@ -429,7 +429,7 @@ Obtains the time elapsed since system startup, including the deep sleep time. Th
 
 | Name| Type   | Mandatory| Description                              |
 | ------ | ------- | ---- | ------------------------------- |
-| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.|
+| isNano | boolean | No  | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds.<br/>Default value: **false** |
 
 **Return value**
 
diff --git a/en/application-dev/reference/apis/js-apis-zlib.md b/en/application-dev/reference/apis/js-apis-zlib.md
index 454cca88f82548b86ba2a9b4209c1782cc0eaa8f..6515eea99d43d68018a46c56b79bd38754d7864a 100644
--- a/en/application-dev/reference/apis/js-apis-zlib.md
+++ b/en/application-dev/reference/apis/js-apis-zlib.md
@@ -231,7 +231,7 @@ Decompresses a file. This API uses an asynchronous callback to return the result
 
 | Name                 | Type               | Mandatory| Description                                                        |
 | ----------------------- | ------------------- | ---- | ------------------------------------------------------------ |
-| inFile                  | string              | Yes  | Path of the file to decompress. For details about the path, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
+| inFile                  | string              | Yes  | Path of the file to decompress. The file name extension must be .zip. For details about the path, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
 | outFile                 | string              | Yes  | Path of the decompressed file. The path must exist in the system. Otherwise, the decompression fails. The path must be an application sandbox path, which can be obtained from the context. For details about the context, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
 | options                 | [Options](#options) | Yes  | Decompression parameters.                                            |
 | AsyncCallback<**void**> | callback            | No  | Callback used to return the result. If the operation is successful, **null** is returned; otherwise, a specific error code is returned.                                            |
@@ -282,7 +282,7 @@ Decompresses a file. This API uses a promise to return the result.
 
 | Name | Type               | Mandatory| Description                                                        |
 | ------- | ------------------- | ---- | ------------------------------------------------------------ |
-| inFile  | string              | Yes  | Path of the file to decompress. For details about the path, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
+| inFile  | string              | Yes  | Path of the file to decompress. The file name extension must be .zip. For details about the path, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
 | outFile | string              | Yes  | Path of the decompressed file. The path must exist in the system. Otherwise, the decompression fails. The path must be an application sandbox path, which can be obtained from the context. For details about the context, see [FA Model](js-apis-inner-app-context.md) and [Stage Model](js-apis-inner-application-context.md).|
 | options | [Options](#options) | Yes  | Decompression parameters.                                          |
 
diff --git a/en/application-dev/reference/arkui-js-lite/Readme-EN.md b/en/application-dev/reference/arkui-js-lite/Readme-EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..4dbc7b08dbed8356f7cb907c3dbebff5c5b09bf5
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/Readme-EN.md
@@ -0,0 +1,37 @@
+# JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)
+
+- Framework Overview
+    - [File Organization](js-framework-file.md)
+    - ["js" Tag](js-framework-js-tag.md)
+    - [app.js](js-framework-js-file.md)
+    - Syntax
+        - [HML](js-framework-syntax-hml.md)
+        - [CSS](js-framework-syntax-css.md)
+        - [JavaScript](js-framework-syntax-js.md)
+- Universal Component Information
+    - [Universal Events](js-common-events.md)
+    - [Universal Attributes](js-common-attributes.md)
+    - [Universal Styles](js-common-styles.md)
+    - [Animation Styles](js-components-common-animation.md)
+    - [Media Query](js-components-common-mediaquery.md)
+- Container Components
+    - [div](js-components-container-div.md)
+    - [list](js-components-container-list.md)
+    - [list-item](js-components-container-list-item.md)
+    - [stack](js-components-container-stack.md)
+    - [swiper](js-components-container-swiper.md)
+- Basic Components
+    - [chart](js-components-basic-chart.md)
+    - [image](js-components-basic-image.md)
+    - [image-animator](js-components-basic-image-animator.md)
+    - [input](js-components-basic-input.md)
+    - [marquee](js-components-basic-marquee.md)
+    - [picker-view](js-components-basic-picker-view.md)
+    - [progress](js-components-basic-progress.md)
+    - [qrcode](js-components-basic-qrcode.md)
+    - [slider](js-components-basic-slider.md)
+    - [switch](js-components-basic-switch.md)
+    - [text](js-components-basic-text.md)
+- Canvas Components
+    - [canvas](js-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
diff --git a/en/application-dev/reference/arkui-js-lite/figures/000000.png b/en/application-dev/reference/arkui-js-lite/figures/000000.png
new file mode 100644
index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/000000.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/GIF.gif b/en/application-dev/reference/arkui-js-lite/figures/GIF.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fa77bb91654623c2de68a19e7f9f95bbd1d029bc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/GIF.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png b/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif b/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fc1eadbb05520daa6d79779683db96d0afe7cbdd
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif b/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c3d337edf8e35352dcc9d9b9919019e1f7ec4d96
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png b/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/aqua.png b/en/application-dev/reference/arkui-js-lite/figures/aqua.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aqua.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png b/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png
new file mode 100644
index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/azure.png b/en/application-dev/reference/arkui-js-lite/figures/azure.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/azure.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG b/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..aa4ba3f9fa64250b1b86bd6d39b6a8071d3de1c3
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/beige.png b/en/application-dev/reference/arkui-js-lite/figures/beige.png
new file mode 100644
index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/beige.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/bisque.png b/en/application-dev/reference/arkui-js-lite/figures/bisque.png
new file mode 100644
index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/bisque.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png b/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png
new file mode 100644
index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/blue.png b/en/application-dev/reference/arkui-js-lite/figures/blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png b/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/brown.png b/en/application-dev/reference/arkui-js-lite/figures/brown.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/brown.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/burlywood.png b/en/application-dev/reference/arkui-js-lite/figures/burlywood.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/burlywood.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png b/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png b/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png
new file mode 100644
index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/chocolate.png b/en/application-dev/reference/arkui-js-lite/figures/chocolate.png
new file mode 100644
index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/chocolate.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/coral.png b/en/application-dev/reference/arkui-js-lite/figures/coral.png
new file mode 100644
index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/coral.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png b/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png b/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/crimson.png b/en/application-dev/reference/arkui-js-lite/figures/crimson.png
new file mode 100644
index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/crimson.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/cyan.png b/en/application-dev/reference/arkui-js-lite/figures/cyan.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cyan.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkblue.png b/en/application-dev/reference/arkui-js-lite/figures/darkblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png b/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png
new file mode 100644
index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png
new file mode 100644
index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgray.png b/en/application-dev/reference/arkui-js-lite/figures/darkgray.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png b/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png b/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png
new file mode 100644
index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png b/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkorange.png b/en/application-dev/reference/arkui-js-lite/figures/darkorange.png
new file mode 100644
index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkorange.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png b/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png
new file mode 100644
index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkred.png b/en/application-dev/reference/arkui-js-lite/figures/darkred.png
new file mode 100644
index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkred.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png b/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png
new file mode 100644
index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png b/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png b/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png b/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png b/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/deeppink.png b/en/application-dev/reference/arkui-js-lite/figures/deeppink.png
new file mode 100644
index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/deeppink.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png b/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/default.PNG b/en/application-dev/reference/arkui-js-lite/figures/default.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..5e4322d20ad887573ad85958bc181a1be0f85f1c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/default.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/dimgray.png b/en/application-dev/reference/arkui-js-lite/figures/dimgray.png
new file mode 100644
index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dimgray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png b/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png b/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG b/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..d0379dfc66b4d2151dae49beeb8af38c774381aa
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png
new file mode 100644
index 0000000000000000000000000000000000000000..4481b08ab897619b408425f9bfe0fd5b1fcb6ef0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a73bd33782f06a704ed9b288226dfa381d1d57c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e58c669a2976297f71d35c304e988c2884e7dc0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png
new file mode 100644
index 0000000000000000000000000000000000000000..5113bc6bad4f88bc2558aae304394e00e107ce88
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d0696a9ade017acbbdfb8812dafdec5d715cac5
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png
new file mode 100644
index 0000000000000000000000000000000000000000..f627659cef03f443e01fb28b44ceb9363369b8d8
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f6b4abcc27039c624bd21aad775db7c47a22dea
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png
new file mode 100644
index 0000000000000000000000000000000000000000..151ef990edbb33e1f54632609990f6c540149a5e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png
new file mode 100644
index 0000000000000000000000000000000000000000..e061801d6eeb27d7fee0b287414e512559a87ea9
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png
new file mode 100644
index 0000000000000000000000000000000000000000..56c65edbcd66a2ebe9d8ef35c55eba90652bca0f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png
new file mode 100644
index 0000000000000000000000000000000000000000..db54e678d8c42daca3e56dd85567c9978a9657c8
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png
new file mode 100644
index 0000000000000000000000000000000000000000..f59a10b44b9e9793bc3a9134f6c4633c8cfb49ce
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png
new file mode 100644
index 0000000000000000000000000000000000000000..f304daf1f80c86ca6f415e4f7a49b17ca20dae04
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png
new file mode 100644
index 0000000000000000000000000000000000000000..3917378fdcb47448e7daf8ae197e6d033fd345e9
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c8300af3bdf43e4d2192699b5ed4065fef451c0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png
new file mode 100644
index 0000000000000000000000000000000000000000..3404b29dff12b910ae1be71ebf762252895468a8
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfee4f8cddcddd2ada89cb6d7e812fd0739d9cb8
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png
new file mode 100644
index 0000000000000000000000000000000000000000..33787429dd3205f9faac254950e95c097bd63b21
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png
new file mode 100644
index 0000000000000000000000000000000000000000..67959174e9b810b9278a7940bc097ac0c0738c7e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ecdf0c714fa633f03db339626f51e62318cbf82
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6288a0361793fbbce554fd293831fae4bcefc9d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c8973bcb7d55910c6702fe6b9b54506ad3b3727
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cc02a6196604a6a3d64b9961c04aaaa51dc829e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png
new file mode 100644
index 0000000000000000000000000000000000000000..658dca4b52032016c15f77a94b3ef76c093b1d2c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png
new file mode 100644
index 0000000000000000000000000000000000000000..8192453ec25d486b3923da4a25b0a6fe5034d869
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f786e33181995c2b5bf5f835df4557ff3f7e9b4
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ac4a39e925322831752617b71a77d040626d251
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png
new file mode 100644
index 0000000000000000000000000000000000000000..366ab30f3e3f9f4b7e8b579b06cd84a76b2bfabc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png
new file mode 100644
index 0000000000000000000000000000000000000000..e89a1b24da145cf480cceb28ed7249b717e614bf
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png
new file mode 100644
index 0000000000000000000000000000000000000000..68562c1006ec7c61c49c24aec99ecfd173ca055a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd4f47314f89fa4bbbd2d14527dd250b5e3e141b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png
new file mode 100644
index 0000000000000000000000000000000000000000..42efd9018bc05408596a768cbbe309f1e46273d7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png
new file mode 100644
index 0000000000000000000000000000000000000000..3108e0436219c1c3a7335679cdfea962c49f454d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png
new file mode 100644
index 0000000000000000000000000000000000000000..91c55d3677922b76ac78c4e56c87ef90b5b31fc2
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc1dc87c79f827c8bb5be3f3771c37f4cb8b214e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png
new file mode 100644
index 0000000000000000000000000000000000000000..1362b8a3d98f4edf36420d3799f01476817e43d4
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f9a8bacc0f78cb141820e8188d4ae5ef03dc7c1
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ae627d6e40dd4b297eccdcf1c5dceef5a08d82
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4e18dbe51e815ccdfc6f594e3424850c3b93a12
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png
new file mode 100644
index 0000000000000000000000000000000000000000..612bc55f4aa5e832133801edf61cef01ffd1bc64
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dccd46b21e76a7bbbaabc1ab77a29bd72ae850d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png
new file mode 100644
index 0000000000000000000000000000000000000000..47f90714bcb37e4df1b698503db6893d6c2a98c4
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png
new file mode 100644
index 0000000000000000000000000000000000000000..072d846a3cd629316cd0dcf25d5e9e1e1d3e0dc4
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b526bdf7cd539297715bbcddbbd505b7c683695
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d5aedb22cb51d00b176f44c5ac5f3ad29d843f2
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d71cee4618f1f2822cea1031c9b0e5d602e0a9b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png
new file mode 100644
index 0000000000000000000000000000000000000000..8253c65764c8d74e0a25404aa62fdd69d43f3c26
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf5ef1c99e764de0e3a0fb0d5e68dc7722f1c0aa
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9db5c31c8eae66244cd3f6e11336f72284bb2a6
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png
new file mode 100644
index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png
new file mode 100644
index 0000000000000000000000000000000000000000..63b480df9e9700601da85abef015c8326095851f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png
new file mode 100644
index 0000000000000000000000000000000000000000..63f343e89f62b15c117e0148c87ac049308c3117
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png
new file mode 100644
index 0000000000000000000000000000000000000000..6afdd1b39e4bcb3664c7664a55b47b8537f4aeaa
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6bbab16659f4b34b38a714510665ea7fd309055
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png
new file mode 100644
index 0000000000000000000000000000000000000000..fea0122d3ef81899a02199c6cb265a099ad6c44f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cef59797fd8b9650c398562ac0b473485a9274b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/firebrick.png b/en/application-dev/reference/arkui-js-lite/figures/firebrick.png
new file mode 100644
index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/firebrick.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png b/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png b/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png b/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png
new file mode 100644
index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png b/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG b/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..31c0141d716059519377e1f39b9b8305370f239a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png b/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/gold.png b/en/application-dev/reference/arkui-js-lite/figures/gold.png
new file mode 100644
index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gold.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png
new file mode 100644
index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/gray.png b/en/application-dev/reference/arkui-js-lite/figures/gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/green.png b/en/application-dev/reference/arkui-js-lite/figures/green.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/green.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png b/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/grey.png b/en/application-dev/reference/arkui-js-lite/figures/grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/grey.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/honeydew.png b/en/application-dev/reference/arkui-js-lite/figures/honeydew.png
new file mode 100644
index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/honeydew.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/hotpink.png b/en/application-dev/reference/arkui-js-lite/figures/hotpink.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/hotpink.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif b/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8321366bdb79b9e6530d53b0f45a6465ae7b967d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/image.png b/en/application-dev/reference/arkui-js-lite/figures/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..79db22cd94523a8854562e4c8b45ee22d8b45e90
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/image.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/indianred.png b/en/application-dev/reference/arkui-js-lite/figures/indianred.png
new file mode 100644
index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/indianred.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/indigo.png b/en/application-dev/reference/arkui-js-lite/figures/indigo.png
new file mode 100644
index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/indigo.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png b/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..247fed609d862aa73184f3428486ab62e82bf897
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif b/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2215e5cfa56f533c6b4d1318b2fa1fb07093dfaa
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif b/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bd5fea51c64deb1268793f3a3f70a2c379aebfda
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/ivory.png b/en/application-dev/reference/arkui-js-lite/figures/ivory.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ivory.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/khaki.png b/en/application-dev/reference/arkui-js-lite/figures/khaki.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/khaki.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lavender.png b/en/application-dev/reference/arkui-js-lite/figures/lavender.png
new file mode 100644
index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lavender.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png b/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png b/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png b/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png b/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png
new file mode 100644
index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png b/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png b/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgray.png b/en/application-dev/reference/arkui-js-lite/figures/lightgray.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png b/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightpink.png b/en/application-dev/reference/arkui-js-lite/figures/lightpink.png
new file mode 100644
index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightpink.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png b/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png b/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png b/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png b/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lime.png b/en/application-dev/reference/arkui-js-lite/figures/lime.png
new file mode 100644
index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lime.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/limegreen.png b/en/application-dev/reference/arkui-js-lite/figures/limegreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/limegreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/linen.png b/en/application-dev/reference/arkui-js-lite/figures/linen.png
new file mode 100644
index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/linen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/list.png b/en/application-dev/reference/arkui-js-lite/figures/list.png
new file mode 100644
index 0000000000000000000000000000000000000000..969473b2307ce6b0528459d5e2b71b0baef4f733
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/list.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG b/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..a180cd74fb6455adb495cf0d8471b34c93a9415e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG b/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..664ade98b38a3b6ac2b3e96dc4af8b75b6749a72
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/magenta.png b/en/application-dev/reference/arkui-js-lite/figures/magenta.png
new file mode 100644
index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/magenta.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/maroon.png b/en/application-dev/reference/arkui-js-lite/figures/maroon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/maroon.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/marquee.gif b/en/application-dev/reference/arkui-js-lite/figures/marquee.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3b6df4b26274fdf5c3e6e1fab2423400455b7050
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/marquee.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png b/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png
new file mode 100644
index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png b/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png b/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png
new file mode 100644
index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png b/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png
new file mode 100644
index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png b/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png b/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png b/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png
new file mode 100644
index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png b/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mintcream.png b/en/application-dev/reference/arkui-js-lite/figures/mintcream.png
new file mode 100644
index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mintcream.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png b/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/moccasin.png b/en/application-dev/reference/arkui-js-lite/figures/moccasin.png
new file mode 100644
index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/moccasin.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png b/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/navy.png b/en/application-dev/reference/arkui-js-lite/figures/navy.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/navy.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/oldlace.png b/en/application-dev/reference/arkui-js-lite/figures/oldlace.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/oldlace.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/olive.png b/en/application-dev/reference/arkui-js-lite/figures/olive.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/olive.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png b/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png
new file mode 100644
index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/orange.png b/en/application-dev/reference/arkui-js-lite/figures/orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orange.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/orangered.png b/en/application-dev/reference/arkui-js-lite/figures/orangered.png
new file mode 100644
index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orangered.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/orchid.png b/en/application-dev/reference/arkui-js-lite/figures/orchid.png
new file mode 100644
index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orchid.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png
new file mode 100644
index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/palegreen.png b/en/application-dev/reference/arkui-js-lite/figures/palegreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palegreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png
new file mode 100644
index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png b/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png
new file mode 100644
index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png b/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png b/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png
new file mode 100644
index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/peru.png b/en/application-dev/reference/arkui-js-lite/figures/peru.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/peru.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/picker-view.png b/en/application-dev/reference/arkui-js-lite/figures/picker-view.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e5375876c6c7403b254df56c75d08031ad9801d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/picker-view.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/pink.png b/en/application-dev/reference/arkui-js-lite/figures/pink.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/pink.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/plum.png b/en/application-dev/reference/arkui-js-lite/figures/plum.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/plum.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/powderblue.png b/en/application-dev/reference/arkui-js-lite/figures/powderblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/powderblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/progress.png b/en/application-dev/reference/arkui-js-lite/figures/progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb9170121d950b8d8b5a4a5a209c25b452791d25
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/progress.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/purple.png b/en/application-dev/reference/arkui-js-lite/figures/purple.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/purple.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif b/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif
new file mode 100644
index 0000000000000000000000000000000000000000..53e718c2879554c82d4a3d9800507a00e37613dc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png b/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/red.png b/en/application-dev/reference/arkui-js-lite/figures/red.png
new file mode 100644
index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/red.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png b/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png
new file mode 100644
index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/royalblue.png b/en/application-dev/reference/arkui-js-lite/figures/royalblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/royalblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png b/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/salmon.png b/en/application-dev/reference/arkui-js-lite/figures/salmon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/salmon.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/sample1.gif b/en/application-dev/reference/arkui-js-lite/figures/sample1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6168a14aa67c866abf6185ba3a3c2ae9f595153c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sample1.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png b/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png
new file mode 100644
index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/seagreen.png b/en/application-dev/reference/arkui-js-lite/figures/seagreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/seagreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/seashell.png b/en/application-dev/reference/arkui-js-lite/figures/seashell.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/seashell.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/sienna.png b/en/application-dev/reference/arkui-js-lite/figures/sienna.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sienna.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/silver.png b/en/application-dev/reference/arkui-js-lite/figures/silver.png
new file mode 100644
index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/silver.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/skyblue.png b/en/application-dev/reference/arkui-js-lite/figures/skyblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/skyblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/slateblue.png b/en/application-dev/reference/arkui-js-lite/figures/slateblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slateblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/slategray.png b/en/application-dev/reference/arkui-js-lite/figures/slategray.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slategray.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/slider.png b/en/application-dev/reference/arkui-js-lite/figures/slider.png
new file mode 100644
index 0000000000000000000000000000000000000000..b72ed8404c613ec9283d7be1f56071d70fcbbc1f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slider.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG b/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..c699e78774fadbd8da8c0cc290e88294d445aa6f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG b/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..b7a5a2a819eeafeb000c00bd7009a02e5fe1bbe5
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/snow.png b/en/application-dev/reference/arkui-js-lite/figures/snow.png
new file mode 100644
index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/snow.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/springgreen.png b/en/application-dev/reference/arkui-js-lite/figures/springgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/springgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/steelblue.png b/en/application-dev/reference/arkui-js-lite/figures/steelblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/steelblue.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/swiper.gif b/en/application-dev/reference/arkui-js-lite/figures/swiper.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2ec52b162dcfdd39c2d2f5a7be4106321935b010
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/swiper.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/switch.gif b/en/application-dev/reference/arkui-js-lite/figures/switch.gif
new file mode 100644
index 0000000000000000000000000000000000000000..64f8c8eb0c1ecf13e8b91f291782d825ce9f0076
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/switch.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/tan.png b/en/application-dev/reference/arkui-js-lite/figures/tan.png
new file mode 100644
index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/tan.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/teal.png b/en/application-dev/reference/arkui-js-lite/figures/teal.png
new file mode 100644
index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/teal.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/text.png b/en/application-dev/reference/arkui-js-lite/figures/text.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3a79bc7ae959d16d1eb4b915fa9040f00996b16
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/text.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/thistle.png b/en/application-dev/reference/arkui-js-lite/figures/thistle.png
new file mode 100644
index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/thistle.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/tomato.png b/en/application-dev/reference/arkui-js-lite/figures/tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/tomato.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/turquoise.png b/en/application-dev/reference/arkui-js-lite/figures/turquoise.png
new file mode 100644
index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/turquoise.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/violet.png b/en/application-dev/reference/arkui-js-lite/figures/violet.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/violet.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/wheat.png b/en/application-dev/reference/arkui-js-lite/figures/wheat.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/wheat.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/white.png b/en/application-dev/reference/arkui-js-lite/figures/white.png
new file mode 100644
index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/white.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png b/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png
new file mode 100644
index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/yellow.png b/en/application-dev/reference/arkui-js-lite/figures/yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/yellow.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png b/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png differ
diff --git a/en/application-dev/reference/arkui-js-lite/js-common-attributes.md b/en/application-dev/reference/arkui-js-lite/js-common-attributes.md
new file mode 100644
index 0000000000000000000000000000000000000000..d91f720d4e8d718abae2a45f4d99d245d46f4815
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-common-attributes.md
@@ -0,0 +1,28 @@
+# Universal Attributes
+
+
+## Common Attributes
+
+Common attributes are used to set component identities and appearance.
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| id | string | No| Unique ID of the component.|
+| style | string | No| Style declaration of the component.|
+| class | string | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Rendering Attributes
+
+Rendering attributes are used to set whether a component is rendered.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| for | Array | Expands the current element based on the configured data list.|
+| if | boolean | Whether the element is added or removed.|
+| show | boolean | Whether the element is displayed or hidden.|
+
+> **NOTE**
+>
+> Do not set styles in attribute fields.
diff --git a/en/application-dev/reference/arkui-js-lite/js-common-events.md b/en/application-dev/reference/arkui-js-lite/js-common-events.md
new file mode 100644
index 0000000000000000000000000000000000000000..93022870c037ef7424eb4a752d4b0e8ee87cda41
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-common-events.md
@@ -0,0 +1,19 @@
+# Universal Events
+
+
+Different from private events, universal events can be bound to most components.
+
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on the component. |
+
+
+  **Table 1** SwipeEvent (inherited from BaseEvent)
+
+| Attribute| Type| Description |
+| -------- | -------- | -------- |
+| direction | string | Swiping direction. The value can be one of the following:<br>- **left**: Swipe left.<br>- **right**: Swipe right.<br>- **up**: Swipe up.<br>- **down**: Swipe down. |
+
diff --git a/en/application-dev/reference/arkui-js-lite/js-common-styles.md b/en/application-dev/reference/arkui-js-lite/js-common-styles.md
new file mode 100644
index 0000000000000000000000000000000000000000..52b7e4c81ed17f40e65b8dcfcc0a359729453429
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-common-styles.md
@@ -0,0 +1,188 @@
+# Universal Styles
+
+
+You can set universal styles for components in the **style** attribute or **.css** files.
+
+
+| Name                                | Type                                      | Default Value  | Mandatory  | Description                                      |
+| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
+| width                              | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component width.<br><br>If this attribute is not set, the default value **0** is used.       |
+| height                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component height.<br><br>If this attribute is not set, the default value **0** is used.       |
+| padding                            | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt;                           | 0     | No   | Left, top, right, and bottom padding.                         |
+| margin                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom]  | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Left, top, right, and bottom margins.                         |
+| border-width                       | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the margin for all sides.                      |
+| border-color                       | &lt;color&gt;                            | black | No   | Shorthand attribute to set the color for all borders.                      |
+| border-radius                      | &lt;length&gt;                           | -     | No   | Radius of round-corner borders.           |
+| background-color                   | &lt;color&gt;                            | -     | No   | Background color.                                 |
+| opacity<sup>5+</sup>               | number                                   | 1     | No   | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.       |
+| display                            | string                                   | flex  | No   | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top]                        | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | -     | No   | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+
+> **NOTE**
+>
+> The aforementioned universal styles are not mandatory.
+>
+> Currently, the following color formats are supported:
+> - rgb(255, 255, 255)
+>
+> - rgba(255, 255, 255, 1.0)
+>
+> - HEX formats: \#rrggbb and \#aarrggbb
+>
+> - Enumeration format: as listed in Table 1. The enumeration format is not supported in the script.
+
+
+  **Table 1** Color enums
+
+| Name                | Hexadecimal Code    | Color                                      |
+| -------------------- | -------- | ---------------------------------------- |
+| aliceblue            | \#f0f8ff | ![aliceblue](figures/aliceblue.png)      |
+| antiquewhite         | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
+| aqua                 | \#00ffff | ![aqua](figures/aqua.png)                |
+| aquamarine           | \#7fffd4 | ![aquamarine](figures/aquamarine.png)    |
+| azure                | \#f0ffff | ![azure](figures/azure.png)              |
+| beige                | \#f5f5dc | ![beige](figures/beige.png)              |
+| bisque               | \#ffe4c4 | ![bisque](figures/bisque.png)            |
+| black                | \#000000 | ![000000](figures/000000.png)            |
+| blanchedalmond       | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
+| blue                 | \#0000ff | ![blue](figures/blue.png)                |
+| blueviolet           | \#8a2be2 | ![blueviolet](figures/blueviolet.png)    |
+| brown                | \#a52a2a | ![brown](figures/brown.png)              |
+| burlywood            | \#deB887 | ![burlywood](figures/burlywood.png)      |
+| cadetblue            | \#5f9ea0 | ![cadetblue](figures/cadetblue.png)      |
+| chartreuse           | \#7fff00 | ![chartreuse](figures/chartreuse.png)    |
+| chocolate            | \#d2691e | ![chocolate](figures/chocolate.png)      |
+| coral                | \#ff7f50 | ![coral](figures/coral.png)              |
+| cornflowerblue       | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
+| cornsilk             | \#fff8dc | ![cornsilk](figures/cornsilk.png)        |
+| crimson              | \#dc143c | ![crimson](figures/crimson.png)          |
+| cyan                 | \#00ffff | ![cyan](figures/cyan.png)                |
+| darkblue             | \#00008b | ![darkblue](figures/darkblue.png)        |
+| darkcyan             | \#008b8b | ![darkcyan](figures/darkcyan.png)        |
+| darkgoldenrod        | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
+| darkgray             | \#a9a9a9 | ![darkgray](figures/darkgray.png)        |
+| darkgreen            | \#006400 | ![darkgreen](figures/darkgreen.png)      |
+| darkgrey             | \#a9a9a9 | ![darkgrey](figures/darkgrey.png)        |
+| darkkhaki            | \#bdb76b | ![darkkhaki](figures/darkkhaki.png)      |
+| darkmagenta          | \#8b008b | ![darkmagenta](figures/darkmagenta.png)  |
+| darkolivegreen       | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
+| darkorange           | \#ff8c00 | ![darkorange](figures/darkorange.png)    |
+| darkorchid           | \#9932cc | ![darkorchid](figures/darkorchid.png)    |
+| darkred              | \#8b0000 | ![darkred](figures/darkred.png)          |
+| darksalmon           | \#e9967a | ![darksalmon](figures/darksalmon.png)    |
+| darkseagreen         | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
+| darkslateblue        | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
+| darkslategray        | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
+| darkslategrey        | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
+| darkturquoise        | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
+| darkviolet           | \#9400d3 | ![darkviolet](figures/darkviolet.png)    |
+| deeppink             | \#ff1493 | ![deeppink](figures/deeppink.png)        |
+| deepskyblue          | \#00bfff | ![deepskyblue](figures/deepskyblue.png)  |
+| dimgray              | \#696969 | ![dimgray](figures/dimgray.png)          |
+| dimgrey              | \#696969 | ![dimgrey](figures/dimgrey.png)          |
+| dodgerblue           | \#1e90ff | ![dodgerblue](figures/dodgerblue.png)    |
+| firebrick            | \#b22222 | ![firebrick](figures/firebrick.png)      |
+| floralwhite          | \#fffaf0 | ![floralwhite](figures/floralwhite.png)  |
+| forestgreen          | \#228b22 | ![forestgreen](figures/forestgreen.png)  |
+| fuchsia              | \#ff00ff | ![fuchsia](figures/fuchsia.png)          |
+| gainsboro            | \#dcdcdc | ![gainsboro](figures/gainsboro.png)      |
+| ghostwhite           | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png)    |
+| gold                 | \#ffd700 | ![gold](figures/gold.png)                |
+| goldenrod            | \#daa520 | ![goldenrod](figures/goldenrod.png)      |
+| gray                 | \#808080 | ![gray](figures/gray.png)                |
+| green                | \#008000 | ![green](figures/green.png)              |
+| greenyellow          | \#adff2f | ![greenyellow](figures/greenyellow.png)  |
+| grey                 | \#808080 | ![grey](figures/grey.png)                |
+| honeydew             | \#f0fff0 | ![honeydew](figures/honeydew.png)        |
+| hotpink              | \#ff69b4 | ![hotpink](figures/hotpink.png)          |
+| indianred            | \#cd5c5c | ![indianred](figures/indianred.png)      |
+| indigo               | \#4b0082 | ![indigo](figures/indigo.png)            |
+| ivory                | \#fffff0 | ![ivory](figures/ivory.png)              |
+| khaki                | \#f0e68c | ![khaki](figures/khaki.png)              |
+| lavender             | \#e6e6fa | ![lavender](figures/lavender.png)        |
+| lavenderblush        | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
+| lawngreen            | \#7cfc00 | ![lawngreen](figures/lawngreen.png)      |
+| lemonchiffon         | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
+| lightblue            | \#add8e6 | ![lightblue](figures/lightblue.png)      |
+| lightcoral           | \#f08080 | ![lightcoral](figures/lightcoral.png)    |
+| lightcyan            | \#e0ffff | ![lightcyan](figures/lightcyan.png)      |
+| lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) |
+| lightgray            | \#d3d3d3 | ![lightgray](figures/lightgray.png)      |
+| lightgreen           | \#90ee90 | ![lightgreen](figures/lightgreen.png)    |
+| lightpink            | \#ffb6c1 | ![lightpink](figures/lightpink.png)      |
+| lightsalmon          | \#ffa07a | ![lightsalmon](figures/lightsalmon.png)  |
+| lightseagreen        | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
+| lightskyblue         | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
+| lightslategray       | \#778899 | ![lightslategray](figures/lightslategray.png) |
+| lightslategrey       | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
+| lightsteelblue       | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
+| lightyellow          | \#ffffe0 | ![lightyellow](figures/lightyellow.png)  |
+| lime                 | \#00ff00 | ![lime](figures/lime.png)                |
+| limegreen            | \#32cd32 | ![limegreen](figures/limegreen.png)      |
+| linen                | \#faf0e6 | ![linen](figures/linen.png)              |
+| magenta              | \#ff00ff | ![magenta](figures/magenta.png)          |
+| maroon               | \#800000 | ![maroon](figures/maroon.png)            |
+| mediumaquamarine     | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
+| mediumblue           | \#0000cd | ![mediumblue](figures/mediumblue.png)    |
+| mediumorchid         | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
+| mediumpurple         | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
+| mediumseagreen       | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
+| mediumslateblue      | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
+| mediumspringgreen    | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
+| mediumturquoise      | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
+| mediumvioletred      | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
+| midnightblue         | \#191970 | ![midnightblue](figures/midnightblue.png) |
+| mintcream            | \#f5fffa | ![mintcream](figures/mintcream.png)      |
+| mistyrose            | \#ffe4e1 | ![mistyrose](figures/mistyrose.png)      |
+| moccasin             | \#ffe4b5 | ![moccasin](figures/moccasin.png)        |
+| navajowhite          | \#ffdead | ![navajowhite](figures/navajowhite.png)  |
+| navy                 | \#000080 | ![navy](figures/navy.png)                |
+| oldlace              | \#fdf5e6 | ![oldlace](figures/oldlace.png)          |
+| olive                | \#808000 | ![olive](figures/olive.png)              |
+| olivedrab            | \#6b8e23 | ![olivedrab](figures/olivedrab.png)      |
+| orange               | \#ffa500 | ![orange](figures/orange.png)            |
+| orangered            | \#ff4500 | ![orangered](figures/orangered.png)      |
+| orchid               | \#da70d6 | ![orchid](figures/orchid.png)            |
+| palegoldenrod        | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
+| palegreen            | \#98fb98 | ![palegreen](figures/palegreen.png)      |
+| paleturquoise        | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
+| palevioletred        | \#db7093 | ![palevioletred](figures/palevioletred.png) |
+| papayawhip           | \#ffefd5 | ![papayawhip](figures/papayawhip.png)    |
+| peachpuff            | \#ffdab9 | ![peachpuff](figures/peachpuff.png)      |
+| peru                 | \#cd853f | ![peru](figures/peru.png)                |
+| pink                 | \#ffc0cb | ![pink](figures/pink.png)                |
+| plum                 | \#dda0dd | ![plum](figures/plum.png)                |
+| powderblue           | \#b0e0e6 | ![powderblue](figures/powderblue.png)    |
+| purple               | \#800080 | ![purple](figures/purple.png)            |
+| rebeccapurple        | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
+| red                  | \#ff0000 | ![red](figures/red.png)                  |
+| rosybrown            | \#bc8f8f | ![rosybrown](figures/rosybrown.png)      |
+| royalblue            | \#4169e1 | ![royalblue](figures/royalblue.png)      |
+| saddlebrown          | \#8b4513 | ![saddlebrown](figures/saddlebrown.png)  |
+| salmon               | \#fa8072 | ![salmon](figures/salmon.png)            |
+| sandybrown           | \#f4a460 | ![sandybrown](figures/sandybrown.png)    |
+| seagreen             | \#2e8b57 | ![seagreen](figures/seagreen.png)        |
+| seashell             | \#fff5ee | ![seashell](figures/seashell.png)        |
+| sienna               | \#a0522d | ![sienna](figures/sienna.png)            |
+| silver               | \#c0c0c0 | ![silver](figures/silver.png)            |
+| skyblue              | \#87ceeb | ![skyblue](figures/skyblue.png)          |
+| slateblue            | \#6a5acd | ![slateblue](figures/slateblue.png)      |
+| slategray            | \#708090 | ![slategray](figures/slategray.png)      |
+| slategrey            | \#708090 | ![slategray](figures/slategray.png)      |
+| snow                 | \#fffafa | ![snow](figures/snow.png)                |
+| springgreen          | \#00ff7f | ![springgreen](figures/springgreen.png)  |
+| steelblue            | \#4682b4 | ![steelblue](figures/steelblue.png)      |
+| tan                  | \#d2b48c | ![tan](figures/tan.png)                  |
+| teal                 | \#008080 | ![teal](figures/teal.png)                |
+| thistle              | \#d8Bfd8 | ![thistle](figures/thistle.png)          |
+| tomato               | \#ff6347 | ![tomato](figures/tomato.png)            |
+| turquoise            | \#40e0d0 | ![turquoise](figures/turquoise.png)      |
+| violet               | \#ee82ee | ![violet](figures/violet.png)            |
+| wheat                | \#f5deb3 | ![wheat](figures/wheat.png)              |
+| white                | \#ffffff | ![white](figures/white.png)              |
+| whitesmoke           | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png)    |
+| yellow               | \#ffff00 | ![yellow](figures/yellow.png)            |
+| yellowgreen          | \#9acd32 | ![yellowgreen](figures/yellowgreen.png)  |
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c8f4c0550f7794d975eb7014e30506c034e9a1d
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
@@ -0,0 +1,275 @@
+# chart
+
+The **\<chart>** component displays line charts and bar charts.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name      | Type                       | Mandatory  | Description                                      |
+| -------- | ------------------------- | ---- | ---------------------------------------- |
+| type     | string                    | No   | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**|
+| options  | ChartOptions              | Yes   | Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
+| datasets | Array&lt;ChartDataset&gt; | Yes   | Data sets. You can set multiple datasets and their background colors.    |
+| id       | string                    | No   | Unique ID of the component.                                |
+| style    | string                    | No   | Style declaration of the component.                                |
+| class    | string                    | No   | Style class of the component, which is used to refer to a style table.                         |
+| ref      | string                    | No   | Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+  **Table 1** ChartOptions
+
+| Name    | Type         | Mandatory  | Description                                      |
+| ------ | ----------- | ---- | ---------------------------------------- |
+| xAxis  | ChartAxis   | Yes   | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.         |
+| yAxis  | ChartAxis   | Yes   | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.         |
+| series | ChartSeries | No   | Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute.|
+
+  **Table 2** ChartDataset
+
+| Name                         | Type                 | Default Value     | Mandatory  | Description                  |
+| --------------------------- | ------------------- | -------- | ---- | -------------------- |
+| backgroundColor(deprecated) | &lt;color&gt;       | \#ff6384 | No   | Color of a line or bar. This attribute is not recommended.    |
+| strokeColor                 | &lt;color&gt;       | \#ff6384 | No   | Line color. Only line charts support this attribute.        |
+| fillColor                   | &lt;color&gt;       | \#ff6384 | No   | Fill color. For line charts, the value indicates the gradient color to fill.  |
+| data                        | Array&lt;number&gt; | -        | Yes   | Data of the drawn line or bar.        |
+| gradient                    | boolean             | false    | No   | Whether to display the gradient color. Only line charts support this attribute.|
+
+  **Table 3** ChartAxis
+
+| Name      | Type           | Default Value     | Mandatory  | Description                                      |
+| -------- | ------------- | -------- | ---- | ---------------------------------------- |
+| min      | number        | 0        | No   | Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.                |
+| max      | number        | 100      | No   | Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.                |
+| axisTick | number        | 10       | No   | Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
+| display  | boolean       | false    | No   | Whether to display the axis.                                  |
+| color    | &lt;color&gt; | \#c0c0c0 | No   | Axis color.                                    |
+
+  **Table 4** ChartSeries
+
+| Name         | Type            | Mandatory  | Description                  |
+| ----------- | -------------- | ---- | -------------------- |
+| lineStyle   | ChartLineStyle | No   | Line style, such as the line width and whether the line is smooth.     |
+| headPoint   | PointStyle     | No   | Style and size of the white point at the start of the line.     |
+| topPoint    | PointStyle     | No   | Style and size of the top point.          |
+| bottomPoint | PointStyle     | No   | Style and size of the bottom point.          |
+| loop        | ChartLoop      | No   | Whether to start drawing again when the screen is looped.|
+
+  **Table 5** ChartLineStyle
+
+| Name    | Type            | Default Value  | Mandatory  | Description   |
+| ------ | -------------- | ----- | ---- | ----- |
+| width  | &lt;length&gt; | 1px   | No   | Line width.|
+| smooth | boolean        | false | No   | Whether the line is smooth.|
+
+  **Table 6** PointStyle
+
+| Name         | Type            | Default Value     | Mandatory  | Description                                |
+| ----------- | -------------- | -------- | ---- | ---------------------------------- |
+| shape       | string         | circle   | No   | Shape of the highlight point. Available values are as follows:<br>- circle|
+| size        | &lt;length&gt; | 5px      | No   | Size of the highlight point.                           |
+| strokeWidth | &lt;length&gt; | 1px      | No   | Stroke width.                              |
+| strokeColor | &lt;color&gt;  | \#ff0000 | No   | Stroke color.                             |
+| fillColor   | &lt;color&gt;  | \#ff0000 | No   | Fill color.                             |
+| display     | boolean        | true     | No   | Whether to display the highlight spot.                           |
+
+  **Table 7** ChartLoop
+
+| Name    | Type            | Default Value | Mandatory  | Description                                      |
+| ------ | -------------- | ---- | ---- | ---------------------------------------- |
+| margin | &lt;length&gt; | 1    | No   | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
+
+
+
+
+## Methods
+
+| Methods    | Parameter                                      | Description                                      |
+| ------ | ---------------------------------------- | ---------------------------------------- |
+| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array&lt;number&gt;, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
+
+
+## Events
+
+| Name                | Parameter                               | Description         |
+| ------------------ | --------------------------------- | ----------- |
+| click              | -                                 | Triggered when the component is clicked. |
+| longpress          | -                                 | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name                                | Type                                      | Default Value  | Mandatory  | Description                                      |
+| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
+| width                              | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component width.<br><br>If this attribute is not set, the default value **0** is used.       |
+| height                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component height.<br><br>If this attribute is not set, the default value **0** is used.       |
+| padding                            | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt;                           | 0     | No   | Left, top, right, and bottom padding.                         |
+| margin                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom]  | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Left, top, right, and bottom margins.                         |
+| border-width                       | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the margin for all sides.                      |
+| border-color                       | &lt;color&gt;                            | black | No   | Shorthand attribute to set the color for all borders.                      |
+| border-radius                      | &lt;length&gt;                           | -     | No   | Radius of round-corner borders.           |
+| background-color                   | &lt;color&gt;                            | -     | No   | Background color.                                 |
+| display                            | string                                   | flex  | No   | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top]                        | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | -     | No   | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+1. Line chart
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <chart class="chart" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+     <input class="button" type="button" value="Add data" onclick="addData"/>
+   </div>
+   ```
+
+
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+     background-color: white;
+   }
+   .chart {
+     width: 300px;
+     height: 300px;
+   }
+   .button {
+     width: 280px;
+     border-radius: 0px;
+   }
+   ```
+
+
+   ```js
+   // xxx.js
+   export default {
+     data: {
+       lineData: [
+         {
+           strokeColor: '#0081ff',
+           fillColor: '#cce5ff',
+           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+           gradient: true,
+         }
+       ],
+       lineOps: {
+         xAxis: {
+           min: 0,
+           max: 20,
+           display: false,
+         },
+         yAxis: {
+           min: 0,
+           max: 1000,
+           display: false,
+         },
+         series: {
+           lineStyle: {
+             width: "5px",
+             smooth: true,
+           },
+           headPoint: {
+             shape: "circle",
+             size: 10,
+             strokeWidth: 5,
+             fillColor: '#ffffff',
+             strokeColor: '#007aff',
+             display: true,
+           },
+           loop: {
+             margin: 2,
+             gradient: true,
+           }
+         }
+       },
+     },
+     addData() {
+       this.$refs.linechart.append({
+         serial: 0,
+         data: [Math.floor(Math.random() * 400) + 400]
+       })
+     }
+   }
+   ```
+
+   ![lite_line](figures/lite_line.PNG)
+
+2. Bar chart
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <chart class="chart" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
+   </div>
+   ```
+
+
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+     background-color: white;
+   }
+   .chart {
+     width: 300px;
+     height: 300px;
+   }
+   ```
+
+
+   ```js
+   // xxx.js
+   export default {
+     data: {
+       barData: [
+         {
+           fillColor: '#f07826',
+           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
+         },
+         {
+           fillColor: '#cce5ff',
+           data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
+         },
+         {
+           fillColor: '#ff88bb',
+           data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
+         },
+       ],
+       barOps: {
+         xAxis: {
+           min: 0,
+           max: 20,
+           display: false,
+           axisTick: 10
+         },
+         yAxis: {
+           min: 0,
+           max: 1000,
+           display: false,
+         },
+       },
+     }
+   }
+   ```
+
+   ![lite_bar](figures/lite_bar.PNG)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
new file mode 100644
index 0000000000000000000000000000000000000000..226eff9f6c284140b5c671d2135dbe212b609590
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
@@ -0,0 +1,207 @@
+# image-animator
+
+The **\<image-animator>** component is used to provide an image frame animator.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name                   | Type                        | Default Value     | Mandatory  | Description                                      |
+| --------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
+| images                | Array&lt;ImageFrame&gt;    | -        | Yes  | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**.|
+| iteration             | number \| string           | infinite | No   | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
+| reverse               | boolean                    | false    | No   | Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one.|
+| fixedsize             | boolean                    | true     | No   | Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately.|
+| duration              | string                     | -        | Yes  | Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle.|
+| fillmode<sup>5+</sup> | string                     | forwards | No   | Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.|
+| id                    | string                     | -        | No   | Unique ID of the component.                                |
+| style                 | string                     | -        | No   | Style declaration of the component.                                |
+| class                 | string                     | -        | No   | Style class of the component, which is used to refer to a style table.                         |
+| ref                   | string                     | -        | No   | Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+  **Table 1** ImageFrame
+
+| Name    | Type            | Default Value | Mandatory  | Description              |
+| ------ | -------------- | ---- | ---- | ---------------- |
+| src    | &lt;uri&gt;    | -    | Yes  | Image path.           |
+| width  | &lt;length&gt; | 0    | No   | Image width.           |
+| height | &lt;length&gt; | 0    | No   | Image height.           |
+| top    | &lt;length&gt; | 0    | No   | Vertical coordinate of the image relative to the upper left corner of the component.|
+| left   | &lt;length&gt; | 0    | No   | Horizontal coordinate of the image relative to the upper left corner of the component.|
+
+
+## Events
+
+| Name                | Parameter                               | Description         |
+| ------------------ | --------------------------------- | ----------- |
+| stop               | -                                 | Triggered when the frame animation stops  |
+| click              | -                                 | Triggered when the component is clicked. |
+| longpress          | -                                 | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name                                | Type                                      | Default Value  | Mandatory  | Description                                      |
+| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
+| width                              | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component width.<br><br>If this attribute is not set, the default value **0** is used.       |
+| height                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component height.<br><br>If this attribute is not set, the default value **0** is used.       |
+| padding                            | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt;                           | 0     | No   | Left, top, right, and bottom padding.                         |
+| margin                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom]  | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Left, top, right, and bottom margins.                         |
+| border-width                       | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the margin for all sides.                      |
+| border-color                       | &lt;color&gt;                            | black | No   | Shorthand attribute to set the color for all borders.                      |
+| border-radius                      | &lt;length&gt;                           | -     | No   | Radius of round-corner borders.           |
+| background-color                   | &lt;color&gt;                            | -     | No   | Background color.                                 |
+| opacity<sup>5+</sup>               | number                                   | 1     | No   | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.       |
+| display                            | string                                   | flex  | No   | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top]                        | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | -     | No   | left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+
+## Methods
+
+| Name      | Parameter  | Description                                      |
+| -------- | ---- | ---------------------------------------- |
+| start    | -    | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.              |
+| pause    | -    | Pauses the frame animation playback of an image.                              |
+| stop     | -    | Stops the frame animation playback of an image.                              |
+| resume   | -    | Resumes the frame animation playback of an image.                                |
+| getState | -    | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped|
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
+  <div class="btn-box">
+    <input class="btn" type="button" value="start" @click="handleStart" />
+    <input class="btn" type="button" value="stop" @click="handleStop" />
+    <input class="btn" type="button" value="pause" @click="handlePause" />
+    <input class="btn" type="button" value="resume" @click="handleResume" />
+  </div>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.animator {
+  width: 70px;
+  height: 70px;
+}
+.btn-box {
+  width: 264px;
+  height: 120px;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+.btn {
+  border-radius: 8px;
+  width: 120px;
+  margin-top: 8px;
+}
+```
+
+
+```js
+//xxx.js
+export default {
+  data: {
+    frames: [
+      {
+        src: "/common/asserts/heart78.png",
+      },
+      {
+        src: "/common/asserts/heart79.png",
+      },
+      {
+        src: "/common/asserts/heart80.png",
+      },
+      {
+        src: "/common/asserts/heart81.png",
+      },
+      {
+        src: "/common/asserts/heart82.png",
+      },
+      {
+        src: "/common/asserts/heart83.png",
+      },
+      {
+        src: "/common/asserts/heart84.png",
+      },
+      {
+        src: "/common/asserts/heart85.png",
+      },
+      {
+        src: "/common/asserts/heart86.png",
+      },
+      {
+        src: "/common/asserts/heart87.png",
+      },
+      {
+        src: "/common/asserts/heart88.png",
+      },
+      {
+        src: "/common/asserts/heart89.png",
+      },
+      {
+        src: "/common/asserts/heart90.png",
+      },
+      {
+        src: "/common/asserts/heart91.png",
+      },
+      {
+        src: "/common/asserts/heart92.png",
+      },
+      {
+        src: "/common/asserts/heart93.png",
+      },
+      {
+        src: "/common/asserts/heart94.png",
+      },
+      {
+        src: "/common/asserts/heart95.png",
+      },
+      {
+        src: "/common/asserts/heart96.png",
+      },
+    ],
+  },
+  handleStart() {
+    this.$refs.animator.start();
+  },
+  handlePause() {
+    this.$refs.animator.pause();
+  },
+  handleResume() {
+    this.$refs.animator.resume();
+  },
+  handleStop() {
+    this.$refs.animator.stop();
+  },
+};
+```
+
+![image-animator](figures/image-animator.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md
new file mode 100644
index 0000000000000000000000000000000000000000..9dd520dcdeed71f6de216e8d5337d54aec33668d
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md
@@ -0,0 +1,74 @@
+# image
+
+The **\<image>** component is used to render and display images.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| src | string | No| <br>Image path. The supported image formats include PNG and JPG.|
+| id | string | No| Unique ID of the component.|
+| style | string | No| Style declaration of the component.|
+| class | string | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; border-color: red; border-width: 2px;">
+  </image>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+```
+
+![image](figures/image.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md
new file mode 100644
index 0000000000000000000000000000000000000000..a5770bcd59af1727f250b53ac6f1fe1570b4ff14
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md
@@ -0,0 +1,181 @@
+# input
+
+The **\<input>** component provides an interactive interface to receive user input. It can be a radio button, check box, or button.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | <br>button | No| Type of the component, which cannot be dynamically modified. The options are as follows:<br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name. |
+| checked | boolean | false | No| Whether the component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.|
+| name | string | - | No| Name of the component.|
+| value | string | - | No| Value of the component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+- When **type** is set to **checkbox** or **radio**, the following events are supported.
+    | Name| Parameter| Description|
+  | -------- | -------- | -------- |
+  | change | { checked:true \| false } | Triggered when the checked status of the **checkbox** or **radio** button changes.|
+  | click | - | Triggered when the component is clicked. |
+  | longpress | - | Triggered when the component is long pressed. |
+  | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+- When **type** is set to **button**, the following events are supported.
+    | Name| Parameter| Description|
+  | -------- | -------- | -------- |
+  | click | - | Triggered when the component is clicked. |
+  | longpress | - | Triggered when the component is long pressed. |
+  | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff | No| Text color of the component.|
+| font-size | &lt;length&gt; | 30px | No| Font size of the component.|
+| width | &lt;length&gt; | - | No| Width of the component. The default value for a button is **100px**.|
+| height | &lt;length&gt; | - | No| Height of the component. The default value for a button is **50px**.|
+| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+1. Common button
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="div-button">
+     <input class="button" type="button" value="Input-Button"></input>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .div-button {
+     flex-direction: column;
+     align-items: center;
+     width: 100%;
+     height: 100%;
+   }
+   .button {
+     margin-top: 30px;
+     width: 280px;
+   }
+   ```
+
+   ![input-type-button](figures/input-type-button.png)
+
+   
+
+2. Check box
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="content">
+     <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
+     <text class="text">{{text}}</text>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .content{
+     width: 100%;
+     height: 100%;
+     flex-direction: column;
+     align-items: center; 
+     justify-content: center;   
+   }
+   .text{
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     margin-top: 20px;
+     height: 100px;
+   }
+   ```
+
+   ```javascript
+   // xxx.js
+   export default {
+     data: {
+       text: "text"
+     },
+     checkboxOnChange(e) {
+       this.text = e.checked;
+     }
+   }
+   ```
+
+   ![input-type-checkbox](figures/input-type-checkbox.gif)
+
+3. Radio button
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="item">
+       <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input>
+       <text class="text">radio1</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input>
+       <text class="text">radio2</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input>
+       <text class="text">radio3</text>
+     </div>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .container {
+     width: 100%;
+     height: 100%;
+     justify-content: center;
+     align-items: center;
+     flex-direction: column;
+   }
+   .item {
+     width: 50%;
+     height: 30%;
+     justify-content: center;
+   }
+   .text {
+     margin-top: 25%;
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     height: 100px;
+   }
+   ```
+
+   ![input-type-radio](figures/input-type-radio.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md
new file mode 100644
index 0000000000000000000000000000000000000000..8ecc7a2e41d301f03540320244425beacc39a884
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md
@@ -0,0 +1,118 @@
+# marquee
+
+The **\<marquee>** component is used to display a scrolling piece of text.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| scrollamount | number | 6 | No| Maximum length of each scroll.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff<br><br><br>| No| Font color of the scrolling text.|
+| font-size | &lt;length&gt; | <br>30 | No| Font size of the scrolling text.|
+| font-family | string | <br><br>SourceHanSansSC-Regular | No| <br><br>Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <marquee class="customMarquee" scrollamount="{{scrollAmount}}">{{marqueeCustomData}}</marquee>
+  <text class="text" onclick="addSpeed">speed+</text>
+  <text class="text" onclick="downSpeed">speed-</text>
+  <text class="text" onclick="changeData">changeData</text>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+.customMarquee {
+  width: 50%;
+  height: 80px;
+  padding: 10px;
+  margin: 20px;
+  border-width: 4px;
+  border-color: #ffffff;
+  border-radius: 20px;
+  font-size: 38px;
+}
+.text {
+  font-size: 30px;
+  text-align: center;
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+  background-color: #f2f2f2;
+  border-radius: 40px;
+  color: #0d81f2;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    scrollAmount: 30,
+    marqueeCustomData: 'Custom marquee Custom marquee Custom marquee'
+  },
+  addSpeed() {
+    this.scrollAmount++;
+  },
+  downSpeed() {
+    this.scrollAmount--;
+  },
+  changeData() {
+    this.marqueeCustomData = 'Change Data Change Data Change Data';
+  }
+}
+```
+
+![marquee](figures/marquee.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..e9dacebc6c419bfaeca6c8aac9c1001e0725bd1f
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md
@@ -0,0 +1,145 @@
+# picker-view
+
+The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | text | No| Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:<br>- **text**: text selector.<br>- **time**: time selector.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+Text selector (**type** is **text**)
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| range | Array | - | No| Value range of the text selector.<br>Use data binding, for example, **range = {{data}}**, to specify the range. Declare the corresponding variable in the JavaScript: **data: ["15", "20", "25"]**.|
+| selected | string | 0 | No| Default value of the text selector. The value is the index of **range**.|
+
+Time selector (**type** is **time**)
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| selected | string | 00:00 | No| Default value of the time selector, in the format of HH:mm.<br>|
+
+
+## Events
+
+Text selector (**type** is **text**)
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.|
+
+Time selector (**type** is **time**)
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { hour: hour, minute: minute} | Triggered when a value is specified for the time selector. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#808080      | No| Font color of a candidate item.|
+| font-size | &lt;length&gt; | 30px | No| Font size of a candidate item. The value is of the length type, in pixels.|
+| selected-color | &lt;color&gt; | \#ffffff | No| Font color of the selected item.|
+| selected-font-size | &lt;length&gt; | 38px | No| Font size of the selected item. The value is of the length type, in pixels.|
+| selected-font-family | string | HYQiHei-65S | No| Font type of the selected item.|
+| font-family | string | HYQiHei-65S | No| Font type of an item.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container" @swipe="handleSwipe">
+  <text class="title">
+    Selected: {{time}}
+  </text>
+  <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+}
+.time-picker {
+  width: 500px;
+  height: 400px;
+  margin-top: 20px;
+}
+```
+
+
+```js
+/* xxx.js */
+export default {
+  data: {
+    defaultTime: "",
+    time: "",
+  },
+  onInit() {
+    this.defaultTime = this.now();
+  },
+  handleChange(data) {
+    this.time = this.concat(data.hour, data.minute);
+  },
+  now() {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return this.concat(hours, minutes);
+  },
+
+  fill(value) {
+    return (value > 9 ? "" : "0") + value;
+  },
+
+  concat(hours, minutes) {
+    return `${this.fill(hours)}:${this.fill(minutes)}`;
+  },
+}
+```
+
+![picker-view](figures/picker-view.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md
new file mode 100644
index 0000000000000000000000000000000000000000..740bc136bc0a506cc6f28f883424fb2a62b15504
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md
@@ -0,0 +1,125 @@
+# progress
+
+The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | horizontal | No| Type of the progress bar, which cannot be changed dynamically. Available values are as follows:<br>- **horizontal**: linear progress bar.<br>- **arc**: arc progress bar.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+Different types of progress bars support different attributes.
+
+- When **type** is set to **horizontal**, the following attributes are supported.
+    | Name| Type| Default Value| Mandatory| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
+
+- When **type** is set to **arc**, the following attributes are supported.
+    | Name| Type| Default Value| Mandatory| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+- When **type** is set to **horizontal**, the following styles are supported.
+
+  | Name        | Type          | Default Value                                        | Mandatory| Description              |
+  | ------------ | -------------- | ---------------------------------------------- | ---- | ------------------ |
+  | color        | &lt;color&gt;  | \#6b9ac7                                       | No  | Color of the progress bar.|
+  | stroke-width | &lt;length&gt; | 32<sup>1-4 </sup>\| 4<sup>5+</sup>px | No  | Stroke width of the progress bar.|
+
+- When **type** is set to **arc**, the following styles are supported.
+
+  | Name            | Type          | Default Value| Mandatory| Description                                                        |
+  | ---------------- | -------------- | ------ | ---- | ------------------------------------------------------------ |
+  | color            | &lt;color&gt;  | -      | No  | Color of the arc progress bar.                                          |
+  | background-color | &lt;color&gt;  | -      | No  | Background color of the arc progress bar.                                        |
+  | stroke-width     | &lt;length&gt; | -      | No  | Width of the arc progress bar.<br>A larger width value means that the progress bar is closer to the center of the circle. The width is always within the radius range.|
+  | start-angle      | &lt;deg&gt;    | 240    | No  | Start angle of the arc progress bar, which starts from the direction of zero o'clock. The value ranges from 0 to 360 degrees (clockwise).|
+  | total-angle      | &lt;deg&gt;    | 240    | No  | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.|
+  | center-x         | &lt;length&gt; | -      | No  | Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-y** and **radius**.|
+  | center-y         | &lt;length&gt; | -      | No  | Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-x** and **radius**.|
+  | radius           | &lt;length&gt; | -      | No  | Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**.        |
+
+In addition to the preceding styles, the following styles are supported.
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <progress type="horizontal" percent="{{horizontalVal}}" style="height: 10%;width: 40%;" onclick = "changeHorizontal"></progress>
+  <progress type="arc" class="min-progress" percent="{{arcVal}}" on:click="changeArc"></progress>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+.min-progress {
+  width: 300px;
+  height: 300px;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    arcVal: 0,
+    horizontalVal: 0
+  },
+  changeArc() {
+    this.arcVal+= 10;
+  },
+  changeHorizontal() {
+    this.horizontalVal+= 10;
+  }
+}
+```
+
+![progress](figures/progress.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md
new file mode 100644
index 0000000000000000000000000000000000000000..16ef26d1b4263b0217c9fedfc8f04016fe7175db
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md
@@ -0,0 +1,125 @@
+# qrcode
+
+
+The **\<qrcode>** component is used to generate and display a QR code.
+
+> **NOTE**
+>
+> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| value | string | - | Yes| Content used to generate the QR code. The maximum length is 256.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#000000 | No| Color of the QR code.|
+| background-color | &lt;color&gt; | \#ffffff | No| Background color of the QR code.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+>  **NOTE**
+> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
+>
+>- The minimum values of **width** and **height** are 200 px.
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_color}};background-color: {{qr_bcol}};"></qrcode>
+  <input type="button" onclick="changeColor" class="button">Color</input>
+  <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input>
+  <input type="button" onclick="changeColor" class="button">Value</input>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.qrCode {
+  width: 200px;
+  height: 200px;
+}
+.button {
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    qr_col: '#87ceeb',
+    qr_bcol: '#f0ffff',
+    qr_value: 'value'
+  },
+  changeColor() {
+    if (this.qr_col == '#87ceeb') {
+      this.qr_col = '#fa8072';
+    } else {
+      this.qr_col = '#87ceeb';
+    }
+  },
+  changeBackgroundColor() {
+    if (this.qr_bcol == '#f0ffff') {
+      this.qr_bcol = '#ffffe0';
+    } else {
+      this.qr_bcol = '#f0ffff';
+    }
+  },
+  changeValue() {
+    if (this.qr_value == 'value') {
+      this.qr_value = 'change';
+    } else {
+      this.qr_value = 'value';
+    }
+  }
+}
+```
+
+![qrcode](figures/qrcode.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
new file mode 100644
index 0000000000000000000000000000000000000000..14a1804c4b47d769b5020fb820ac768a3f434316
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
@@ -0,0 +1,102 @@
+# slider
+
+The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| min   | number | 0    | No   | Minimum value of the slider.                              |
+| max   | number | 100  | No   | Maximum value of the slider.                              |
+| value | number | 0    | No   | Initial value of the slider.                              |
+| id    | string | -    | No   | Unique ID of the component.                                |
+| style | string | -    | No   | Style declaration of the component.                                |
+| class | string | -    | No   | Style class of the component, which is used to refer to a style table.                         |
+| ref   | string | -    | No   | Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name                | Parameter                               | Description            |
+| ------------------ | --------------------------------- | -------------- |
+| change             | ChangeEvent                       | Triggered when the value changes.|
+| click              | -                                 | Triggered when the component is clicked.    |
+| longpress          | -                                 | Triggered when the component is long pressed.    |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.   |
+
+  **Table 1** ChangeEvent
+
+| Attribute                                      | Type    | Description           |
+| ---------------------------------------- | ------ | ------------- |
+| progress<sup>(deprecated<sup>5+</sup>)</sup> | string | Current value of the slider.|
+| value<sup>5+</sup>                       | number | Current value of the slider.|
+
+
+## Styles
+
+| Name                                | Type                                      | Default Value     | Mandatory  | Description                                      |
+| ---------------------------------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
+| color                              | &lt;color&gt;                            | \#000000 | No   | Background color of the slider.                               |
+| selected-color                     | &lt;color&gt;                            | \#ffffff | No   | Selected color of the slider.                              |
+| width                              | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -        | No   | Component width.<br>If this attribute is not set, the default value **0** is used.       |
+| height                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -        | No   | Component height.<br>If this attribute is not set, the default value **0** is used.       |
+| padding                            | &lt;length&gt;                           | 0        | No   | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt;                           | 0        | No   | Left, top, right, and bottom padding.                         |
+| margin                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0        | No   | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom]  | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0        | No   | Left, top, right, and bottom margins.                         |
+| border-width                       | &lt;length&gt;                           | 0        | No   | Shorthand attribute to set the margin for all sides.                      |
+| border-color                       | &lt;color&gt;                            | black    | No   | Shorthand attribute to set the color for all borders.                      |
+| border-radius                      | &lt;length&gt;                           | -        | No   | Radius of round-corner borders.           |
+| background-color                   | &lt;color&gt;                            | -        | No   | Background color.                                 |
+| display                            | string                                   | flex     | No   | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top]                        | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | -        | No   | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <text>slider start value is {{startValue}}</text>
+  <text>slider current value is {{currentValue}}</text>
+  <text>slider end value is {{endValue}}</text>
+  <slider min="0" max="100" value="{{value}}" onchange="setvalue" style="width: 20%;height: 10%"></slider>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    value: 0,
+    startValue: 0,
+    currentValue: 0,
+    endValue: 100,
+  },
+  setvalue(e) {
+    this.currentValue = e.value;
+  }
+}
+```
+
+![slider](figures/slider.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md
new file mode 100644
index 0000000000000000000000000000000000000000..42b4bddc549dcda654c2925d164e2eada3190910
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md
@@ -0,0 +1,99 @@
+# switch
+
+The **\<switch>** component is used to enable or disable a function.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| checked | boolean | false | No| Whether the component is checked or not.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { checked: checkedValue } | Triggered when the **checked** state changes.|
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div class="box">
+    <switch checked="true" @change="switchChange"></switch>
+    <text>{{title}}</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.box{
+  width: 18%;
+  height: 25%;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+      title: 'on'
+  },
+  switchChange(e){
+      console.log(e.checked);
+      if(e.checked){
+          this.title="on"
+      }else{
+          this.title="off"
+      }
+  }
+}
+```
+
+![switch](figures/switch.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md b/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..bfb0c1fb8349b5e43c0aabea1b78c62adad8816d
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md
@@ -0,0 +1,98 @@
+# text
+
+The **\<text>** component is used to display a piece of textual information.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff | No| Font color.|
+| font-size | &lt;length&gt; | 30px | No| Font size. |
+| letter-spacing | &lt;length&gt; | 2px | No| Character spacing (px).|
+| text-align | string | left | No| Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.|
+| text-overflow | string | clip | No| Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.|
+| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component width.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component height.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+    <text class="title">
+        Hello {{ title }}
+    </text>
+</div>
+```
+
+```CSS
+/* xxx.css */
+.container {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    width: 100px;
+    font-size: 30px;
+    text-align: center;
+    color: red;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "World";
+    }
+}
+```
+
+![text](figures/text.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md
new file mode 100644
index 0000000000000000000000000000000000000000..58b8642f8acb1adafb2a10242c8eee6ef850523b
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md
@@ -0,0 +1,55 @@
+# canvas
+
+The **\<canvas>** component is used for customizing drawings.
+
+> **NOTE**
+>
+> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Methods
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| getContext | string  | Obtains the context of the drawing on a canvas. The parameter can be set only to **2d**. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md).|
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md
new file mode 100644
index 0000000000000000000000000000000000000000..1e5a349bff3f2fa7bf97fcefd67601a36bb3bb8a
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md
@@ -0,0 +1,365 @@
+# CanvasRenderingContext2D
+
+
+**CanvasRenderingContext2D** allows you to draw rectangles and text on a canvas.
+
+**Example**
+
+```html
+<!-- xxx.hml -->
+<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
+
+```
+
+
+```javascript
+// xxx.js
+export default {
+  handleClick() {
+    const el = this.$refs.canvas1;
+    const ctx = el.getContext('2d');
+    ctx.beginPath();
+    ctx.arc(100, 75, 50, 0, 6.28);
+    ctx.stroke();
+  },
+}
+```
+
+  ![en-us_image_0000001431548113](figures/en-us_image_0000001431548113.png)
+
+
+## fillRect()
+
+Fills a rectangle on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+ ![en-us_image_0000001431388525](figures/en-us_image_0000001431388525.png)
+
+
+  ```javascript
+  ctx.fillRect(20, 20, 200, 150);
+  ```
+
+
+## fillStyle
+
+Sets the style to fill an area.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| color | &lt;color&gt; | Color used to fill the area|
+
+**Example**
+
+  ![en-us_image_0000001431388505](figures/en-us_image_0000001431388505.png)
+
+
+  ```javascript
+  ctx.fillStyle = '#0000ff';
+  ctx.fillRect(20, 20, 150, 100);
+  ```
+
+
+## strokeRect()
+
+Draws a rectangle stroke on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+  ![en-us_image_0000001381268264](figures/en-us_image_0000001381268264.png)
+
+
+  ```javascript
+  ctx.strokeRect(30, 30, 200, 150);
+  ```
+
+
+## fillText()
+
+Draws filled text on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| text | string | Text to draw.|
+| x | number | X-coordinate of the lower left corner of the text.|
+| y | number | Y-coordinate of the lower left corner of the text.|
+
+**Example**
+
+  ![en-us_image_0000001431548109](figures/en-us_image_0000001431548109.png)
+
+
+  ```javascript
+  ctx.font = '35px sans-serif';
+  ctx.fillText("Hello World!", 20, 60);
+  ```
+
+
+## lineWidth
+
+Sets the width of a line.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| lineWidth | number | Line width.|
+
+**Example**
+
+  ![en-us_image_0000001431548121](figures/en-us_image_0000001431548121.png)
+
+
+  ```javascript
+  ctx.lineWidth = 5;
+  ctx.strokeRect(25, 25, 85, 105);
+  ```
+
+
+## strokeStyle
+
+Sets the stroke style.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| color | &lt;color&gt; | Color of the stroke.|
+
+**Example**
+
+  ![en-us_image_0000001380789172](figures/en-us_image_0000001380789172.png)
+
+
+  ```javascript
+  ctx.lineWidth = 10;
+  ctx.strokeStyle = '#0000ff';
+  ctx.strokeRect(25, 25, 155, 105);
+  ```
+
+
+### stroke()<sup>5+</sup>
+
+Draws a stroke.
+
+**Example**
+
+![en-us_image_0000001431388513](figures/en-us_image_0000001431388513.png)
+
+  ```javascript
+  ctx.moveTo(25, 25);
+  ctx.lineTo(25, 105);
+  ctx.strokeStyle = 'rgb(0,0,255)';
+  ctx.stroke();
+  ```
+
+
+### beginPath()<sup>5+</sup>
+
+Creates a drawing path.
+
+**Example**
+
+  ![en-us_image_0000001431548125](figures/en-us_image_0000001431548125.png)
+
+
+  ```javascript
+  ctx.beginPath();              
+  ctx.lineWidth = '6';
+  ctx.strokeStyle = '#0000ff';
+  ctx.moveTo(15, 80); 
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### moveTo()<sup>5+</sup>
+
+Moves a drawing path to a target position on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the target position.|
+| y | number | Y-coordinate of the target position.|
+
+**Example**
+
+  ![en-us_image_0000001431388529](figures/en-us_image_0000001431388529.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### lineTo()<sup>5+</sup>
+
+Connects the current point to a target position using a straight line.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the target position.|
+| y | number | Y-coordinate of the target position.|
+
+**Example**
+
+![en-us_image_0000001431148365](figures/en-us_image_0000001431148365.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### closePath()<sup>5+</sup>
+
+Draws a closed path.
+
+**Example**
+
+  ![en-us_image_0000001381268284](figures/en-us_image_0000001381268284.png)
+
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(110, 30);
+  ctx.lineTo(70, 90);
+  ctx.closePath();
+  ctx.stroke();
+  ```
+
+
+## font
+
+Sets the font style.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| value | string | Font style. **sans-serif**, **serif**, and **monospace** are supported. The default value is **30px HYQiHei-65S**.|
+
+**Example**
+
+  ![en-us_image_0000001381108328](figures/en-us_image_0000001381108328.png)
+
+
+  ```javascript
+  ctx.font = '30px sans-serif';
+  ctx.fillText("Hello World", 20, 60);
+  ```
+
+
+## textAlign
+
+Sets the text alignment mode.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| align | string | Available values are as follows:<br>- **left** (default): The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.|
+
+**Example**
+
+  ![en-us_image_0000001431388517](figures/en-us_image_0000001431388517.png)
+
+
+  ```javascript
+  ctx.strokeStyle = '#0000ff';
+  ctx.moveTo(140, 10);
+  ctx.lineTo(140, 160);
+  ctx.stroke();
+  
+  ctx.font = '18px sans-serif';    
+  
+  // Show the different textAlign values
+  ctx.textAlign = 'left';      
+  ctx.fillText('textAlign=left', 140, 100);
+  ctx.textAlign = 'center';     
+  ctx.fillText('textAlign=center',140, 120);              
+  ctx.textAlign = 'right';      
+  ctx.fillText('textAlign=right',140, 140);
+  ```
+
+
+## arc()<sup>5+</sup>
+
+Draws an arc on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the center point of the arc.|
+| y | number | Y-coordinate of the center point of the arc.|
+| radius | number | Radius of the arc.|
+| startAngle | number | Start radian of the arc.|
+| endAngle | number | End radian of the arc.|
+| anticlockwise | boolean | Whether to draw the arc counterclockwise.|
+
+**Example**
+
+![en-us_image_0000001381108320](figures/en-us_image_0000001381108320.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.arc(100, 75, 50, 0, 6.28);
+  ctx.stroke();
+  ```
+
+
+### rect()<sup>5+</sup>
+
+Creates a rectangle on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+![en-us_image_0000001381108312](figures/en-us_image_0000001381108312.png)
+
+  ```javascript
+  ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
+  ctx.stroke(); // Draw it
+  ```
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md b/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md
new file mode 100644
index 0000000000000000000000000000000000000000..ef2c39dc69ef2779e3e70c8ca61ff713f726e3d9
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md
@@ -0,0 +1,65 @@
+# Animation Styles
+
+
+Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files.
+
+
+| Name                       | Type                                | Default Value        | Description                                      |
+| ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- |
+| transform                 | string                             | -           | Translation, rotation, and scaling attributes. For details, see Table 1.                                   |
+| animation-name            | string                             | -           | \@keyframes rule. For details, see Table 2.                     |
+| animation-delay           | &lt;time&gt;                       | 0           | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.|
+| animation-duration        | &lt;time&gt;                       | 0           | Animation duration, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.|
+| animation-iteration-count | number  \| infinite | 1           | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.   |
+| animation-timing-function | string                             | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>Available values are as follows:<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
+| animation-fill-mode       | string                             | none        | Start and end styles of the animation.<br>- **none**: No style is applied to the target before or after the animation is executed.<br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.|
+
+
+  **Table 1** transform
+
+| Name        | Type                                  | Description        |
+| ---------- | ------------------------------------ | ---------- |
+| translateX | &lt;length&gt;                       | Moves an element along the x-axis.|
+| translateY | &lt;length&gt;                       | Moves an element along the y-axis.|
+| rotate     | &lt;deg&gt; \| &lt;rad&gt; | Rotates an element.    |
+
+>  **NOTE**
+>
+>  Only images of the original size can be rotated on lite wearables.
+
+
+  **Table 2** \@keyframes
+
+| Name              | Type            | Default Value | Description                |
+| ---------------- | -------------- | ---- | ------------------ |
+| background-color | &lt;color&gt;  | -    | Background color applied to the component after the animation is played. |
+| width            | &lt;length&gt; | -    | Width value applied to the component after the animation is played.  |
+| height           | &lt;length&gt; | -    | Height value applied to the component after the animation is played.  |
+| transform        | string         | -    | Transformation type applied to a component. For details, see Table 1.|
+
+
+If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example:
+
+
+```css
+@keyframes Go
+{
+   from {
+     background-color: #f76160;
+   }
+   to {
+     background-color: #09ba07;
+   }
+}
+```
+
+
+![animation-demo1](figures/animation-demo1.gif)
+
+
+
+
+
+>  **NOTE**
+>
+>  The \@keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md b/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
new file mode 100644
index 0000000000000000000000000000000000000000..43a11aa1f7a691186eb436a19383913f0471ffa5
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
@@ -0,0 +1,110 @@
+# Media Query
+
+>  **NOTE**
+>
+>  - This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>
+>  - The **media** attribute uses the actual size, physical pixel, and screen resolution of the device by default.
+
+
+Media queries are widely used. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to design a layout style based on the device and application attributes.
+
+
+## CSS Syntax Rules
+
+Use **@media** to import query statements. The rule is as follows:
+
+```
+@media [media-type] [and|or] [(media-feature)] {
+  CSS-Code;
+}
+```
+
+**@media screen and (round-screen: true) { … }**: The condition is met when the device screen is round.
+
+**@media (max-height: 454) { … }**: Range query. CSS level 3 is used.
+
+>  **NOTE**
+>
+>  - The following operators are not supported: &lt;=, &gt;=, &lt;, and &gt;.
+>  - Nested parentheses are supported since API version 9.
+>  - A media query statement can contain a maximum of 512 characters.
+>  - A media query condition can contain a maximum of 32 characters.
+
+
+## Media Type
+
+| Type    | Description            |
+| ------ | -------------- |
+| screen | Media query based on screen-related parameters.|
+
+
+## Media Logical Operation
+
+You can use media logical operators to implement complex media query. The following table describes the available operators.
+
+**Table 1** Media logical operators
+
+| Type             | Description                                      |
+| --------------- | ---------------------------------------- |
+| and             | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: liteWearable) and (max-height: 454)** evaluates to **true** when the device type is wearable and the maximum height of the application is 454 pixel units.|
+| or<sup>9+</sup> | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 454) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 454 pixel units or the device screen is round.|
+
+
+
+
+## Media Features
+
+| Type              | Description                                      |
+| ---------------- | ---------------------------------------- |
+| height           | Height of the display area on the application page.                            |
+| min-height       | Minimum height of the display area on the application page.                          |
+| max-height       | Maximum height of the display area on the application page.                          |
+| width            | Width of the display area on the application page.                            |
+| min-width        | Minimum width of the display area on the application page.                          |
+| max-width        | Maximum width of the display area on the application page.                          |
+| aspect-ratio     | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio: 1/2**|
+| min-aspect-ratio | Minimum ratio of the width to the height of the display area on the application page.                    |
+| max-aspect-ratio | Maximum ratio of the width to the height of the display area on the application page.                    |
+| round-screen     | Screen type. The value **true** means that the screen is round, and **false** means the opposite.|
+
+
+## Sample Code for the Common Media Feature
+
+The number and type of attributes must be the same among **.container** blocks. Otherwise, display errors will occur.
+
+```html
+<!-- xxx.hml -->
+<div>
+  <div class="container">
+    <text class="title">Hello World</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 300px;
+  height: 600px;
+  background-color: #008000;
+}
+.title {
+    font-size: 30px;
+    text-align: center;
+}
+@media (device-type: samrtVision) {
+  .container {
+    width: 500px;
+    height: 500px;
+    background-color: #fa8072;
+  }
+} 
+@media (device-type: liteWearable) {
+  .container {
+    width: 300px;
+    height: 300px;
+    background-color: #008b8b;
+  }
+} 
+```
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-container-div.md b/en/application-dev/reference/arkui-js-lite/js-components-container-div.md
new file mode 100644
index 0000000000000000000000000000000000000000..7f9321e0194dd7a6fbc81d476be45188d12cafbb
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-div.md
@@ -0,0 +1,154 @@
+# div
+
+The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| flex-direction | string | row | No| Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
+| flex-wrap | string | nowrap | No| Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Flex items are displayed in a single line.<br>- **wrap**: Flex items are displayed in multiple lines.|
+| justify-content | string | flex-start | No| How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.|
+| align-items | string | stretch<sup>5+</sup><br>flex-start<sup>1-4</sup> | No| How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<sup>5+</sup><br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.|
+| display | string | flex | No| Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+1. Flex style
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="flex-box">
+       <div class="flex-item color-primary"></div>
+       <div class="flex-item color-warning"></div>
+       <div class="flex-item color-success"></div>
+     </div>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+   }
+   .flex-box {
+     justify-content: space-around;
+     align-items: center;
+     width: 400px;
+     height: 140px;
+     background-color: #ffffff;
+   }
+   .flex-item {
+     width: 120px;
+     height: 120px;
+     border-radius: 16px;
+   }
+   .color-primary {
+     background-color: #007dff;
+   }
+   .color-warning {
+     background-color: #ff7500;
+   }
+   .color-success {
+     background-color: #41ba41;
+   }
+   ```
+
+   ![en-us_image_0000001381108420](figures/en-us_image_0000001381108420.png)
+
+2. Flex wrap style
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="flex-box">
+       <div class="flex-item color-primary"></div>
+       <div class="flex-item color-warning"></div>
+       <div class="flex-item color-success"></div>
+     </div>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+   }
+   .flex-box {
+     justify-content: space-around;
+     align-items: center;
+     flex-wrap: wrap;
+     width: 300px;
+     height: 250px;
+     background-color: #ffffff;
+   }
+   .flex-item {
+     width: 120px;
+     height: 120px;
+     border-radius: 16px;
+   }
+   .color-primary {
+     background-color: #007dff;
+   }
+   .color-warning {
+     background-color: #ff7500;
+   }
+   .color-success {
+     background-color: #41ba41;
+   }
+   ```
+
+   ![en-us_image_0000001431148457](figures/en-us_image_0000001431148457.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md b/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md
new file mode 100644
index 0000000000000000000000000000000000000000..32855f3c9a0b62169e81fd2643c97afce58c5d3f
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md
@@ -0,0 +1,53 @@
+# list-item
+
+**\<list-item>** is a child component of the **[\<list>](js-components-container-list.md)** component and is used to display items in a list.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+
+
+
+## Example
+
+See **Example** in [list](js-components-container-list.md).
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-container-list.md b/en/application-dev/reference/arkui-js-lite/js-components-container-list.md
new file mode 100644
index 0000000000000000000000000000000000000000..6c256285ccf9894184218e179efd96089289d61d
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list.md
@@ -0,0 +1,123 @@
+# list
+
+The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Only [\<list-item>](js-components-container-list-item.md) is supported.
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| scrollend | - | Triggered when the list stops scrolling.|
+| click | - | Triggered when the list is clicked. |
+| longpress | - | Triggered when the list is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the list. |
+| scrolltop<sup>8+</sup> | - | Triggered when the list is scrolled to the top.|
+| scrollbottom<sup>8+</sup> | - | Triggered when the list is scrolled to the bottom.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| flex-direction | string | column | No| Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. Dynamic modification is not supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Methods
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| scrollTo | { index: number(position) } | Scrolls the list to the position of the item at the specified index.|
+
+
+## Example
+
+
+```html
+<!-- index.hml -->
+<div class="container">
+  <list class="todo-wraper">
+    <list-item for="{{todolist}}" class="todo-item">
+      <text class="todo-title">{{$item.title}}</text>
+      <text class="todo-title">{{$item.date}}</text>
+    </list-item>
+  </list>
+</div>
+```
+
+
+```js
+// index.js
+export default {
+  data: {
+    todolist: [{
+      title: 'Prepare for the interview',
+      date: '2021-12-31 10:00:00',
+    }, {
+      title: 'Watch the movie',
+      date: '2021-12-31 20:00:00',
+    }],
+  },
+}
+```
+
+
+```css
+/* index.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.todo-wraper {
+  width: 454px;
+  height: 300px;
+}
+.todo-item {
+  width: 454px;
+  height: 80px;
+  flex-direction: column;
+}
+.todo-title {
+  width: 454px;
+  height: 40px;
+  text-align: center;
+}
+```
+
+![list](figures/list.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md b/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md
new file mode 100644
index 0000000000000000000000000000000000000000..c099a46be788de55f5832bc94614c569ba2b0bad
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md
@@ -0,0 +1,101 @@
+# stack
+
+The **\<stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported.
+
+
+## Attributes
+
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| id    | string | -    | No   | Unique ID of the component.                                |
+| style | string | -    | No   | Style declaration of the component.                                |
+| class | string | -    | No   | Style class of the component, which is used to refer to a style table.                         |
+| ref   | string | -    | No   | Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name                | Parameter                               | Description         |
+| ------------------ | --------------------------------- | ----------- |
+| click              | -                                 | Triggered when the component is clicked. |
+| longpress          | -                                 | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name                                | Type                                      | Default Value  | Mandatory  | Description                                      |
+| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
+| width                              | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component width.<br><br>If this attribute is not set, the default value **0** is used.       |
+| height                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | -     | No   | Component height.<br><br>If this attribute is not set, the default value **0** is used.       |
+| padding                            | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt;                           | 0     | No   | Left, top, right, and bottom padding.                         |
+| margin                             | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom]  | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0     | No   | Left, top, right, and bottom margins.                         |
+| border-width                       | &lt;length&gt;                           | 0     | No   | Shorthand attribute to set the margin for all sides.                      |
+| border-color                       | &lt;color&gt;                            | black | No   | Shorthand attribute to set the color for all borders.                      |
+| border-radius                      | &lt;length&gt;                           | -     | No   | Radius of round-corner borders.           |
+| background-color                   | &lt;color&gt;                            | -     | No   | Background color.                                 |
+| opacity<sup>5+</sup>               | number                                   | 1     | No   | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.       |
+| display                            | string                                   | flex  | No   | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top]                        | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | -     | No   | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+>  **NOTE**
+>
+> The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component.
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<stack class="stack-parent">
+  <div class="back-child bd-radius"></div>
+  <div class="positioned-child bd-radius"></div>
+  <div class="front-child bd-radius"></div>
+</stack>
+```
+
+
+```css
+/* xxx.css */
+.stack-parent {
+  width: 400px;
+  height: 400px;
+  background-color: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+}
+.back-child {
+  width: 300px;
+  height: 300px;
+  background-color: #3f56ea;
+}
+.front-child {
+  width: 100px;
+  height: 100px;
+  background-color: #00bfc9;
+}
+.positioned-child {
+  width: 100px;
+  height: 100px;
+  left: 50px;
+  top: 50px;
+  background-color: #47cc47;
+}
+.bd-radius {
+  border-radius: 16px;
+}
+```
+
+![en-us_image_0000001380789188](figures/en-us_image_0000001380789188.png)
diff --git a/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md b/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..34ad83a37b8d907b886427b183e99f4666e28327
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md
@@ -0,0 +1,112 @@
+# swiper
+
+The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+All child components except **\<list>** are supported.
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| index | number | 0 | No| Index of the child component currently displayed in the container.|
+| loop | boolean | true | No| Whether to enable looping. |
+| duration | number | - | No| Duration of the autoplay for child component switching.|
+| vertical | boolean | false | No| Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.<br>The value cannot be dynamically updated.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { index: currentIndex } | Triggered when the index of the currently displayed component changes.|
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<swiper class="container" index="{{index}}">
+  <div class="swiper-item primary-item">
+    <text>1</text>
+  </div>
+  <div class="swiper-item warning-item">
+    <text>2</text>
+  </div>
+  <div class="swiper-item success-item">
+    <text>3</text>
+  </div>
+</swiper>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.swiper-item {
+  width: 454px;
+  height: 454px;
+  justify-content: center;
+  align-items: center;
+}
+.primary-item {
+  background-color: #007dff;
+}
+.warning-item {
+  background-color: #ff7500;
+}
+.success-item {
+  background-color: #41ba41;
+}
+```
+
+
+```js
+/* xxx.js */
+export default {
+  data: {
+    index: 1
+  }
+}
+```
+
+![swiper](figures/swiper.gif)
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-file.md b/en/application-dev/reference/arkui-js-lite/js-framework-file.md
new file mode 100644
index 0000000000000000000000000000000000000000..e03caae24cb2ddfd8c20c7517baef2420160bedc
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-file.md
@@ -0,0 +1,73 @@
+# File Organization
+
+
+## Directory structure
+
+The following figure shows the typical directory structure of the JavaScript module (**entry/src/main/js/module**) for an application with feature abilities (FA) using JavaScript APIs.
+
+  **Figure 1** Directory structure 
+
+![en-us_image_0000001431388581](figures/en-us_image_0000001431388581.png)
+
+Functions of the files are as follows:
+
+- **.hml** files describe the page layout.
+
+- **.css** files describe the page style.
+
+- **.js** files process the interactions between pages and users.
+
+Functions of the folders are as follows:
+
+- The **app.js** file manages global JS logics and application lifecycle.
+- The **pages** directory stores all component pages.
+- The **common** directory stores public resource files, such as media resources and **.js** files.
+- The **i18n** folder stores resources in different languages, for example, UI strings and image paths.
+
+>  **NOTE**
+>
+>  - The **i18n** folder is a reserved one and cannot be renamed.
+>
+>
+>  - The folders marked as optional in the directory structure can be created as needed after you create the project in DevEco Studio.
+
+
+## File Access Rules
+
+Application resources can be accessed via an absolute or relative path. In this development framework, an absolute path starts with a slash (/), and a relative path starts with **./** or **../**. The rules are as follows:
+
+- To reference a code file, use a relative path, for example, **../common/utils.js**.
+
+- To reference a resource file, use an absolute path, for example: **/common/xxx.png**.
+
+- Store code files and resource files in the **common** directory and access the files in a required fashion.
+
+- In a **.css** file, use the **url()** function to create a URL, for example, **url(/common/xxx.png)**.
+
+>  **NOTE**
+>
+>  When code file A needs to reference code file B:
+>
+>  - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
+>
+>  - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files, because the directory of code file B changes during Webpack packaging.
+>
+
+
+## Media File Formats
+
+  **Table 1** Supported image formats
+
+| Format  | Supported Version                    | File Name Extension|
+| ---- | ------------------------ | ------- |
+| BMP  | API version 4+ | .bmp    |
+| JPEG | API version 4+ | .jpg    |
+| PNG  | API version 4+ | .png    |
+
+## Storage Directory
+
+Since API version 5, the [\<image>](js-components-basic-image.md) component supports access to images in the private directory of an application.
+
+| Directory Type  | Prefix           | Access Visibility | Description                         |
+| ------ | --------------- | ------ | --------------------------- |
+| Private directory of the application| internal://app/ | Current application only| The directory is deleted when the application is uninstalled. Access to the parent directory using **../** is prohibited.|
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md b/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md
new file mode 100644
index 0000000000000000000000000000000000000000..ed245837baa9f181f5683d61602d8728aaaa1317
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md
@@ -0,0 +1,27 @@
+# app.js
+
+## Application Lifecycle<sup>4+</sup>
+
+You can implement lifecycle logic specific to your application in the **app.js** file. Available application lifecycle functions are as follows:
+
+
+- **onCreate()**: called when an application is created
+
+- **onDestory()**: called when an application is destroyed
+
+
+In the following example, logs are printed only in the lifecycle functions.
+
+
+
+```js
+// app.js
+export default {
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  },
+}
+```
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md b/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
new file mode 100644
index 0000000000000000000000000000000000000000..868e668195e277d512bd98c99b0404261b198eab
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
@@ -0,0 +1,74 @@
+# "js" Tag
+
+
+The "js" tag contains the instance name and page route information.
+
+
+| Tag   | Type    | Default Value    | Mandatory  | Description                           |
+| ----- | ------ | ------- | ---- | ----------------------------- |
+| name  | string | default | Yes   | Name of the JavaScript instance.                   |
+| pages | Array  | -       | Yes   | Route information. For details, see ["pages"](#pages).|
+
+
+>  **NOTE**
+>
+>  The "name" and "pages" tags are configured in the "js" tag of the **config.json** file.
+
+
+## pages
+
+The **"pages"** defines the route information of each page. Each page consists of the page path and page name. The following is an example:
+
+
+```
+{
+  ...
+  "pages": [
+    "pages/index/index",
+    "pages/detail/detail"
+  ]
+  ...
+}
+```
+
+
+>  **NOTE**
+>
+>
+>  - The application home page is fixed to **pages/index/index**.
+>
+>  - The page name should not be a component name, for example, **text.hml** or **button.hml**.
+
+
+## Example
+
+
+```
+{
+  "app": {
+    "bundleName": "com.example.player",
+    "version": {
+        "code": 1,
+        "name": "1.0"
+    },
+    "vendor": "example"
+  }
+  "module": {
+    ...
+    "js": [
+      {
+        "name": "default",
+        "pages": [
+          "pages/index/index",
+          "pages/detail/detail"
+        ]
+      }
+    ],
+    "abilities": [
+      {
+        ...
+      }
+    ]
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
new file mode 100644
index 0000000000000000000000000000000000000000..7e3bf96dde9606c86a70d75f1c89fe62a47d155d
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
@@ -0,0 +1,162 @@
+# CSS
+
+
+Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
+
+
+## Style Import
+
+CSS files can be imported using the **\@import** statement. This facilitates module management and code reuse.
+
+
+## Style Declaration
+
+The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
+
+1. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code:
+
+   ```html
+   <!-- index.hml -->
+   <div class="container">
+     <text style="color: red">Hello World</text>
+   </div>
+   ```
+
+
+   ```css
+   /* index.css */
+   .container {
+     justify-content: center;
+   }
+   ```
+
+2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
+
+   ```css
+   /* style.css */
+   .title {
+     font-size: 50px;
+   }
+   ```
+
+
+   ```css
+   /* index.css */
+   @import '../../common/style.css';
+   .container {
+     justify-content: center;
+   }
+   ```
+
+
+## Selectors
+
+A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
+
+| Selector   | Example                   | Description                                 |
+| ------ | --------------------- | ------------------------------------- |
+| .class | .container            | Selects all components whose **class** is **container**.            |
+| \#id   | \#titleId             | Selects all components whose **id** is **titleId**.                 |
+| ,      | .title, .content | Selects all components whose **class** is **title** or **content**.|
+
+Example:
+
+
+```html
+<!-- Pagelayoutexample.hml -->
+<div id="containerId" class="container">
+  <text id="titleId" class="title">Title</text>
+  <div class="content">
+    <text id="contentId">Content</text>
+  </div>
+</div>
+```
+
+
+```css
+/* Page style xxx.css */
+/* Set the style for the components whose class is title. */
+.title {
+  font-size: 30px;
+}
+/* Set the style for the components whose id is contentId. */
+#contentId {
+  font-size: 20px;
+}
+/* Set padding for all components of the title or content class to 5 px. */
+.title, .content {
+  padding: 5px;
+}
+
+```
+
+
+## Pseudo-classes
+
+A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.
+
+
+
+| Name      | Available Components                               | Description                                      |
+| -------- | ----------------------------------- | ---------------------------------------- |
+| :active  | <br>input[type="button"]           | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
+| :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
+
+The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button. 
+
+
+```html
+<!-- index.hml -->
+<div class="container">
+  <input type="button" class="button" value="Button"></input>
+</div>
+```
+
+
+```css
+/* index.css */
+.button:active {
+  background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
+}
+```
+
+
+## Precompiled Styles
+
+Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
+
+- The following **index.less** file is changed from **index.css**.
+
+  ```css
+  /* index.less */
+  /* Define a variable. */
+  @colorBackground: #000000;
+  .container {
+      background-color: @colorBackground; /* Use the variable defined in the .less file. */
+  }
+  ```
+
+- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
+
+  ```css
+  /* style.scss */
+  /* Define a variable. */
+  $colorBackground: #000000;
+  ```
+
+  Reference the precompiled style file in **index.scss**:
+
+
+  ```css
+  /* index.scss */
+  /* Import style.scss. */
+  @import '../../common/style.scss';
+  .container {
+    background-color: $colorBackground; /* Use the variable defined in style.scss. */
+  }
+  ```
+
+
+  >  **NOTE**
+  >
+  >  Place precompiled style files in the **common** directory.
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
new file mode 100644
index 0000000000000000000000000000000000000000..b111895cb5421d3b5d4310c56f85929c216615ec
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
@@ -0,0 +1,310 @@
+# HML
+
+
+The OpenHarmony Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as data binding, event binding, loop rendering, and conditional rendering.
+
+
+## HML Page Structure
+
+
+```html
+<!-- xxx.hml -->
+<div class="item-container">
+  <text class="item-title">Image Show</text>
+  <div class="item-content">
+    <image src="/common/xxx.png" class="image"></image>
+  </div>
+</div>
+```
+
+
+## Data Binding
+
+
+```html
+<!-- xxx.hml -->
+<div onclick="changeText">
+  <text> {{content[1]}} </text>
+</div>
+```
+
+
+```js
+// xxx.js
+export default {
+  data: {
+    content: ['Hello World!', 'Welcome to my world!']
+  },
+  changeText: function() {
+    this.content.splice(1, 1, this.content[0]);
+  }
+}
+```
+
+>  **NOTE**
+>  - To make the array data modification take effect, use the **splice** method to change array items.
+>
+>  - ECMAScript 6.0 syntax is not supported in HML.
+
+
+## Event Binding
+
+The callback bound to an event receives an event object parameter, which can be used to obtain the event information.
+
+
+```html
+<!-- xxx.hml -->
+<div>
+  <!-- Bind an event using @. -->
+  <div @click="clickfunc"></div>
+  <!-- Bind an event using on. -->
+  <div onclick="clickfunc"></div>
+  <!--  Bind an event using on.<sup>5+</sup> This statement is not recommended. -->
+  <div onclick="clickfunc"></div>
+  <!-- Bind an event callback for event bubbling.<sup>5+</sup>-->
+  <div on:click.bubble="clickfunc"></div>
+  <!-- on:{event} is equivalent to on:{event}.bubble.<sup>5+</sup> -->
+  <div on:click="clickfunc"></div>
+  <!-- Bind an event callback, but stop the event from bubbling upwards.<sup>5+</sup> -->
+  <div grab:click.bubble="clickfunc"></div>
+  <!-- grab:{event} is equivalent to grab:{event}.bubble.<sup>5+</sup> -->
+  <div grab:click="clickfunc"></div>
+</div>
+```
+
+
+```js
+// xxx.js
+export default {
+  data: {
+    obj: '',
+  },
+  clickfunc: function(e) {
+    this.obj = 'Hello World';
+    console.log(e);
+  },
+}
+```
+
+>  **NOTE**
+>
+>  Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**.
+
+**Example:**
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <text class="title">{{count}}</text>
+  <div class="box">
+    <input type="button" class="btn" value="increase" onclick="increase" />
+    <input type="button" class="btn" value="decrease" @click="decrease" />
+    <!-- Pass additional parameters. -->
+    <input type="button" class="btn" value="double" @click="multiply(2)" />
+    <input type="button" class="btn" value="decuple" @click="multiply(10)" />
+    <input type="button" class="btn" value="square" @click="multiply(count)" />
+  </div>
+</div>
+```
+
+
+```js
+// xxx.js 
+export default {
+  data: {
+    count: 0
+  },
+  increase() {
+    this.count++;
+  },
+  decrease() {
+    this.count--;
+  },
+  multiply(multiplier) {
+    this.count = multiplier * this.count;
+  }
+};
+```
+
+
+```css
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 454px;
+    height: 454px;
+}
+.title {
+    font-size: 30px;
+    text-align: center;
+    width: 200px;
+    height: 100px;
+}
+.box {
+    width: 454px;
+    height: 200px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.btn {
+    width: 200px;
+    border-radius: 0;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+```
+
+
+## Loop Rendering
+
+
+```html
+<!-- xxx.hml -->
+<div class="array-container">
+  <!-- div loop rendering -->
+  <!-- By default, $item indicates the element in the array, and $idx indicates the index of the element in the array. -->
+  <div for="{{array}}" tid="id" onclick="changeText">
+    <text>{{$idx}}.{{$item.name}}</text>
+  </div>
+  <!-- Define the name for an element variable. -->
+  <div for="{{value in array}}" tid="id" onclick="changeText">    
+    <text>{{$idx}}.{{value.name}}</text>
+  </div>
+  <!-- Define an element variable and its index name. -->
+  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
+    <text>{{index}}.{{value.name}}</text>
+  </div>
+</div>
+```
+
+
+```js
+// xxx.js
+export default {
+  data: {
+    array: [
+      {id: 1, name: 'jack', age: 18}, 
+      {id: 2, name: 'tony', age: 18},
+    ],
+  },
+  changeText: function() {
+    if (this.array[1].name === "tony"){
+      this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});
+    } else {
+      this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});
+    }
+  },
+}
+```
+
+The **tid** attribute accelerates the **for** loop and improves the re-rendering efficiency when data in a loop changes. The **tid** attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, **tid="id"** indicates that the **id** attribute of each element is its unique ID. The **for** loop supports the following statements:
+
+- for="array": **array** is an array object, whose element variable is **$item** by default.
+
+- for="v in array": **v** is a custom element variable, whose index is **$idx** by default.
+
+- for="(i, v) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through.
+
+>  **NOTE**
+>
+> - Each element in the array must have the data attribute specified by **tid**. Otherwise, an exception may occur.
+>
+> - The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields.
+>
+> - The **tid** field does not support expressions.
+
+
+## Conditional Rendering
+
+There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
+  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
+  <text if="{{show}}"> Hello-One </text>
+  <text elif="{{display}}"> Hello-Two </text>
+  <text else> Hello-World </text>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```js
+// xxx.js
+export default {
+  data: {
+    show: false,
+    display: true,
+  },
+  toggleShow: function() {
+    this.show = !this.show;
+  },
+  toggleDisplay: function() {
+    this.display = !this.display;
+  }
+}
+```
+
+In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is **false**, the display style will be **none**.
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
+  <text show="{{visible}}" > Hello World </text>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```js
+// xxx.js
+export default {
+  data: {
+    visible: false,
+  },
+  toggle: function() {
+    this.visible = !this.visible;
+  },
+}
+```
+
+>  **NOTE**
+>
+>  Do not use **for** and **if** attributes at the same time in an element.
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
new file mode 100644
index 0000000000000000000000000000000000000000..e9d71fc2ff680dfba5b95e7bae676854a1e68a28
--- /dev/null
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
@@ -0,0 +1,122 @@
+# JavaScript
+
+
+You can use a **.js** file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
+
+
+## Syntax
+
+The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax:
+
+1. let/const
+
+2. arrow functions
+
+3. class
+
+4. default value
+
+5. destructuring assignment
+
+6. destructuring binding pattern
+
+7. enhanced object initializer
+
+8. for-of
+
+9. rest parameter
+
+10. template strings
+
+- Module declaration
+  Import functionality modules.
+
+
+  ```
+  import router from '@system.router';
+  ```
+
+- Code reference
+  Import JavaScript code.
+
+
+  ```
+  import utils from '../../common/utils.js';
+  ```
+
+
+## Objects
+
+- Page objects
+    | Attribute   | Type             | Description                                      |
+    | ----- | --------------- | ---------------------------------------- |
+    | data  | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>|
+    | $refs | Object          | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
+
+
+## Obtaining a DOM Element
+
+Use **$refs** to obtain a DOM element.
+
+```html
+<!-- index.hml -->
+<div class="container">
+  <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
+</div>
+```
+
+
+   ```js
+   // index.js
+   export default {
+     data: {
+       images: [
+         { src: '/common/frame1.png' },
+         { src: '/common/frame2.png' },
+         { src: '/common/frame3.png' },
+       ],
+     },
+     handleClick() {
+       const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
+       const state = animator.getState();
+       if (state === 'paused') {
+         animator.resume();
+       } else if (state === 'stopped') {
+         animator.start();
+       } else {
+         animator.pause();
+       }
+     },
+   };
+   ```
+
+
+## Lifecycle APIs
+
+- Page lifecycle APIs
+    | Name    | Type      | Parameter  | Return Value | Description    | Triggered When               |
+    | --------- | -------- | ---- | ---- | ------ | ------------------- |
+    | onInit    | Function | N/A   | N/A   | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
+    | onReady   | Function | N/A   | N/A   | Listens for page creation.| A page is created. This API is called only once in the page lifecycle.   |
+    | onShow    | Function | N/A   | N/A   | Listens for page display.  | The page is displayed.           |
+    | onHide    | Function | N/A   | N/A   | Listens for page disappearance.  | The page disappears.           |
+    | onDestroy | Function | N/A   | N/A   | Listens for page destruction.  | The page is destroyed.           |
+
+    The lifecycle APIs of page A are called in the following sequence:
+  - Open page A: onInit() -> onReady() -> onShow()
+
+  - Open page B on page A: onHide() -> onDestroy()
+
+  - Go back to page A from page B: onInit() -> onReady() -> onShow()
+
+  - Exit page A: onHide() -> onDestroy()
+
+  - Hide page A: onHide()
+
+  - Show background page A on the foreground: onShow()
+
+- Application lifecycle APIs
+    | Name   | Type      | Parameter  | Return Value | Description  | Triggered When     |
+    | --------- | -------- | ---- | ---- | ---- | --------- |
+    | onCreate  | Function | N/A   | N/A   | Listens for application creation.| The application is created.|
+    | onDestroy | Function | N/A   | N/A   | Listens for application exit.| The application exits.|
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif
new file mode 100644
index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif differ
diff --git a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png
new file mode 100644
index 0000000000000000000000000000000000000000..589059ee8bf53b736cdadfc79ee44bbfd9d3db02
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9d63dc6b6ff97b2b0ff3ae4599b787db8dd096f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
index 2fe773177813164169dc35eddeba176a95fa4f89..6cf611c47dfd4d3d08b3124ec50e38b0ca1a4da7 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
@@ -23,9 +23,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.|
+| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.<br>**NOTE**<br>If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.|
 | min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
-| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
+| max | number | No| Maximum value of the current data segment.<br>Default value: **100**<br>**NOTE**<br>If the value of **max** is less than that of **min**, the default values **0** and **100** are used.<br>The values of **max** and **min** can be negative numbers.|
 
 ## Attributes
 
@@ -36,8 +36,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeWidth | Length | Stroke width of the chart.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | Length | Stroke width of the chart.<br>Default value: **4**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot be in percentage.|
 
 ## ColorStop
 
@@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name     | Type            | Description                                                        |
 | --------- | -------------------- | ------------------------------------------------------------ |
-| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.|
+| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0.|
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 575b24c6ae39a82fdc9793301ffd581da96d1c59..d23a8649fc8a002b051036012570632cab47c6ad 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -10,7 +10,7 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
 
 ## APIs
 
-CanvasRenderingContext2D(setting: RenderingContextSetting)
+CanvasRenderingContext2D(settings?: RenderingContextSettings)
 
 Since API version 9, this API is supported in ArkTS widgets.
 
@@ -18,7 +18,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name    | Type                                    | Mandatory  | Description                                    |
 | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes   | See [RenderingContextSettings](#renderingcontextsettings).|
+| settings | [RenderingContextSettings](#renderingcontextsettings) | No   | See [RenderingContextSettings](#renderingcontextsettings).|
 
 
 ### RenderingContextSettings
@@ -57,6 +57,8 @@ Since API version 9, this API is supported in ArkTS widgets.
 | [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets. |
 | [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets. |
 | [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets. |
+| [height](#height)                        | number                                   | Component height.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [width](#width)                          | number                                   | Component width.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 > **NOTE**
 >
@@ -652,6 +654,68 @@ struct ImageSmoothingEnabled {
 ![en-us_image_0000001211898472](figures/en-us_image_0000001211898472.png)
 
 
+### height
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct HeightExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width(300)
+        .height(300)
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          let h = this.context.height
+          let w = this.context.width
+          this.context.fillRect(0, 0, 300, h/2)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_canvas_height](figures/en-us_image_canvas_height.png)
+
+
+### width
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct WidthExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width(300)
+        .height(300)
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          let h = this.context.height
+          let w = this.context.width
+          this.context.fillRect(0, 0, w/2, 300)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_canvas_width](figures/en-us_image_canvas_width.png)
+
+
 ## Methods
 
 
diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
index 3a1ef0bfa62a2081886367baef187b963490d8bb..b01457d9d6e564b7998492d88cd18bf5d8bcd293 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true** |
 | controlButton | [ButtonStyle](#buttonstyle)                            | Attributes of the sidebar control button.|
 | showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**|
-| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>When set, the width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the width of the sidebar child component takes precedence.|
+| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>The width of the sidebar, whether it is specified or kept at the default, takes precedence over that of the sidebar child components.|
 | minSideBarWidth | number \| Length<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.|
 | maxSideBarWidth | number \| Length<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.|
 | autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).|
diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
index 6819991d4c66ba1a96ca51dc4d56e7d900d24c0f..d5df61c6316ba122bb8d4bcb05032828310b0e7a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -45,7 +45,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | cachedCount<sup>8+</sup>    | number                                   | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).|
 | disableSwipe<sup>8+</sup>   | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**                             |
 | curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
-| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
+| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
 | displayCount<sup>8+</sup>   | number \| string                                             | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount - 1)] is evenly distributed among them on the main axis.|
 | effectMode<sup>8+</sup>     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)  | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
 
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 4c164070999d363b634dc618fa6660b33fbfe1ba..6b28fef85c3e3ea991aa9c99881513cd3d88061a 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -10,7 +10,7 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o
 
 ## APIs
 
-OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
+OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings)
 
 Since API version 9, this API is supported in ArkTS widgets.
 
@@ -20,7 +20,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | ------- | ------------------------------------------------------------ | ---- | ------------------------------------ |
 | width   | number                                                       | Yes  | Width of the offscreen canvas.                      |
 | height  | number                                                       | Yes  | Height of the offscreen canvas.                      |
-| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes  | See RenderingContextSettings.|
+| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No   | See RenderingContextSettings.|
 
 
 ## Attributes
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index 4d907d32c2d3545fb6b0afb10addabbf2053eb90..f0858c17f6f7d95d1d96757c3cadb3ad1fdc140b 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -14,6 +14,7 @@
 | flexGrow   | number                                      | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | flexShrink | number                                      | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| layoutWeight   | number \| string                                   | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index 614faeb3055349f54006933512feb2c4bd54f520..208a439b20a26388f719f00fc0690cd292071098 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -30,7 +30,7 @@ You can bind a popup to a component, specifying its content, interaction logic,
 
 | Name                          | Type                                      | Mandatory  | Description                                      |
 | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| builder                      | [CustomBuilder](ts-types.md#custombuilder8) | Yes   | Popup builder.                             |
+| builder                      | [CustomBuilder](ts-types.md#custombuilder8) | Yes   | Popup builder.<br>**NOTE**<br>The **popup** attribute is a universal attribute. A custom popup does not support display of another popup. The **position** attribute cannot be used for the first-layer container under the builder. If the **position** attribute is used, the popup will not be displayed.                             |
 | placement                    | [Placement](ts-appendix-enums.md#placement8) | No   | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**|
 | popupColor                   | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the popup.                                |
 | enableArrow                  | boolean                                  | No   | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
@@ -100,7 +100,7 @@ struct PopupExample {
         .bindPopup(this.customPopup, {
           builder: this.popupBuilder,
           placement: Placement.Top,
-          maskColor: '0x33000000',
+          mask: {color:'0x33000000'},
           popupColor: Color.Yellow,
           enableArrow: true,
           showInSubWindow: false,
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index ef361829897dcbf29396cb14d654051bea2f41c6..8d42dea9981ac068c5559df80c225e21794b750a 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -18,7 +18,6 @@ The size attributes set the width, height, and margin of a component.
 | padding        | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | margin         | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
-| layoutWeight   | number \| string                                   | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
 
 
 ## Example
diff --git a/en/application-dev/reference/errorcodes/errorcode-data-rdb.md b/en/application-dev/reference/errorcodes/errorcode-data-rdb.md
index 7da8eb85ea4d4c94d68f8057900a204743afbf5b..6488b3551ac06f3aa12af58445912e1128651fee 100644
--- a/en/application-dev/reference/errorcodes/errorcode-data-rdb.md
+++ b/en/application-dev/reference/errorcodes/errorcode-data-rdb.md
@@ -4,11 +4,29 @@
 >
 > This topic describes only module-specific error codes. For details about universal error codes, see [Universal Error Codes](errorcode-universal.md).
 
+##  14800000 Internal Error
+
+**Error Message**
+
+Inner error.
+
+**Description**
+
+An error occurs at the underlying database.
+
+**Possible Causes**
+
+Invalid SQL statement is passed in.
+
+**Solution**
+
+Determine the cause of the error based on the log information.
+
 ## 14800010 Invalid RDB Name
 
 **Error Message**
 
-Invalid database name.
+Failed to open or delete database by invalid database path.
 
 **Description**
 
@@ -16,17 +34,17 @@ The RDB store name is invalid.
 
 **Possible Causes**
 
-The RDB store name is empty or exceeds 1024 bytes.
+The RDB store path is invalid.
 
 **Solution**
 
-Check that the RDB store name is not empty and does not exceed 1024 bytes.
+Check the RDB store path.
 
 ## 14800011 Database File Corrupted
 
 **Error Message**
 
-Database corrupted.
+Failed to open database by database corrupted.
 
 **Description**
 
diff --git a/en/application-dev/reference/errorcodes/errorcode-zlib.md b/en/application-dev/reference/errorcodes/errorcode-zlib.md
index 47d5b3c6604b7bc2361d4355e829527dc5a15b9c..9e82ed0167d9868d1d5b7b5a7fdd39171733e703 100644
--- a/en/application-dev/reference/errorcodes/errorcode-zlib.md
+++ b/en/application-dev/reference/errorcodes/errorcode-zlib.md
@@ -21,7 +21,8 @@ When the **compress** API is called, the file to compress does not exist. When t
 **Solution**
 
 1. Make sure the source file exists.
-2. Make sure the path of the source file exists and the path is the correct sandbox path.
+2. Ensure that the source file is in ZIP format.
+3. Make sure the path of the source file exists and the path is the correct sandbox path.
 
 ## 900002 Invalid Destination File
 
diff --git a/en/application-dev/reference/js-service-widget-ui/Readme-EN.md b/en/application-dev/reference/js-service-widget-ui/Readme-EN.md
index 58b90a13761930910434b5d4bc95252119a3fced..9a487432df38c92f05714374d52eea2228ea8d9d 100644
--- a/en/application-dev/reference/js-service-widget-ui/Readme-EN.md
+++ b/en/application-dev/reference/js-service-widget-ui/Readme-EN.md
@@ -8,33 +8,32 @@
   - [Multi-Language Capability](js-service-widget-multiple-languages.md)
   - [Version Compatibility Adaptation](js-service-widget-version-compatibility.md)
   - [Theme Configuration](js-service-widget-theme.md)
-- Components
-  - Universal
-    - [Universal Attributes](js-service-widget-common-attributes.md)
-    - [Universal Styles](js-service-widget-common-styles.md)
-    - [Universal Events](js-service-widget-common-events.md)
-    - [Gradient Styles](js-service-widget-common-gradient.md)
-    - [Media Query](js-service-widget-common-mediaquery.md)
-    - [Custom Font Styles](js-service-widget-common-customizing-font.md)
-    - [Accessibility](js-service-widget-common-accessibility.md)
-    - [Atomic Layout](js-service-widget-common-atomic-layout.md)
-  - Container Components
-    - [badge](js-service-widget-container-badge.md)
-    - [div](js-service-widget-container-div.md)
-    - [list](js-service-widget-container-list.md)
-    - [list-item](js-service-widget-container-list-item.md)
-    - [stack](js-service-widget-container-stack.md)
-    - [swiper](js-service-widget-container-swiper.md)
-  - Basic Components
-    - [button](js-service-widget-basic-button.md)
-    - [calendar](js-service-widget-basic-calendar.md)
-    - [chart](js-service-widget-basic-chart.md)
-    - [clock](js-service-widget-basic-clock.md)
-    - [divider](js-service-widget-basic-divider.md)
-    - [image](js-service-widget-basic-image.md)
-    - [input](js-service-widget-basic-input.md)
-    - [progress](js-service-widget-basic-progress.md)
-    - [span](js-service-widget-basic-span.md)
-    - [text](js-service-widget-basic-text.md)
+- Universal Component Information
+  - [Universal Attributes](js-service-widget-common-attributes.md)
+  - [Universal Styles](js-service-widget-common-styles.md)
+  - [Universal Events](js-service-widget-common-events.md)
+  - [Gradient Styles](js-service-widget-common-gradient.md)
+  - [Media Query](js-service-widget-common-mediaquery.md)
+  - [Custom Font Styles](js-service-widget-common-customizing-font.md)
+  - [Accessibility](js-service-widget-common-accessibility.md)
+  - [Atomic Layout](js-service-widget-common-atomic-layout.md)
+- Container Components
+  - [badge](js-service-widget-container-badge.md)
+  - [div](js-service-widget-container-div.md)
+  - [list](js-service-widget-container-list.md)
+  - [list-item](js-service-widget-container-list-item.md)
+  - [stack](js-service-widget-container-stack.md)
+  - [swiper](js-service-widget-container-swiper.md)
+- Basic Components
+  - [button](js-service-widget-basic-button.md)
+  - [calendar](js-service-widget-basic-calendar.md)
+  - [chart](js-service-widget-basic-chart.md)
+  - [clock](js-service-widget-basic-clock.md)
+  - [divider](js-service-widget-basic-divider.md)
+  - [image](js-service-widget-basic-image.md)
+  - [input](js-service-widget-basic-input.md)
+  - [progress](js-service-widget-basic-progress.md)
+  - [span](js-service-widget-basic-span.md)
+  - [text](js-service-widget-basic-text.md)
 - [Custom Component Basic Usage](js-service-widget-custom-basic-usage.md)
 - [Data Types](js-service-widget-appendix-types.md)
diff --git a/en/application-dev/ui/figures/layout-element-omposition.png b/en/application-dev/ui/figures/layout-element-omposition.png
index 03b69e006b2b8c9509056a8de65b4e2b0b37d834..b4bc30b110f51e8ceea3e47bbf279a007d96a5b3 100644
Binary files a/en/application-dev/ui/figures/layout-element-omposition.png and b/en/application-dev/ui/figures/layout-element-omposition.png differ
diff --git a/en/readme/arkui.md b/en/readme/arkui.md
index b4c8f0ef37ae2c3d86d30eb68284f53f73ca1472..9959f7510e5ba437d0e084e887c26d5d38b6fb36 100644
--- a/en/readme/arkui.md
+++ b/en/readme/arkui.md
@@ -2,11 +2,11 @@
 
 ## Introduction
 
-ArkUI is a UI development framework that provides what you'll need to develop application UIs in OpenHarmony, including UI components, animations, drawing, interaction events, and JavaScript API extension mechanisms. ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short).
+ArkUI is a UI development framework that provides what you'll need to develop application UIs in OpenHarmony, including UI components, animations, drawing, interaction events, and JavaScript API extension mechanisms. ArkUI comes with two development paradigms: ArkTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short).
 
 **Framework Structure**
 
-![en-us_image_0000001267647869](../application-dev/ui/figures/en-us_image_0000001267647869.png)
+![en-us_image_0000001183709904](../application-dev/ui/figures/arkui-framework.png)
 
 As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.
 
diff --git a/zh-cn/application-dev/application-models/serviceextensionability.md b/zh-cn/application-dev/application-models/serviceextensionability.md
index 7affeef41c4c19947fd69e93711125022a8cbbb3..3a9cf6faa1e55e54dc4891b7f4dd5f50b06a37f0 100644
--- a/zh-cn/application-dev/application-models/serviceextensionability.md
+++ b/zh-cn/application-dev/application-models/serviceextensionability.md
@@ -449,9 +449,9 @@ ServiceExtensionAbility服务组件在[onConnect()](../reference/apis/js-apis-ap
   }
   ```
 
-## 相关示例
+## 相关实例
 
-针对ServiceExtensionAbility开发，有以下相关示例可供参考：
+针对ServiceExtensionAbility开发，有以下相关实例可供参考：
 
 - [`AbilityConnectServiceExtension`：Ability与ServiceExtensionAbility通信（ArkTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/IDL/AbilityConnectServiceExtension)
 - [`StageModel`：Stage模型（ArkTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/ApplicationModels/StageModel)
diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
index a68af3880b62d79e6323b9a30588d2351cce6ee3..9d6cb5358ac7dc9bfe1d4616d1db9783e9d3644c 100644
--- a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
+++ b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
@@ -427,7 +427,7 @@ struct GridRowSample3 {
       gutter: {x: {sm: 8, md: 16, lg: 24}, y: {sm: 8, md: 16, lg: 24}}}) {
       ForEach(this.bgColors, (bgColor)=>{
         GridCol({span: {sm: 2, md: 2, lg: 2}}) {
-          Row().backgroundColor(bgColor).height(30)
+          Row().backgroundColor(bgColor).height(30).width('100%')
         }
       })
     }
@@ -460,7 +460,7 @@ struct GridRowSample4 {
         GridCol({span:{xs: 12, sm: 12, md: 12, lg:12}}) {
           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
             Text("padding").fontSize(24).fontWeight(FontWeight.Medium)
-          }.backgroundColor('#19000000')
+          }.backgroundColor('#19000000').width('100%')
         }
       }
       .height(50)
@@ -483,7 +483,7 @@ struct GridRowSample4 {
         GridCol({span:{xs: 12, sm: 12, md: 12, lg:12}}) {
           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
             Text("margin").fontSize(24).fontWeight(FontWeight.Medium)
-          }.backgroundColor('#19000000')
+          }.backgroundColor('#19000000').width('100%')
         }
       }
       .height(50)
@@ -542,7 +542,7 @@ struct GridRowSample5 {
             Text('' + item.index).fontSize(24)
           }
           .justifyContent(FlexAlign.Center)
-          .backgroundColor(item.color).height(30)
+          .backgroundColor(item.color).height(30).width('100%')
         }
       })
     }
@@ -584,7 +584,7 @@ struct GridRowSample6 {
             Text('' + item.index).fontSize(24)
           }
           .justifyContent(FlexAlign.Center)
-          .backgroundColor(item.color).height(30)
+          .backgroundColor(item.color).height(30).width('100%')
         }
       })
     }
@@ -626,7 +626,7 @@ struct GridRowSample7 {
             Text('' + item.index).fontSize(24)
           }
           .justifyContent(FlexAlign.Center)
-          .backgroundColor(item.color).height(30)
+          .backgroundColor(item.color).height(30).width('100%')
         }
       })
     }
@@ -670,7 +670,7 @@ struct GridRowSample8 {
             Text('' + item.index).fontSize(24)
           }
           .justifyContent(FlexAlign.Center)
-          .backgroundColor(item.color).height(30)
+          .backgroundColor(item.color).height(30).width('100%')
         }
       })
     }
@@ -713,7 +713,7 @@ struct GridRowSample9 {
                 Text('' + item.index).fontSize(24)
               }
               .justifyContent(FlexAlign.Center)
-              .backgroundColor(item.color).height(30)
+              .backgroundColor(item.color).height(30).width('100%')
             }
           })
         }
diff --git a/zh-cn/application-dev/reference/apis/js-apis-app-ability-wantAgent.md b/zh-cn/application-dev/reference/apis/js-apis-app-ability-wantAgent.md
index 73551d324aa13221207c1e8148e634cf24d9791b..d25a277566bffa819c0e2f144f9c74eb9f7dab7f 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-app-ability-wantAgent.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-app-ability-wantAgent.md
@@ -24,7 +24,7 @@ getWantAgent(info: WantAgentInfo, callback: AsyncCallback\<WantAgent\>): void
 
 | 参数名     | 类型                       | 必填 | 说明                    |
 | -------- | -------------------------- | ---- | ----------------------- |
-| info     | WantAgentInfo              | 是   | WantAgent信息。           |
+| info     | [WantAgentInfo](js-apis-inner-wantAgent-wantAgentInfo.md)              | 是   | WantAgent信息。           |
 | callback | AsyncCallback\<WantAgent\> | 是   | 创建WantAgent的回调方法。 |
 
 **错误码：**
@@ -596,7 +596,7 @@ getWant(agent: WantAgent): Promise\<Want\>
 
 | 类型                                                        | 说明                                                         |
 | ----------------------------------------------------------- | ------------------------------------------------------------ |
-| Promise\<Want\> | 以Promise形式返回获取WantAgent对象的want。 |
+| Promise\<[Want](js-apis-app-ability-want.md)\> | 以Promise形式返回获取WantAgent对象的want。 |
 
 **错误码：**
 
@@ -841,7 +841,7 @@ trigger(agent: WantAgent, triggerInfo: TriggerInfo, callback?: AsyncCallback\<Co
 | 参数名        | 类型                          | 必填 | 说明                            |
 | ----------- | ----------------------------- | ---- | ------------------------------- |
 | agent       | WantAgent                     | 是   | WantAgent对象。                   |
-| triggerInfo | TriggerInfo                   | 是   | TriggerInfo对象。                 |
+| triggerInfo | [TriggerInfo](js-apis-inner-wantAgent-triggerInfo.md)                   | 是   | TriggerInfo对象。                 |
 | callback    | AsyncCallback\<[CompleteData](#completedata)\> | 否   | 主动激发WantAgent实例的回调方法。 |
 
 **示例：**
diff --git a/zh-cn/application-dev/reference/apis/js-apis-file-fs.md b/zh-cn/application-dev/reference/apis/js-apis-file-fs.md
index c307849df40e84c09340334b44a3ff6f120e1409..d539c580bf88445039be55b3f5fe981e465c65f1 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-file-fs.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-file-fs.md
@@ -251,7 +251,7 @@ accessSync(path: string): boolean
 
 ## fs.close
 
-close(file: File|number): Promise&lt;void&gt;
+close(file: number|File): Promise&lt;void&gt;
 
 关闭文件，使用Promise异步回调。
 
@@ -261,7 +261,7 @@ close(file: File|number): Promise&lt;void&gt;
 
   | 参数名  | 类型     | 必填   | 说明           |
   | ---- | ------ | ---- | ------------ |
-  | file   | [File](#file)\|number | 是    | 已打开的File对象或已打开的文件描述符fd。 |
+  | file   | number\|[File](#file) | 是    | 已打开的File对象或已打开的文件描述符fd。 |
 
 **返回值：**
 
@@ -288,7 +288,7 @@ close(file: File|number): Promise&lt;void&gt;
 
 ## fs.close
 
-close(file: File|number, callback: AsyncCallback&lt;void&gt;): void
+close(file: number|File, callback: AsyncCallback&lt;void&gt;): void
 
 关闭文件，使用callback异步回调。
 
@@ -298,7 +298,7 @@ close(file: File|number, callback: AsyncCallback&lt;void&gt;): void
 
   | 参数名      | 类型                        | 必填   | 说明           |
   | -------- | ------------------------- | ---- | ------------ |
-  | file       | [File](#file)\|number                  | 是    | 已打开的File对象或已打开的文件描述符fd。 |
+  | file       | number\|[File](#file)                  | 是    | 已打开的File对象或已打开的文件描述符fd。 |
   | callback | AsyncCallback&lt;void&gt; | 是    | 异步关闭文件之后的回调。 |
 
 **错误码：**
@@ -321,7 +321,7 @@ close(file: File|number, callback: AsyncCallback&lt;void&gt;): void
 
 ## fs.closeSync
 
-closeSync(file: File|number): void
+closeSync(file: number|File): void
 
 以同步方法关闭文件。
 
@@ -331,7 +331,7 @@ closeSync(file: File|number): void
 
   | 参数名  | 类型     | 必填   | 说明           |
   | ---- | ------ | ---- | ------------ |
-  | file   | [File](#file)\|number | 是    | 已打开的File对象或已打开的文件描述符fd。 |
+  | file   | number\|[File](#file) | 是    | 已打开的File对象或已打开的文件描述符fd。 |
 
 **错误码：**
 
@@ -1811,6 +1811,8 @@ listFile(path: string, options?: {
 
 列出文件夹下所有文件名，支持递归列出所有文件名（包含子目录下），支持文件过滤，使用Callback异步回调。
 
+**系统能力**：SystemCapability.FileManagement.File.FileIO
+
 **参数：**
 
   | 参数名    | 类型     | 必填   | 说明                          |
@@ -1866,6 +1868,8 @@ listFileSync(path: string, options?: {
 
 以同步方式列出文件夹下所有文件名，支持递归列出所有文件名（包含子目录下），支持文件过滤。
 
+**系统能力**：SystemCapability.FileManagement.File.FileIO
+
 **参数：**
 
   | 参数名    | 类型     | 必填   | 说明                          |
@@ -1986,7 +1990,7 @@ moveFile(src: string, dest: string, mode?: number, callback: AsyncCallback\<void
 
 ## fs.moveFileSync
 
-moveFile(src: string, dest: string, mode?: number): void
+moveFileSync(src: string, dest: string, mode?: number): void
 
 以同步方式移动文件。
 
@@ -2933,7 +2937,7 @@ lock(exclusive?: boolean): Promise\<void>
 **示例：**
 
   ```js
-  let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+  let file = fs.openSync(pathDir + "/test.txt", fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
   file.lock(true).then(() => {
     console.log("lock file successful");
   }).catch((err) => {
@@ -2963,7 +2967,7 @@ lock(exclusive?: boolean, callback: AsyncCallback\<void>): void
 **示例：**
 
   ```js
-  let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+  let file = fs.openSync(pathDir + "/test.txt", fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
   file.lock(true, (err) => {
     if (err) {
       console.info("lock file failed with error message: " + err.message + ", error code: " + err.code);
@@ -2994,7 +2998,7 @@ tryLock(exclusive?: boolean): void
 **示例：**
 
   ```js
-  let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+  let file = fs.openSync(pathDir + "/test.txt", fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
   file.tryLock(true);
   console.log("lock file successful");
   ```
@@ -3014,7 +3018,7 @@ unlock(): void
 **示例：**
 
   ```js
-  let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+  let file = fs.openSync(pathDir + "/test.txt", fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
   file.tryLock(true);
   file.unlock();
   console.log("unlock file successful");
diff --git a/zh-cn/application-dev/reference/apis/js-apis-fileShare.md b/zh-cn/application-dev/reference/apis/js-apis-fileShare.md
index fb37ed4dc22dd0c26ff619e228e2f3cf658d5d96..bc8100dd776a50089715f6b84515db09d87b250b 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-fileShare.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-fileShare.md
@@ -14,7 +14,7 @@ import fileShare from '@ohos.fileshare';
 
 ## fileShare.grantUriPermission
 
-grantUriPermission(uri: string, bundleName: string, mode: number, callback: AsyncCallback&lt;void&gt;): void
+grantUriPermission(uri: string, bundleName: string, flag: wantConstant.Flags, callback: AsyncCallback&lt;void&gt;): void
 
 对公共目录文件URI进行授权操作，使用callback异步回调。  
 
@@ -30,7 +30,7 @@ grantUriPermission(uri: string, bundleName: string, mode: number, callback: Asyn
 | ------ | ------ | ---- | -------------------------- |
 | uri   | string | 是   | 公共目录文件URI |
 | bundleName   | string | 是   | 分享目标的包名 |
-| mode   | number | 是   | 授权的权限，参考[wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags)<br/>wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION：读授权<br/>wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION：写授权|
+| flag   | wantConstant.Flags | 是   | 授权的权限，参考[wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags)<br/>wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION：读授权<br/>wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION：写授权|
  | callback | AsyncCallback&lt;void&gt;  | 是    | 异步授权之后的回调                             |
 
 **错误码：**
@@ -67,7 +67,7 @@ try {
 
 ## fileShare.grantUriPermission
 
-grantUriPermission(uri: string, bundleName: string, mode: number): Promise&lt;void&gt;
+grantUriPermission(uri: string, bundleName: string, flag: wantConstant.Flags): Promise&lt;void&gt;
 
 将公共目录文件URI进行授权操作，使用Promise异步回调。  
 
@@ -83,7 +83,7 @@ grantUriPermission(uri: string, bundleName: string, mode: number): Promise&lt;vo
 | ------ | ------ | ---- | -------------------------- |
 | uri   | string | 是   | 公共目录文件URI |
 | bundleName   | string | 是   | 分享目标的包名 |
-| mode   | number | 是   | 授权的权限，参考[wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags)<br/>wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION：读授权<br/>wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION：写授权|
+| flag   | wantConstant.Flags | 是   | 授权的权限，参考[wantConstant.Flags](js-apis-app-ability-wantConstant.md#wantconstantflags)<br/>wantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION：读授权<br/>wantConstant.Flags.FLAG_AUTH_WRITE_URI_PERMISSION：写授权|
 
 **返回值：**
 
diff --git a/zh-cn/application-dev/reference/apis/js-apis-inner-wantAgent-wantAgentInfo.md b/zh-cn/application-dev/reference/apis/js-apis-inner-wantAgent-wantAgentInfo.md
index 6adfe0d53e74a2b569efa6ecf6c42fa82a575bd2..08ac26b32b68f326c64dbafda89a80d1fd53b702 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-inner-wantAgent-wantAgentInfo.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-inner-wantAgent-wantAgentInfo.md
@@ -16,7 +16,7 @@ import wantAgent from '@ohos.app.ability.wantAgent';
 
 | 名称           | 类型                            | 必填 | 说明                   |
 | -------------- | ------------------------------- | ---- | ---------------------- |
-| wants          | Array\<Want\>                   | 是   | 将被执行的动作列表。     |
+| wants          | Array\<[Want](js-apis-inner-ability-want.md)\>                   | 是   | 将被执行的动作列表。     |
 | operationType  | [wantAgent.OperationType](js-apis-app-ability-wantAgent.md#operationtype)         | 是   | 动作类型。               |
 | requestCode    | number                          | 是   | 使用者定义的一个私有值。 |
 | wantAgentFlags | Array<[wantAgent.WantAgentFlags](js-apis-app-ability-wantAgent.md#wantagentflags)> | 否   | 动作执行属性。           |
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-battery.md b/zh-cn/application-dev/reference/apis/js-apis-system-battery.md
index 0c102a55bb2e4b90ed8caeed8866f44fc86a5f6f..6949824c67c14b7e97e354390f9e7fa3e5eb91a6 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-system-battery.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-battery.md
@@ -25,7 +25,7 @@ getStatus(options?: GetStatusOptions): void;
 
 **参数：**
 
-| 名称 | 类型 | 必填 | 说明 |
+| 参数名 | 类型 | 必填 | 说明 |
 | -------- | -------- | -------- | -------- |
 | options | [GetStatusOptions](#getstatusoptions) | 否 | 包含接口调用结果的对象。可选，默认为空。 |
 
@@ -48,7 +48,7 @@ battery.getStatus({
 
 **系统能力：** SystemCapability.PowerManager.BatteryManager.Core
 
-| 名称   | 类型                                                | 必填 | 说明                                                         |
+| 参数名   | 类型                                                | 必填 | 说明                                                         |
 | -------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | success  | (data: [BatteryResponse](#batteryresponse)) => void | 否   | 接口调用成功的回调函数，data为[BatteryResponse](#batteryresponse)类型的返回值。 |
 | fail     | (data: string, code: number) => void                | 否   | 接口调用失败的回调函数。data为错误信息，code为错误码。       |
@@ -60,7 +60,7 @@ battery.getStatus({
 
 **系统能力：** SystemCapability.PowerManager.BatteryManager.Core
 
-| 名称 | 类型 | 可读 | 可写 | 说明 |
+| 参数名 | 类型 | 可读 | 可写 | 说明 |
 | -------- | -------- | -------- | -------- | -------- |
 | charging | boolean | 是 | 否 | 当前电池是否在充电中。 |
 | level | number | 是 | 否 | 当前电池的电量，取值范围：0.00&nbsp;-&nbsp;1.00&nbsp;。 |
diff --git a/zh-cn/application-dev/reference/apis/js-apis-usbManager.md b/zh-cn/application-dev/reference/apis/js-apis-usbManager.md
index 4d4b694f7ded0314d274209755474931d66fa8a8..f9a884db278e3706ceb42e17f9426e2ff2391429 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-usbManager.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-usbManager.md
@@ -152,7 +152,7 @@ hasRight(deviceName: string): boolean
 **示例：**
 
 ```js
-let devicesName="1-1";
+let devicesName = "1-1";
 let bool = usb.hasRight(devicesName);
 console.log(`${bool}`);
 ```
@@ -180,7 +180,7 @@ requestRight(deviceName: string): Promise&lt;boolean&gt;
 **示例：**
 
 ```js
-let devicesName="1-1";
+let devicesName = "1-1";
 usb.requestRight(devicesName).then((ret) => {
   console.log(`requestRight = ${ret}`);
 });
@@ -209,7 +209,7 @@ removeRight(deviceName: string): boolean
 **示例：**
 
 ```js
-let devicesName= "1-1";
+let devicesName = "1-1";
 if (usb.removeRight(devicesName)) {
   console.log(`Succeed in removing right`);
 }
@@ -277,6 +277,16 @@ claimInterface(pipe: USBDevicePipe, iface: USBInterface, force ?: boolean): numb
 **示例：**
 
 ```js
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+let device = devicesList[0];
+usb.requestRight(device.name);
+let devicepipe = usb.connectDevice(device);
+let interfaces = device.configs[0].interfaces[0];
 let ret = usb.claimInterface(devicepipe, interfaces);
 console.log(`claimInterface = ${ret}`);
 ```
@@ -307,7 +317,18 @@ releaseInterface(pipe: USBDevicePipe, iface: USBInterface): number
 **示例：**
 
 ```js
-let ret = usb.releaseInterface(devicepipe, interfaces);
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+let device = devicesList[0];
+usb.requestRight(device.name);
+let devicepipe = usb.connectDevice(device);
+let interfaces = device.configs[0].interfaces[0];
+let ret = usb.claimInterface(devicepipe, interfaces);
+ret = usb.releaseInterface(devicepipe, interfaces);
 console.log(`releaseInterface = ${ret}`);
 ```
 
@@ -337,6 +358,16 @@ setConfiguration(pipe: USBDevicePipe, config: USBConfiguration): number
 **示例：**
 
 ```js
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+let device = devicesList[0];
+usb.requestRight(device.name);
+let devicepipe = usb.connectDevice(device);
+let config = device.configs[0];
 let ret = usb.setConfiguration(devicepipe, config);
 console.log(`setConfiguration = ${ret}`);
 ```
@@ -367,7 +398,18 @@ setInterface(pipe: USBDevicePipe, iface: USBInterface): number
 **示例：**
 
 ```js
-let ret = usb.setInterface(devicepipe, interfaces);
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+let device = devicesList[0];
+usb.requestRight(device.name);
+let devicepipe = usb.connectDevice(device);
+let interfaces = device.configs[0].interfaces[0];
+let ret = usb.claimInterface(devicepipe, interfaces);
+ret = usb.setInterface(devicepipe, interfaces);
 console.log(`setInterface = ${ret}`);
 ```
 
@@ -396,6 +438,14 @@ getRawDescriptor(pipe: USBDevicePipe): Uint8Array
 **示例：**
 
 ```js
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+usb.requestRight(devicesList[0].name);
+let devicepipe = usb.connectDevice(devicesList[0]);
 let ret = usb.getRawDescriptor(devicepipe);
 ```
 
@@ -424,6 +474,14 @@ getFileDescriptor(pipe: USBDevicePipe): number
 **示例：**
 
 ```js
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+usb.requestRight(devicesList[0].name);
+let devicepipe = usb.connectDevice(devicesList[0]);
 let ret = usb.getFileDescriptor(devicepipe);
 ```
 
@@ -462,6 +520,15 @@ let param = {
   index: 0,
   data: null
 };
+
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+usb.requestRight(devicesList[0].name);
+let devicepipe = usb.connectDevice(devicesList[0]);
 usb.controlTransfer(devicepipe, param).then((ret) => {
  console.log(`controlTransfer = ${ret}`);
 })
@@ -498,8 +565,22 @@ bulkTransfer(pipe: USBDevicePipe, endpoint: USBEndpoint, buffer: Uint8Array, tim
 //usb.getDevices 接口返回数据集合，取其中一个设备对象，并获取权限 。
 //把获取到的设备对象作为参数传入usb.connectDevice;当usb.connectDevice接口成功返回之后；
 //才可以调用第三个接口usb.claimInterface.当usb.claimInterface 调用成功以后,再调用该接口。
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+let device = devicesList[0];
+usb.requestRight(device.name);
+
+let devicepipe = usb.connectDevice(device);
+let interfaces = device.configs[0].interfaces[0];
+let endpoint = device.configs[0].interfaces[0].endpoints[0];
+let ret = usb.claimInterface(devicepipe, interfaces);
+let buffer =  new Uint8Array(128);
 usb.bulkTransfer(devicepipe, endpoint, buffer).then((ret) => {
- console.log(`bulkTransfer = ${ret}`);
+  console.log(`bulkTransfer = ${ret}`);
 });
 ```
 
@@ -528,6 +609,14 @@ closePipe(pipe: USBDevicePipe): number
 **示例：**
 
 ```js
+let devicesList = usb.getDevices();
+if (devicesList.length == 0) {
+  console.log(`device list is empty`);
+  return;
+}
+
+usb.requestRight(devicesList[0].name);
+let devicepipe = usb.connectDevice(devicesList[0]);
 let ret = usb.closePipe(devicepipe);
 console.log(`closePipe = ${ret}`);
 ```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-webview.md b/zh-cn/application-dev/reference/apis/js-apis-webview.md
index 05160cdd0a63fc2dbb650e4d3914edd918838ac8..bd2949328712caae3c0785c742b71cc5b2b425a4 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-webview.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md
@@ -1172,11 +1172,9 @@ import web_webview from '@ohos.web.webview'
 @Component
 struct WebComponent {
   controller: web_webview.WebviewController = new web_webview.WebviewController();
-  @State webResult: string = '';
 
   build() {
     Column() {
-      Text(this.webResult).fontSize(20)
       Web({ src: $rawfile('index.html'), controller: this.controller })
         .javaScriptAccess(true)
         .onPageEnd(e => {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
index ce553c194a1acbfac18954390d7f6b2b5e681af5..e769d76979fab7ef3d4dad1aa10b06c14bad6576 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -652,6 +652,12 @@ verticalScrollBarAccess(verticalScrollBar: boolean)
   </html>
   ```
 
+### password
+
+password(password: boolean)
+
+设置是否应保存密码。该接口为空接口。
+
 ### cacheMode
 
 cacheMode(cacheMode: CacheMode)
@@ -1218,6 +1224,18 @@ forceDarkAccess(access: boolean)
   }
   ```
 
+### tableData
+
+tableData(tableData: boolean)
+
+设置是否应保存表单数据。该接口为空接口。
+
+### wideViewModeAccess
+
+wideViewModeAccess(wideViewModeAccess: boolean)
+
+设置web是否支持html中meta标签的viewport属性。该接口为空接口。
+
 ### pinchSmooth<sup>9+</sup>
 
 pinchSmooth(isEnabled: boolean)
@@ -1954,6 +1972,26 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
   }
   ```
 
+### onSslErrorReceive<sup>(deprecated)</sup>
+
+onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
+
+通知用户加载资源时发生SSL错误。
+
+> **说明：**
+>
+> 从API version 8开始支持，从API version 9开始废弃。建议使用[onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9)替代。
+
+### onFileSelectorShow<sup>(deprecated)</sup>
+
+onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
+
+调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。
+
+> **说明：**
+>
+> 从API version 8开始支持，从API version 9开始废弃。建议使用[onShowFileSelector<sup>9+</sup>](#onshowfileselector9)替代。
+
 ### onRenderExited<sup>9+</sup>
 
 onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
@@ -4709,9 +4747,11 @@ clearHistory(): void
 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
 
 ### setCookie<sup>(deprecated)</sup>
+
 setCookie(): boolean
 
 设置cookie，该方法为同步方法。设置成功返回true，否则返回false。
+
 从API version 9开始不再维护，建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。
 
 **返回值：**
@@ -4720,57 +4760,16 @@ setCookie(): boolean
 | ------- | ------------- |
 | boolean | 设置cookie是否成功。 |
 
-**示例：**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('setCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().setCookie()
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```
 ### saveCookie<sup>(deprecated)</sup>
+
 saveCookie(): boolean
 
 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
+
 从API version 9开始不再维护，建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。
 
 **返回值：**
 
 | 类型      | 说明                   |
 | ------- | -------------------- |
-| boolean | 同步内存cookie到磁盘操作是否成功。 |
-
-**示例：**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('saveCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().saveCookie()
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```
+| boolean | 同步内存cookie到磁盘操作是否成功。 |
\ No newline at end of file
diff --git a/zh-cn/application-dev/security/accesstoken-overview.md b/zh-cn/application-dev/security/accesstoken-overview.md
index aad84e46328813bf8c93ec6eeed26ece60f2123f..ef7e1d20113d7c0f6402578ff37f469d00f59396 100644
--- a/zh-cn/application-dev/security/accesstoken-overview.md
+++ b/zh-cn/application-dev/security/accesstoken-overview.md
@@ -39,10 +39,14 @@ ATM (AccessTokenManager) 是OpenHarmony上基于AccessToken构建的统一的应
 
 ![](figures/permission-workflow.jpg)
 
+上图的数字标注，请参考以下说明：
+
 1：开发者可以参考下图，判断应用能否申请目标权限。
 
 ![](figures/permission-application-process.png)
 
+上图的数字标注，请参考以下说明：
+
 1：应用APL等级与权限等级的匹配关系请参考[权限等级说明](#权限等级说明)。
 
 2：权限的授权方式分为user_grant（用户授权）和system_grant（系统授权），具体请参考[权限类型说明](#权限类型说明)。
@@ -58,6 +62,8 @@ ATM (AccessTokenManager) 是OpenHarmony上基于AccessToken构建的统一的应
 
 ![](figures/permission-verify-process.png)
 
+上图的数字标注，请参考以下说明：
+
 1：根据应用当前提供的接口是否涉及敏感的数据或者功能，使用应用权限对当前接口进行访问控制。
 
 2：应用可以在系统已经存在的权限中[访问控制列表（ACL）说明](#访问控制列表acl说明)选择适合的权限。比如应用提供的接口会涉及到联系人信息的话，推荐使用联系人相关的权限对接口进行保护。
diff --git a/zh-cn/application-dev/security/cryptoFramework-guidelines.md b/zh-cn/application-dev/security/cryptoFramework-guidelines.md
index cbfd2ba12b1b336730567bc1aafd45f98c3a45a7..c8cdd4b357c4d28dbc7f3000d634964a55409a80 100644
--- a/zh-cn/application-dev/security/cryptoFramework-guidelines.md
+++ b/zh-cn/application-dev/security/cryptoFramework-guidelines.md
@@ -1130,83 +1130,70 @@ function signLongMessagePromise() {
 ```javascript
 import cryptoFramework from "@ohos.security.cryptoFramework"
 
-// turn string into uint8Arr
+// 可理解的字符串转成字节流
 function stringToUint8Array(str) {
-  var arr = [];
-  for (var i = 0, j = str.length; i < j; ++i) {
-      arr.push(str.charCodeAt(i));
-  }
-  var tmpUint8Array = new Uint8Array(arr);
-  return tmpUint8Array;
-}
-
-// generate dataBlob with given length
-function GenDataBlob(dataBlobLen) {
-  var dataBlob;
-  if (dataBlobLen == 12) {
-      dataBlob = {data: stringToUint8Array("my test data")};
-  } else {
-      console.error("GenDataBlob: dataBlobLen is invalid");
-      dataBlob = {data: stringToUint8Array("my test data")};
+  let arr = [];
+  for (let i = 0, j = str.length; i < j; ++i) {
+    arr.push(str.charCodeAt(i));
   }
-  return dataBlob;
+  return new Uint8Array(arr);
 }
 
-// md with promise async
-function doMdByPromise(algName) {
-  var md;
+// 以Promise方式完成摘要
+function doMdByPromise() {
+  let mdAlgName = "SHA256"; // 摘要算法名
+  let message = "mdTestMessgae"; // 待摘要数据
+  let md;
+  let mdOutput;
   try {
-    md = cryptoFramework.createMd(algName);
+    md = cryptoFramework.createMd(mdAlgName);
   } catch (error) {
     console.error("[Promise]: error code: " + error.code + ", message is: " + error.message);
+    return;
   }
-  console.error("[Promise]: Md algName is: " + md.algName);
-  // 初次update
-  var promiseMdUpdate = md.update(GenDataBlob(12));
+  console.info("[Promise]: Md algName is: " + md.algName);
+  // 数据量较少时，可以只做一次update，将数据全部传入，接口未对入参长度做限制
+  let promiseMdUpdate = md.update({ data: stringToUint8Array(message) });
   promiseMdUpdate.then(() => {
-    // 可根据情况进行多次update
-    promiseMdUpdate = md.update(GenDataBlob(12));
-    return promiseMdUpdate;
-  }).then(mdOutput => {
-    var PromiseMdDigest = md.digest();
+    // 通过digest，返回摘要结果
+    let PromiseMdDigest = md.digest();
     return PromiseMdDigest;
-  }).then(mdOutput => {
-    console.error("[Promise]: MD result: " + mdOutput.data);
-    var mdLen = md.getMdLength();
-    console.error("[Promise]: MD len: " + mdLen);
+  }).then(digestOutput => {
+    mdOutput = digestOutput;
+    console.info("[Promise]: MD result: " + mdOutput.data);
+    let mdLen = md.getMdLength();
+    console.info("[Promise]: MD len: " + mdLen);
   }).catch(error => {
     console.error("[Promise]: error: " + error.message);
   });
 }
 
-// md with callback async
-function doMdByCallback(algName) {
-  var md;
+// 以Callback方式完成摘要
+function doMdByCallback() {
+  let mdAlgName = "SHA256"; // 摘要算法名
+  let message = "mdTestMessgae"; // 待摘要数据
+  let md;
+  let mdOutput;
   try {
-    md = cryptoFramework.createMd(algName);
+    md = cryptoFramework.createMd(mdAlgName);
   } catch (error) {
     console.error("[Callback]: error code: " + error.code + ", message is: " + error.message);
   }
-  console.error("[Callback]: Md algName is: " + md.algName);
-  // 初次update
-  md.update(GenDataBlob(12), (err,) => {
+  console.info("[Callback]: Md algName is: " + md.algName);
+  // 数据量较少时，可以只做一次update，将数据全部传入，接口未对入参长度做限制
+  md.update({ data: stringToUint8Array(message) }, (err,) => {
     if (err) {
       console.error("[Callback]: err: " + err.code);
     }
-    // 可根据情况进行多次update
-    md.update(GenDataBlob(12), (err1,) => {
+    md.digest((err1, digestOutput) => {
       if (err1) {
         console.error("[Callback]: err: " + err1.code);
+      } else {
+        mdOutput = digestOutput;
+        console.info("[Callback]: MD result: " + mdOutput.data);
+        let mdLen = md.getMdLength();
+        console.info("[Callback]: MD len: " + mdLen);
       }
-      md.digest((err2, mdOutput) => {
-        if (err2) {
-          console.error("[Callback]: err: " + err2.code);
-        } else {
-          console.error("[Callback]: MD result: " + mdOutput.data);
-          var mdLen = md.getMdLength();
-          console.error("[Callback]: MD len: " + mdLen);
-        }
-      });
     });
   });
 }
@@ -1215,54 +1202,56 @@ function doMdByCallback(algName) {
 ```javascript
 import cryptoFramework from "@ohos.security.cryptoFramework"
 
-async function updateData(index, obj, data) {
-  console.error("update " + (index + 1) + " MB data...");
-  return obj.update(data);
-}
-
+// 可理解的字符串转成字节流
 function stringToUint8Array(str) {
-  var arr = [];
-  for (var i = 0, j = str.length; i < j; ++i) {
+  let arr = [];
+  for (let i = 0, j = str.length; i < j; ++i) {
     arr.push(str.charCodeAt(i));
   }
-  var tmpUint8Array = new Uint8Array(arr);
-  return tmpUint8Array;
+  return new Uint8Array(arr);
 }
 
-function GenDataBlob(dataBlobLen) {
-  var dataBlob;
-  if (dataBlobLen == 12) {
-    dataBlob = {data: stringToUint8Array("my test data")};
-  } else {
-    console.error("GenDataBlob: dataBlobLen is invalid");
-    dataBlob = {data: stringToUint8Array("my test data")};
-  }
-  return dataBlob;
-}
 
-function LoopMdPromise(algName, loopSize) {
-  var md;
+// 使用Promise方式，完成分段摘要
+async function doLoopMdPromise() {
+  let mdAlgName = "SHA256"; // 摘要算法名
+  let md;
+  let mdOutput;
   try {
-    md = cryptoFramework.createMd(algName);
+    md = cryptoFramework.createMd(mdAlgName);
   } catch (error) {
     console.error("[Promise]: error code: " + error.code + ", message is: " + error.message);
     return;
   }
-  console.error("[Promise]: Md algName is: " + md.algName);
-  var promiseMdUpdate = md.update(GenDataBlob(12));
-  promiseMdUpdate.then(() => {
-    var PromiseMdDigest = md.digest();
-    return PromiseMdDigest;
-  }).then(async () => {
-    for (var i = 0; i < loopSize; i++) {
-      await updateData(i, md, GenDataBlob(12));
+  console.info("[Promise]: Md algName is: " + md.algName);
+  let messageText = "aaaaa.....bbbbb.....ccccc.....ddddd.....eee"; // 假设信息总共43字节
+  let messageArr = [];
+  let updateLength = 20; // 假设每20字节分段update一次，实际并无要求
+
+  for (let i = 0; i <= messageText.length; i++) {
+    if ((i % updateLength == 0 || i == messageText.length) && messageArr.length != 0) {
+      let message = new Uint8Array(messageArr);
+      let messageBlob = { data : message };
+      // 使用await处理for循环里的update
+      try {
+        await md.update(messageBlob); // 分段update
+      } catch (error) {
+        console.error("await update error code: " + error.code + ", message is: " + error.message);
+        return;
+      }
+      messageArr = [];
     }
-    var PromiseMdDigest = md.digest();
-    return PromiseMdDigest;
-  }).then(mdOutput => {
-    console.error("[Promise]: MD result: " + mdOutput.data);
-    var mdLen = md.getMdLength();
-    console.error("[Promise]: MD len: " + mdLen);
+    // 按分割长度，填充messageArr
+    if (i < messageText.length) {
+      messageArr.push(messageText.charCodeAt(i));
+    }
+  }
+  let PromiseMdDigest = md.digest();
+  PromiseMdDigest.then(digestOutput => {
+    mdOutput = digestOutput;
+    console.info("[Promise]: MD result: " + mdOutput.data);
+    let mdLen = md.getMdLength();
+    console.info("[Promise]: MD len: " + mdLen);
   }).catch(error => {
     console.error("[Promise]: error: " + error.message);
   });
@@ -1374,77 +1363,72 @@ Mac(message authentication code)可以对消息进行完整性校验，通过使
 ```javascript
 import cryptoFramework from "@ohos.security.cryptoFramework"
 
-// turn string into uint8Arr
+// 可理解的字符串转成字节流
 function stringToUint8Array(str) {
-  var arr = [];
-  for (var i = 0, j = str.length; i < j; ++i) {
-      arr.push(str.charCodeAt(i));
-  }
-  var tmpUint8Array = new Uint8Array(arr);
-  return tmpUint8Array;
-}
-
-// generate blob with this func
-function GenDataBlob(dataBlobLen) {
-  var dataBlob;
-  if (dataBlobLen == 12) {
-      dataBlob = {data: stringToUint8Array("my test data")};
-  } else {
-      console.error("GenDataBlob: dataBlobLen is invalid");
-      dataBlob = {data: stringToUint8Array("my test data")};
+  let arr = [];
+  for (let i = 0, j = str.length; i < j; ++i) {
+    arr.push(str.charCodeAt(i));
   }
-  return dataBlob;
+  return new Uint8Array(arr);
 }
 
-function doHmacByPromise(algName) {
-  var mac;
+// 以Promise方式完成HMAC
+function doHmacByPromise() {
+  let macAlgName = "SHA256"; // 摘要算法名
+  let message = "hmacTestMessgae"; // 待hmac数据
+  let macOutput;
+  let mac;
   try {
-    mac = cryptoFramework.createMac(algName);
+    mac = cryptoFramework.createMac(macAlgName);
   } catch (error) {
     console.error("[Promise]: error code: " + error.code + ", message is: " + error.message);
   }
-  console.error("[Promise]: Mac algName is: " + mac.algName);
-  var KeyBlob = {
+  console.info("[Promise]: Mac algName is: " + mac.algName);
+  let KeyBlob = {
+    // 128位密钥
     data : stringToUint8Array("12345678abcdefgh")
   }
-  var symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
-  var promiseConvertKey = symKeyGenerator.convertKey(KeyBlob);
+  let symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
+  // 将二进制密钥转换为算法库密钥
+  let promiseConvertKey = symKeyGenerator.convertKey(KeyBlob);
   promiseConvertKey.then(symKey => {
-    var promiseMacInit = mac.init(symKey);
+    let promiseMacInit = mac.init(symKey);
     return promiseMacInit;
   }).then(() => {
-    // 初次update
-    var promiseMacUpdate = mac.update(GenDataBlob(12));
-    return promiseMacUpdate;
-  }).then(() => {
-    // 可根据情况进行多次update
-    var promiseMacUpdate = mac.update(GenDataBlob(12));
+    // 数据量较少时，可以只做一次update，将数据全部传入，接口未对入参长度做限制
+    let promiseMacUpdate = mac.update({ data: stringToUint8Array(message) });
     return promiseMacUpdate;
   }).then(() => {
-    var PromiseMacDoFinal = mac.doFinal();
+    let PromiseMacDoFinal = mac.doFinal();
     return PromiseMacDoFinal;
-  }).then(macOutput => {
-    console.error("[Promise]: HMAC result: " + macOutput.data);
-    var macLen = mac.getMacLength();
-    console.error("[Promise]: MAC len: " + macLen);
+  }).then(output => {
+    macOutput = output;
+    console.info("[Promise]: HMAC result: " + macOutput.data);
+    let macLen = mac.getMacLength();
+    console.info("[Promise]: MAC len: " + macLen);
   }).catch(error => {
     console.error("[Promise]: error: " + error.message);
   });
 }
 
-// process by callback
-function doHmacByCallback(algName) {
-  var mac;
+// 以Callback方式完成HMAC
+function doHmacByCallback() {
+  let macAlgName = "SHA256"; // 摘要算法名
+  let message = "hmacTestMessgae"; // 待hmac数据
+  let macOutput;
+  let mac;
   try {
-    mac = cryptoFramework.createMac(algName);
+    mac = cryptoFramework.createMac(macAlgName);
   } catch (error) {
-    AlertDialog.show({message: "[Callback]: error code: " + error.code + ", message is: " + error.message});
     console.error("[Callback]: error code: " + error.code + ", message is: " + error.message);
   }
-  var KeyBlob = {
+  console.info("[Promise]: Mac algName is: " + mac.algName);
+  let KeyBlob = {
+    // 128位密钥
     data : stringToUint8Array("12345678abcdefgh")
   }
-  var symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
+  let symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
+  // 将二进制密钥转换为算法库密钥
   symKeyGenerator.convertKey(KeyBlob, (err, symKey) => {
     if (err) {
       console.error("[Callback]: err: " + err.code);
@@ -1453,25 +1437,20 @@ function doHmacByCallback(algName) {
       if (err1) {
         console.error("[Callback]: err: " + err1.code);
       }
-      // 初次update
-      mac.update(GenDataBlob(12), (err2, ) => {
+      // 数据量较少时，可以只做一次update，将数据全部传入，接口未对入参长度做限制
+      mac.update({ data: stringToUint8Array(message) }, (err2, ) => {
         if (err2) {
           console.error("[Callback]: err: " + err2.code);
         }
-        // 可根据情况进行多次update
-        mac.update(GenDataBlob(12), (err3, ) => {
+        mac.doFinal((err3, output) => {
           if (err3) {
             console.error("[Callback]: err: " + err3.code);
+          } else {
+            macOutput = output;
+            console.info("[Callback]: HMAC result: " + macOutput.data);
+            let macLen = mac.getMacLength();
+            console.info("[Callback]: MAC len: " + macLen);
           }
-          mac.doFinal((err4, macOutput) => {
-            if (err4) {
-              console.error("[Callback]: err: " + err4.code);
-            } else {
-              console.error("[Callback]: HMAC result: " + macOutput.data);
-              var macLen = mac.getMacLength();
-              console.error("[Callback]: MAC len: " + macLen);
-            }
-          });
         });
       });
     });
@@ -1482,61 +1461,67 @@ function doHmacByCallback(algName) {
 ```javascript
 import cryptoFramework from "@ohos.security.cryptoFramework"
 
-async function updateData(index, obj, data) {
-  console.error("update " + (index + 1) + " MB data...");
-  return obj.update(data);
-}
-
 function stringToUint8Array(str) {
-  var arr = [];
-  for (var i = 0, j = str.length; i < j; ++i) {
+  let arr = [];
+  for (let i = 0, j = str.length; i < j; ++i) {
     arr.push(str.charCodeAt(i));
   }
-  var tmpUint8Array = new Uint8Array(arr);
-  return tmpUint8Array;
-}
-
-function GenDataBlob(dataBlobLen) {
-  var dataBlob;
-  if (dataBlobLen == 12) {
-    dataBlob = {data: stringToUint8Array("my test data")};
-  } else {
-    console.error("GenDataBlob: dataBlobLen is invalid");
-    dataBlob = {data: stringToUint8Array("my test data")};
-  }
-  return dataBlob;
+  return new Uint8Array(arr);
 }
 
-function LoopHmacPromise(algName, loopSize) {
-  var mac;
+function doLoopHmacPromise() {
+  let macAlgName = "SHA256"; // 摘要算法名
+  let macOutput;
+  let mac;
   try {
-    mac = cryptoFramework.createMac(algName);
+    mac = cryptoFramework.createMac(macAlgName);
   } catch (error) {
     console.error("[Promise]: error code: " + error.code + ", message is: " + error.message);
     return;
   }
-  console.error("[Promise]: Mac algName is: " + mac.algName);
-  var KeyBlob = {
+  console.info("[Promise]: Mac algName is: " + mac.algName);
+  let KeyBlob = {
+    // 128位密钥
     data : stringToUint8Array("12345678abcdefgh")
   }
-  var symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
-  var promiseConvertKey = symKeyGenerator.convertKey(KeyBlob);
+  let messageText = "aaaaa.....bbbbb.....ccccc.....ddddd.....eee"; // 假设信息总共43字节
+  let updateLength = 20; // 假设每20字节分段update一次，实际并无要求
+  let symKeyGenerator = cryptoFramework.createSymKeyGenerator("AES128");
+  // 将二进制密钥转换为算法库密钥
+  let promiseConvertKey = symKeyGenerator.convertKey(KeyBlob);
   promiseConvertKey.then(symKey => {
-    var promiseMacInit = mac.init(symKey);
+    let promiseMacInit = mac.init(symKey);
     return promiseMacInit;
   }).then(async () => {
-    for (var i = 0; i < loopSize; i++) {
-      await updateData(i, mac, GenDataBlob(12));
+    let promiseMacUpdate;
+    let messageArr = [];
+    for (let i = 0; i <= messageText.length; i++) {
+      if ((i % updateLength == 0 || i == messageText.length) && messageArr.length != 0) {
+        let message = new Uint8Array(messageArr);
+        let messageBlob = { data : message };
+        // 使用await处理for循环里的update
+        try {
+          promiseMacUpdate = await mac.update(messageBlob); // 分段update
+        } catch (error) {
+          console.error("await update error code: " + error.code + ", message is: " + error.message);
+          return;
+        }
+        messageArr = [];
+      }
+      // 按分割长度，填充messageArr
+      if (i < messageText.length) {
+        messageArr.push(messageText.charCodeAt(i));
+      }
     }
-    var promiseMacUpdate = mac.update(GenDataBlob(12));
     return promiseMacUpdate;
   }).then(() => {
-    var PromiseMacDoFinal = mac.doFinal();
+    let PromiseMacDoFinal = mac.doFinal();
     return PromiseMacDoFinal;
-  }).then(macOutput => {
-    console.error("[Promise]: HMAC result: " + macOutput.data);
-    var macLen = mac.getMacLength();
-    console.error("[Promise]: MAC len: " + macLen);
+  }).then(output => {
+    macOutput = output;
+    console.log("[Promise]: HMAC result: " + macOutput.data);
+    let macLen = mac.getMacLength();
+    console.log("[Promise]: MAC len: " + macLen);
   }).catch(error => {
     console.error("[Promise]: error: " + error.message);
   });