diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md
index 77038cc101186059e9377c85d8e5b880784c2b9e..0a7533ea2389f74866ced1742937daeffe134fcc 100644
--- a/en/application-dev/quick-start/Readme-EN.md
+++ b/en/application-dev/quick-start/Readme-EN.md
@@ -2,10 +2,9 @@
 
 - Getting Started
   - [Preparations](start-overview.md)
-  - [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md)
-  - [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md)
-  - [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md)
-  - [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md)
+  - [Getting Started with eTS in Stage Model](start-with-ets-stage.md)
+  - [Getting Started with eTS in FA Model](start-with-ets-fa.md)
+  - [Getting Started with JavaScript in FA Model](start-with-js-fa.md)
 - Development Fundamentals
   - [Application Package Structure Configuration File (FA Model)](package-structure.md)
   - [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
diff --git a/en/application-dev/quick-start/figures/01.png b/en/application-dev/quick-start/figures/01.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab9a01795cd6795448b16e53b7400cc7806e455c
Binary files /dev/null and b/en/application-dev/quick-start/figures/01.png differ
diff --git a/en/application-dev/quick-start/figures/02.png b/en/application-dev/quick-start/figures/02.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b06d46ea1285613c00efc7cce55e7dbe2b74a2c
Binary files /dev/null and b/en/application-dev/quick-start/figures/02.png differ
diff --git a/en/application-dev/quick-start/figures/04.png b/en/application-dev/quick-start/figures/04.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac9dd6594d8d6d3673b0f713288f41dae5b60496
Binary files /dev/null and b/en/application-dev/quick-start/figures/04.png differ
diff --git a/en/application-dev/quick-start/figures/06.png b/en/application-dev/quick-start/figures/06.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdfc0acf1c46ded2b471894dc20af970f3c50836
Binary files /dev/null and b/en/application-dev/quick-start/figures/06.png differ
diff --git a/en/application-dev/quick-start/figures/07.png b/en/application-dev/quick-start/figures/07.png
new file mode 100644
index 0000000000000000000000000000000000000000..3749dcb06daed21f87088a9a46afa6d0d87bef3f
Binary files /dev/null and b/en/application-dev/quick-start/figures/07.png differ
diff --git a/en/application-dev/quick-start/figures/09.png b/en/application-dev/quick-start/figures/09.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac6dbbab11846274c42bfdd61f7bd5dfe0ace99f
Binary files /dev/null and b/en/application-dev/quick-start/figures/09.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png b/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png
new file mode 100644
index 0000000000000000000000000000000000000000..b34bfa591849f5f0ffd0cee1fc898ef8d2f5a5cd
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png b/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png
new file mode 100644
index 0000000000000000000000000000000000000000..c340326cce920ed6c55965126d38ddd973d9f50a
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif b/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif
new file mode 100644
index 0000000000000000000000000000000000000000..069e426658d388aa9749754910d572a3d526393c
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif b/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif
new file mode 100644
index 0000000000000000000000000000000000000000..594faed1d8f0bfd157040b5fdec590d5a704745d
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif
deleted file mode 100644
index 85d496e777b607878e2e753870c3d17edbe9ac84..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif
deleted file mode 100644
index 52c44c8b2924878e6fc1156039a815b266dfcfae..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png b/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png
deleted file mode 100644
index d42c9c66018ee55f3c200ff108fb0a77b6c82df3..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png b/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png
deleted file mode 100644
index a1ac0507eae1ecbc825075ef08c09e01b4f4858e..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png b/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png
new file mode 100644
index 0000000000000000000000000000000000000000..c659e54584bf8e78543facc3a1b3f821a6a9571f
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif b/en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif
similarity index 50%
rename from en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif
rename to en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif
index 59d7dffeadc05a792920a481cdf2e2422147434f..c7a7ddefaee51083d2e93cd997da7a723da4dc48 100644
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif and b/en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif b/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8fb36b48063470e5bb444e5325fa3ffac688a6bf
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif b/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif
deleted file mode 100644
index 28a648445a7936a190fa3b129489c68dea97f963..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png b/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png
deleted file mode 100644
index 9b93b35e975769a97c817a70f55908452768101a..0000000000000000000000000000000000000000
Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png and /dev/null differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png b/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png
new file mode 100644
index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png b/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png
new file mode 100644
index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png b/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png
new file mode 100644
index 0000000000000000000000000000000000000000..42b475577bcc805372336be8971afa5c69c284bd
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ce82237297b06c04113d0368d7145661de0d997
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png
new file mode 100644
index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png
new file mode 100644
index 0000000000000000000000000000000000000000..7891c03e8fab1eaaf6159964fc338e0be9bb080a
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png
new file mode 100644
index 0000000000000000000000000000000000000000..a88a2ec512c0fa4f374d1e9ac03a27c717aeab58
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png b/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png
new file mode 100644
index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png b/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png b/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png b/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png
new file mode 100644
index 0000000000000000000000000000000000000000..a69b0c6f3b047e5961b05b40b663ce972a90b459
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png b/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4b6f516a8340914c41600ef24012dd3699648b6
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png b/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png
new file mode 100644
index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fba7aab32a92752b341af024ef97e5acfe3d73d
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbbde9923a131d3ab69257b28cfe33ca2a1040cf
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png differ
diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png
new file mode 100644
index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511
Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png differ
diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md
index 6f5bcb31545c055124156a366eea31e19f91c8c4..6676177531b6a2aaeac7ffcac59ab3a586b5656c 100644
--- a/en/application-dev/quick-start/start-overview.md
+++ b/en/application-dev/quick-start/start-overview.md
@@ -1,12 +1,12 @@
 # Preparations
 
-This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between pages. The following figure shows how the pages look on the DevEco Studio Previewer.
+This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between them. The following figure shows how the pages look on the DevEco Studio Previewer.
 
 
-![en-us_image_0000001261809595](figures/en-us_image_0000001261809595.png)
+![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
 
-Before you begin, there are some basic concepts that will help you better understand OpenHarmony: UI framework and ability.
+Before you begin, there are two basic concepts that will help you better understand OpenHarmony: UI framework and ability.
 
 
 ## Basic Concepts
@@ -14,37 +14,39 @@ Before you begin, there are some basic concepts that will help you better unders
 
 ### UI Framework
 
-OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities.
+OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides a full range of capabilities you may need for application UI development, ranging from components to layout calculation, animation, UI interaction, and drawing capabilities.
 
 ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
 
-| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** |
+| **Development Paradigm**| **Programming Language**| **UI Update Mode**| **Applicable To**| **Intended Audience**|
 | -------- | -------- | -------- | -------- | -------- |
-| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers |
-| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
+| Declarative development paradigm| Extended TypeScript (eTS)| Data-driven| Applications involving technological sophistication and teamwork| Mobile application and system application developers|
+| Web-like development paradigm| JavaScript| Data-driven| Applications and service widgets with simple UIs| Frontend web developers|
 
-For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
+For more details, see [UI Development](../ui/arkui-overview.md).
 
-For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode.
 
-On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
+### Ability
 
+An ability is the abstraction of a functionality that an application can provide. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other.
 
-### Ability
+The ability framework model has two forms:
+
+- **FA model**: applies to application development using API version 8 and earlier versions. For details, see [FA Model Overview](../ability/fa-brief.md).
 
-An ability is an abstraction of a capability that an application can provide. The **Ability** class is an essential component to OpenHarmony applications. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other.
+- **Stage model**: introduced since API version 9. For details, see [Stage Model Overview](../ability/stage-brief.md).
 
-Abilities are classified into two types: [Feature Ability (FA)](../../glossary.md#f) and [Particle Ability (PA)](../../glossary.md#p). Each type has their respective templates for different capabilities. FAs support only the Page template (also called the [Page ability](../ability/fa-pageability.md)), which is used to provide the capability of interacting with users. A Page ability consists of one or more pages. The figure below shows the relationship between a Page ability and pages.
+The project directory structure of the FA model is different from that of the stage model. The stage model only works with the eTS programming language.
 
-![en-us_image_0000001215206886](figures/en-us_image_0000001215206886.png)
+For details about the differences between the FA model and stage model, see [Ability Framework Overview](../ability/ability-brief.md).
 
-This document provides a Page ability instance with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md).
+This document provides an ability with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md).
 
 
 ## Tool Preparation
 
-1. Install the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony).
+1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta).
 
-2. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443).
+2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443).
 
-When you are done, follow the instructions in [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md), [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md), [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md).
+When you are done, follow the instructions in [Getting Started with eTS in Stage Model](start-with-ets-stage.md), [Getting Started with eTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](../quick-start/start-with-js-fa.md).
diff --git a/en/application-dev/quick-start/start-with-ets-fa.md b/en/application-dev/quick-start/start-with-ets-fa.md
new file mode 100644
index 0000000000000000000000000000000000000000..8eacd7eedaf4fd795ee14c378484298398ef0b63
--- /dev/null
+++ b/en/application-dev/quick-start/start-with-ets-fa.md
@@ -0,0 +1,299 @@
+# Getting Started with eTS in FA Model
+
+
+>  **NOTE**
+>
+>  To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
+>
+>  For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
+
+
+## Creating an eTS Project
+
+1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
+
+   ![01](figures/01.png)
+
+2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **eTS** and retain the default values for other parameters.
+
+   ![02](figures/02.png)
+
+   > **NOTE**
+   >
+   > If you are using DevEco Studio V3.0 Beta3 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
+   >
+   > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
+   >
+   > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
+
+3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
+
+
+## eTS Project Directory Structure
+
+- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
+  - **src > main > ets**: a collection of eTS source code.
+  - **src > main > ets > MainAbility**: entry to your application/service.
+  - **src > main > ets > MainAbility > pages**: pages contained in **MainAbility**.
+  - **src > main > ets > MainAbility > pages > index.ets**: the first page in the **pages** list, also referred to as the entry to the application.
+  - **src > main > ets > MainAbility > app.ets**: ability lifecycle file.
+  - **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 File Categories](../ui/ui-ts-basic-resource-file-categories.md).
+  - **src > main > config.json**: 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 about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
+  - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
+  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+
+- **build-profile.json5**: application-level configuration information, including the signature and product configuration.
+
+- **hvigorfile.js**: application-level compilation and build task script.
+
+
+## Building the First Page
+
+1. Use the **\<Text>** component.
+
+   After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
+
+   
+   ```ts
+   // index.ets
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+2. Add a **\<Button>** component.
+
+   On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
+
+   
+   ```ts
+   // index.ets
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           // Add a button to respond to user clicks.
+           Button() {
+             Text('Next')
+               .fontSize(30)
+               .fontWeight(FontWeight.Bold)
+           }
+           .type(ButtonType.Capsule)
+           .margin({
+             top: 20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
+
+   ![en-us_image_0000001364254741](figures/en-us_image_0000001364254741.png)
+
+
+## Building the Second Page
+
+1. Create the second page.
+
+   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
+
+      ![en-us_image_0000001311334932](figures/en-us_image_0000001311334932.png)
+
+      > **NOTE**
+      >
+      > You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
+   - Configure the route for the second page, by setting **pages/second** under **module - js - pages** in the **config.json** The sample code is as follows: The sample code is as follows:
+     
+      ```json
+      {
+        "module": {
+          "js": [
+            {
+              "pages": [
+                "pages/index",
+                "pages/second"
+              ],
+              }
+          ]
+        }
+      }
+      ```
+
+2. Add **\<Text>** and **\<Button>** components.
+
+   Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
+
+   
+   ```ts
+   // second.ets
+   @Entry
+   @Component
+   struct Second {
+     @State message: string = 'Hi there'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           Button() {
+             Text('Back')
+               .fontSize(25)
+               .fontWeight(FontWeight.Bold)
+           }
+           .type(ButtonType.Capsule)
+           .margin({
+             top: 20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+
+## Implementing Page Redirection
+
+You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
+
+1. Implement redirection from the first page to the second page.
+
+   In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
+
+   
+   ```ts
+   // index.ets
+   import router from '@ohos.router';
+   
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           // Add a button to respond to user clicks.
+           Button() {
+             Text('Next')
+               .fontSize(30)
+               .fontWeight(FontWeight.Bold)
+           }
+           .type(ButtonType.Capsule)
+           .margin({
+             top: 20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+           // Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
+           .onClick(() => {
+             router.push({ url: 'pages/second' })
+           })
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+2. Implement redirection from the second page to the first page.
+
+   In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
+
+   
+   ```ts
+   // second.ets
+   import router from '@ohos.router';
+   
+   @Entry
+   @Component
+   struct Second {
+     @State message: string = 'Hi there'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           Button() {
+             Text('Back')
+               .fontSize(25)
+               .fontWeight(FontWeight.Bold)
+           }
+           .type(ButtonType.Capsule)
+           .margin({
+             top: 20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+           // Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page.
+           .onClick(() => {
+             router.back()
+           })
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+3. Open the **index.ets** file and click ![en-us_image_0000001311175120](figures/en-us_image_0000001311175120.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
+
+   ![en-us_image_0000001364173989](figures/en-us_image_0000001364173989.png)
+
+
+## Running the Application on a Real Device
+
+1. Connect the development board running the OpenHarmony standard system to the computer.
+
+2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
+
+   ![06](figures/06.png)
+
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494580](figures/en-us_image_0000001311494580.png). The display effect is shown in the figure below.
+
+   ![en-us_image_0000001363934577](figures/en-us_image_0000001363934577.png)
+
+Congratulations! You have finished developing your OpenHarmony application in eTS in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
diff --git a/en/application-dev/quick-start/start-with-ets-low-code.md b/en/application-dev/quick-start/start-with-ets-low-code.md
deleted file mode 100644
index 1dd03af96c2064b5b6b0baa89e7295decb4cf1fd..0000000000000000000000000000000000000000
--- a/en/application-dev/quick-start/start-with-ets-low-code.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Getting Started with eTS in the Low-Code Approach
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
->
-> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions.
->
-> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
-
-
-On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
-
-
-You can develop applications or services in the low-code approach using either of the following methods:
-
-
-- Create a project that supports low-code development. This method is used as an example in this topic.
-
-- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
-
-
-## Creating a Project That Supports Low-Code Development
-
-1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
-
-   ![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png)
-
-2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters.
-
-   ![en-us_image_0000001277728569](figures/en-us_image_0000001277728569.png)
-
-3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
-
-
-## Low-code Project Files
-
-After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below.
-
-![en-us_image_0000001277809333](figures/en-us_image_0000001277809333.png)
-
-- **entry &gt; src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets**: defines logical relationships, such as data and events, used on low-code pages. For details, see [About Syntactic Sugar](../ui/ts-syntactic-sugar.md). If multiple low-code development pages are created, a page folder and the corresponding **.ets** file will be created for each of these pages.
-
-- **entry &gt; src &gt; main &gt; supervisual &gt; MainAbility &gt; pages &gt; index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
-
-
-## Building the First Page
-
-After the project synchronization is complete, the default first page contains the **Column** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch.
-
-Add **Column**, **Text**, and **Button** components to the first page. A column is a container component whose child components are vertically arranged. For details, see [Column](../reference/arkui-ts/ts-container-column.md).
-
-1. Delete the existing template components from the canvas.<a name="delete_origin_content"></a>
-   
-   Open the **index.visual** file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
-
-   ![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
-
-2. Add a **Column** component and set its styles and attributes.<a name="add_container"></a>
-
-   Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233048996](figures/en-us_image_0000001233048996.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001233368860](figures/en-us_image_0000001233368860.png)**Feature** and set **AlignItems** to **center** so that the child components of the **Column** component are centered along the horizontal axis. Below is an illustration of the operations.
-
-   ![en-us_image_0000001277488977](figures/en-us_image_0000001277488977.gif)
-
-3. Add a **Text** component.
-
-   Drag the **Text** component from the **UI Control** area to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277608813](figures/en-us_image_0000001277608813.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hello World**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-   ![en-us_image_0000001235731706](figures/en-us_image_0000001235731706.gif)
-
-4. Add a **Button** component.
-
-   Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
-
-   ![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
-
-5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 
-
-   Below is how the first page looks in the Previewer.
-
-   ![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)
-
-
-## Building the Second Page
-
-1. Create the second page.
-   
-   In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
-
-   ![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
-
-2. [Delete the existing template components from the canvas.](#delete_origin_content)
-
-3. [Add a **Column** component and set its styles and attributes.](#add_container)
-
-4. Add a **Text** component.
-   - In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows:
-     
-      ```ts
-      // second.ets
-      @Entry
-      @Component
-      struct Second {
-        @State message: string = 'Hi there'
-      
-        /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-        build() {
-      
-        }
-      }
-      ```
-   - Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277488985](figures/en-us_image_0000001277488985.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hi there**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-      ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)
-
-5. Add a **Button** component.
-
-   Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233528160](figures/en-us_image_0000001233528160.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277728597](figures/en-us_image_0000001277728597.png)**Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
-
-   ![en-us_image_0000001280383937](figures/en-us_image_0000001280383937.gif)
-
-
-## Implementing Page Redirection
-
-You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
-
-1. Implement redirection from the first page to the second page.
-   
-   In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
-   
-   - In the **index.ets** file:
-     
-     ```ts
-     // index.ets
-     import router from '@ohos.router';
-     
-     @Entry
-     @Component
-     struct Index {
-       @State message: string = 'Hello World'
-     
-       /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-       onclick() {
-         router.push({
-           url: 'pages/second', // Specify the page to be redirected to.
-         })
-       }
-     
-       build() {
-       }
-     }
-     ```
-
-   - In the **index.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
-
-       ![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
-   
-2. Implement redirection from the second page to the first page.
-
-   In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. This operation needs to be completed in both .ets and .visual files.
-
-   - In the **second.ets** file:
-     
-      ```ts
-      // second.ets
-      import router from '@ohos.router';
-      
-      @Entry
-      @Component
-      struct Second {
-        @State message: string = 'Hi there'
-      
-        /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-        back() {
-          router.back()
-        }
-      
-        build() {
-      
-        }
-      }
-      ```
-   - In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
-
-      ![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png)
-
-3. Open the **index.visual** or **index.ets** file and click ![en-us_image_0000001277608849](figures/en-us_image_0000001277608849.png) in the Previewer to refresh the file. The figure below shows the effect.
-
-   ![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png)
-
-
-## Running the Application on a Real Device
-
-1. Connect the development board running the OpenHarmony standard system to the computer.
-
-2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
-
-   ![en-us_image_0000001277728613](figures/en-us_image_0000001277728613.png)
-
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001277809373](figures/en-us_image_0000001277809373.png). The display effect is shown in the figure below.
-
-   ![en-us_image_0000001233209024](figures/en-us_image_0000001233209024.png)
-
-Congratulations! You have finished developing your OpenHarmony application in eTS in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
diff --git a/en/application-dev/quick-start/start-with-ets.md b/en/application-dev/quick-start/start-with-ets-stage.md
similarity index 52%
rename from en/application-dev/quick-start/start-with-ets.md
rename to en/application-dev/quick-start/start-with-ets-stage.md
index 443c2b2ce1a6c632008e026b80ec22fb0f20cb79..162f4bf949364c5550b71945f28dac1ca4946707 100644
--- a/en/application-dev/quick-start/start-with-ets.md
+++ b/en/application-dev/quick-start/start-with-ets-stage.md
@@ -1,46 +1,63 @@
-# Getting Started with eTS in the Traditional Coding Approach
+# Getting Started with eTS in Stage Model
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
+
+> **NOTE**
+>
+> To use eTS, your DevEco Studio must be V3.0.0.900 Beta3 or later.
 >
-> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
+> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
 
 
 ## Creating an eTS Project
 
-1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
+1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
 
-   ![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png)
+   ![01](figures/01.png)
 
-2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters.
+2. On the project configuration page, set **Compile SDK** to **9**, **Model** to **Stage**, and retain the default values for other parameters.
 
-   ![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.png)
+   ![07](figures/07.png)
 
+   > **NOTE**
+   >
+   > You can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
+   >
+   > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
+   >
+   > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
+   
 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
 
 
-## eTS Project Files
+## eTS Project Directory Structure
 
-- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-  - **src &gt; main &gt; ets**: a collection of eTS source code.
-  - **src &gt; main &gt; ets &gt; MainAbility**: entry to your application/service.
-  - **src &gt; main &gt; ets &gt; MainAbility &gt; pages**: pages contained in **MainAbility**.
-  - **src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets**: the first  page in the pages list, that is, the home page of your application.
-  - **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets**: ability lifecycle file.
-  - **src &gt; main &gt; resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-  - **src &gt; main &gt; config.json**: 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.
+![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png)
+
+- **AppScope > app.json5**: application-level configuration information.
+
+- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
+  - **src > main > ets**: a collection of eTS source code.
+  - **src > main > ets > Application > AbilityStage.ts**: implementation of AbilityStage APIs.
+  - **src > main > ets > MainAbility**: entry to your application/service.
+  - **src > main > ets > MainAbility > MainAbility.ets**: ability lifecycle file.
+  - **src > main > ets > pages**: pages contained in **MainAbility**.
+  - **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 File Categories](../ui/ui-ts-basic-resource-file-categories.md).
+  - **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 about the configuration file, see [Application Package Structure Configuration File (Stage Model)](stage-structure.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
   - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
+
 - **hvigorfile.js**: application-level compilation and build task script.
 
 
 ## Building the First Page
 
-1. Use the **Text** component.
-   
-   After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility** &gt; **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.ets** file is shown below:
+1. Use the **\<Text>** component.
 
+   After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
 
+   
    ```ts
    // index.ets
    @Entry
@@ -62,11 +79,11 @@
    }
    ```
 
-2. Add a **&lt;Button&gt;** component.
-
-   On the default page, add a **&lt;Button&gt;** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
+2. Add a **\<Button>** component.
 
+   On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
 
+   
    ```ts
    // index.ets
    @Entry
@@ -101,26 +118,38 @@
    }
    ```
 
-3. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 
+3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
 
-   Below is how the first page looks on the Previewer.
-   
-   ![en-us_image_0000001216239356](figures/en-us_image_0000001216239356.png)
+   ![en-us_image_0000001311334976](figures/en-us_image_0000001311334976.png)
 
 
 ## Building the Second Page
 
 1. Create the second page.
-   
-   In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
 
-![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png)
+   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
+
+      ![09](figures/09.png)
 
-2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
+      > **NOTE**
+      >
+      > You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
+   - Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/second** under **src**. The sample code is as follows:
+     
+      ```json
+      {
+        "src": [
+          "pages/index",
+          "pages/second"
+        ]
+      }
+      ```
 
-   Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
+2. Add **\<Text>** and **\<Button>** components.
 
+   Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
 
+   
    ```ts
    // second.ets
    @Entry
@@ -160,10 +189,10 @@
 You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
 
 1. Implement redirection from the first page to the second page.
-   
-   In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
 
+   In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
 
+   
    ```ts
    // index.ets
    import router from '@ohos.router';
@@ -208,7 +237,7 @@ You can implement page redirection through the page router, which finds the targ
 
    In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
 
-
+   
    ```ts
    // second.ets
    import router from '@ohos.router';
@@ -248,21 +277,21 @@ You can implement page redirection through the page router, which finds the targ
    }
    ```
 
-3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect.
+3. Open the **index.ets** file and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
 
-   ![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png)
+   ![en-us_image_0000001364254773](figures/en-us_image_0000001364254773.png)
 
 
 ## Running the Application on a Real Device
 
 1. Connect the development board running the OpenHarmony standard system to the computer.
 
-2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
 
-   ![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png)
+   ![06](figures/06.png)
 
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below.
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001364054485](figures/en-us_image_0000001364054485.png). The display effect is shown in the figure below.
 
-   ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png)
+   ![en-us_image_0000001311334972](figures/en-us_image_0000001311334972.png)
 
-Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
+Congratulations! You have finished developing your OpenHarmony application in eTS in the stage model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
diff --git a/en/application-dev/quick-start/start-with-js-fa.md b/en/application-dev/quick-start/start-with-js-fa.md
new file mode 100644
index 0000000000000000000000000000000000000000..b89b8726df8992b45e4f702798633aee4cbc97d5
--- /dev/null
+++ b/en/application-dev/quick-start/start-with-js-fa.md
@@ -0,0 +1,237 @@
+# Getting Started with JavaScript in FA Model
+
+
+> **NOTE**
+>
+> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
+
+
+## Creating a JavaScript Project
+
+1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
+
+   ![01](figures/01.png)
+
+2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **JS** and retain the default values for other parameters.
+
+   ![04](figures/04.png)
+
+   > **NOTE**
+   >
+   > If you are using DevEco Studio V2.2 Beta1 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
+   >
+   > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
+   >
+   > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
+
+3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
+
+
+## JavaScript Project Directory Structure
+
+- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
+  - **src > main > js**: a collection of JavaScript source code.
+  - **src > main > js > MainAbility**: entry to your application/service.
+  - **src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
+  - **src > main > js > MainAbility > pages**: pages contained in **MainAbility**.
+  - **src > main > js > MainAbility > app.js**: ability lifecycle file.
+
+  - **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 Limitations and Access](../ui/js-framework-resource-restriction.md).
+  - **src > main > config.json**: 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 about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
+  - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
+  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+
+- **build-profile.json5**: application-level configuration information, including the signature and product configuration.
+
+- **hvigorfile.js**: application-level compilation and build task script.
+
+
+## Building the First Page
+
+1. Use the **\<Text>** component.
+
+   After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below:
+
+   
+   ```html
+   <!-- index.hml -->
+   <div class="container">
+       <text class="title">
+           Hello World
+       </text>
+   </div>
+   ```
+
+2. Add a button and bind the **onclick** method to this button.
+
+   On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
+
+   
+   ```html
+   <!-- index.hml -->
+   <div class="container">
+       <text class="title">
+           Hello World
+       </text>
+   
+   <!-- Add a button, set its value to Next, and bind the onclick method to the button. -->
+       <input class="btn" type="button" value="Next" onclick="onclick"></input>
+   </div>
+   ```
+
+3. Set the page style in the **index.css** file.
+
+   From the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
+
+   
+   ```css
+   /* index.css */
+   .container {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       left: 0px;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+   }
+   
+   .title {
+       font-size: 100px;
+       font-weight: bold;
+       text-align: center;
+       width: 100%;
+       margin: 10px;
+   }
+   
+   .btn {
+       font-size: 60px;
+       font-weight: bold;
+       text-align: center;
+       width: 40%;
+       height: 5%;
+       margin-top: 20px;
+   }
+   ```
+
+4. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
+
+   ![en-us_image_0000001311494592](figures/en-us_image_0000001311494592.png)
+
+
+## Building the Second Page
+
+1. Create the second page.
+
+   In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
+
+   ![en-us_image_0000001311334944](figures/en-us_image_0000001311334944.png)
+
+2. Add **\<Text>** and **\<Button>** components.
+
+   Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
+
+   
+   ```html
+   <!-- second.hml -->
+   <div class="container">
+       <text class="title">
+           Hi there
+       </text>
+   
+   <!-- Add a button, set the value to Back, and bind the back method to the button.-->
+       <input class="btn" type="button" value="Back" onclick="back"></input>
+   </div>
+   ```
+
+3. Set the page style. The sample code in the **second.css** file is shown below:
+   
+   ```css
+   /* second.css */
+   .container {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       left: 0px;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+   }
+   
+   .title {
+       font-size: 100px;
+       font-weight: bold;
+       text-align: center;
+       width: 100%;
+       margin: 10px;
+   }
+   
+   .btn {
+       font-size: 60px;
+       font-weight: bold;
+       text-align: center;
+       width: 40%;
+       height: 5%;
+       margin-top: 20px;
+   }
+   ```
+
+
+## Implementing Page Redirection
+
+You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
+
+1. Implement redirection from the first page to the second page.
+
+   In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
+
+   
+   ```js
+   // index.js
+   import router from '@ohos.router';
+   
+   export default {
+       onclick: function () {
+           router.push({
+               url: "pages/second/second"
+           })
+       }
+   }
+   ```
+
+2. Implement redirection from the second page to the first page.
+
+   In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
+
+   
+   ```js
+   // second.js
+   import router from '@ohos.router';
+   
+   export default {
+       back: function () {
+           router.back()
+       }
+   }
+   ```
+
+3. Open any file in the **index** folder and click ![en-us_image_0000001364174013](figures/en-us_image_0000001364174013.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
+
+   ![en-us_image_0000001311175132](figures/en-us_image_0000001311175132.png)
+
+
+## Running the Application on a Real Device
+
+1. Connect the development board running the OpenHarmony standard system to the computer.
+
+2. Choose **File** > **Project Structure...** > **Project** > **Signing Configs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
+
+   ![06](figures/06.png)
+
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494604](figures/en-us_image_0000001311494604.png). The display effect is shown in the figure below.
+
+   ![en-us_image_0000001363934589](figures/en-us_image_0000001363934589.png)
+
+Congratulations! You have finished developing your OpenHarmony application in JavaScript in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
diff --git a/en/application-dev/quick-start/start-with-js-low-code.md b/en/application-dev/quick-start/start-with-js-low-code.md
deleted file mode 100644
index ae92487ff92401b76b1f271ec760e18e713a51a6..0000000000000000000000000000000000000000
--- a/en/application-dev/quick-start/start-with-js-low-code.md
+++ /dev/null
@@ -1,178 +0,0 @@
-# Getting Started with JavaScript in the Low-Code Approach
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
->
-> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
-
-
-On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features.
-
-
-You can develop applications or services in the low-code approach using either of the following methods:
-
-
-- Create a project that supports low-code development. This method is used as an example in this topic.
-
-- In an existing project, create a Visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
-
-
-## Creating a Project That Supports Low-Code Development
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
->
-
-1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
-
-   ![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png)
-2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
-
-    ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)
-
-3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
-
-
-## Low-code Project Files
-
-After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below.
-
-![en-us_image_0000001223558810](figures/en-us_image_0000001223558810.png)
-
-- **entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages &gt; index &gt; index.js**: defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
-  
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** &gt; **MainAbility** &gt; **pages** &gt; **index**.
-  >
-- **entry &gt; src &gt; main &gt; supervisual &gt; MainAbility &gt; pages &gt; index &gt; index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
-
-
-## Building the First Page
-
-After the project synchronization is complete, the default first page contains the **Div** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch.
-
-Add **Div**, **Text**, and **Button** components to the first page.
-
-1. Delete the existing template components from the canvas.<a name= delete_origin_content></a>
-   
-
-   Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
-
-   ![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
-
-2. Add a **Div** component and set its styles and attributes.<a name = add_container></a>
-
-   Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260226691](figures/en-us_image_0000001260226691.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001215226858](figures/en-us_image_0000001215226858.png)**Flex**, set **FlexDirection** to **column** so that the main axis of the component is vertical, and set both **JustifyContent** and **AlignItems** to **center** so that the child components of the **Div** component are centered along the main axis and cross axis. Below is an illustration of the operations.
-
-   ![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
-
-3. Add a **Text** component.
-
-   Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215066868](figures/en-us_image_0000001215066868.png)**Properties** and set **Content** of the **Text** component to **Hello World**. Click ![en-us_image_0000001215386842](figures/en-us_image_0000001215386842.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-   ![en-us_image_0000001216446670](figures/en-us_image_0000001216446670.gif)
-
-4. Add a **Button** component.
-
-   Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260106745](figures/en-us_image_0000001260106745.png)**Properties** and set **Value** of the **Button** component to **Next**. Click ![en-us_image_0000001259866741](figures/en-us_image_0000001259866741.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-   ![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.gif)
-
-5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 
-
-   Below is how the first page looks on the Previewer.
-
-   ![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png)
-
-
-## Building the Second Page
-
-1. Create the second page.
-   
-   In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **JS Visual**, as shown below, name the page **second**, and click **Finish**.
-
-   <img src="figures/en-us_image_202206250937.png" alt="create-newVisual" style="zoom: 67%;" />
-
-   Below, you can see the structure of the **pages** folder.
-   
-   ![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
-   
-2. [Delete the existing template components from the canvas.](#delete_origin_content)
-
-3. [Add a Div component and set its styles and attributes.](#add_container)
-
-4. Add a **Text** component.
-
-   Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001260227453](figures/en-us_image_0000001260227453.png)**Properties** and set **Content** of the **Text** component to **Hi there**. Click ![en-us_image_0000001260107497](figures/en-us_image_0000001260107497.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-   ![en-us_image_0000001216614132](figures/en-us_image_0000001216614132.gif)
-
-5. Add a **Button** component.
-
-   Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001215227618](figures/en-us_image_0000001215227618.png)**Properties** and set **Value** of the **Button** component to **Back**. Click ![en-us_image_0000001259987441](figures/en-us_image_0000001259987441.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
-
-   ![en-us_image_0000001261017331](figures/en-us_image_0000001261017331.gif)
-
-
-## Implementing Page Redirection
-
-You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
-
-1. Implement redirection from the first page to the second page.
-   
-   In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .js and .visual files.
-   
-   - In the **index.js** file:
-     
-     ```js
-     import router from '@ohos.router';  
-     
-     export default {     
-         onclick() {         
-             router.push({             
-                 url:'pages/second/second', // Specify the page to be redirected to.
-             })     
-         } 
-     }
-     ```
-   
-   - In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388136](figures/en-us_image_0000001215388136.png)**Events** and set **Click** to **onclick**.
-   
-       ![en-us_image_0000001223722586](figures/en-us_image_0000001223722586.png)
-   
-2. Implement redirection from the second page to the first page.
-
-   In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page.
-
-   This operation needs to be completed in both .js and .visual files.
-
-   - In the **second.js** file:
-     
-      ```js
-      import router from '@ohos.router';  
-      
-      export default {     
-          back() {         
-              router.back()     
-          } 
-      }
-      ```
-   - In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.
-
-     ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)
-
-3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect.
-
-   ![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png)
-
-
-## Running the Application on a Real Device
-
-1. Connect the development board running the OpenHarmony standard system to the computer.
-
-2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
-
-   ![en-us_image_0000001268283201](figures/en-us_image_0000001268283201.png)
-
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below.
-
-   ![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png)
-
-Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
diff --git a/en/application-dev/quick-start/start-with-js.md b/en/application-dev/quick-start/start-with-js.md
deleted file mode 100644
index 7cfc53af2b98dc01d9b8f6cf240e7a712538a911..0000000000000000000000000000000000000000
--- a/en/application-dev/quick-start/start-with-js.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Getting Started with JavaScript in the Traditional Coding Approach
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
->
-
-
-## Creating a JavaScript Project
-
-1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
-
-   ![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png)
-
-2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters.
-
-   ![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.png)
-
-3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
-
-
-## JavaScript Project Files
-
-- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-  - **src &gt; main &gt; js**: a collection of JS source code.
-  - **src &gt; main &gt; js &gt; MainAbility**: entry to your application/service.
-  - **src &gt; main &gt; js &gt; MainAbility &gt; i18n**: resources in different languages, for example, UI strings and image paths.
-  - **src &gt; main &gt; js &gt; MainAbility &gt; pages**: pages contained in **MainAbility**.
-  - **src &gt; main &gt; js &gt; MainAbility &gt; app.js**: ability lifecycle file.
-  - **src &gt; main &gt; resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-  - **src &gt; main &gt; config.json**: 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.
-  - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
-  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-- **build-profile.json5**: application-level configuration information, including the signature and product configuration.
-- **hvigorfile.js**: application-level compilation and build task script.
-
-
-## Building the First Page
-
-1. Use the **Text** component.
-   
-   After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.hml** file is shown below:
-
-
-   ```html
-   <!--index.hml-->
-   <div class="container">
-       <text class="title">
-           Hello World
-       </text>
-   </div>
-   ```
-
-2. Add a button and bind the **onclick** method to this button.
-
-   On the default page, add an **&lt;input&gt;** component of the button type to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
-
-
-   ```html
-   <!--index.hml-->
-   <div class="container">
-       <text class="title">
-           Hello World
-       </text>
-   
-   <!-- Add a button, set its value to Next, and bind the onclick method to the button. -->
-       <input class="btn" type="button" value="Next" onclick="onclick"></input>
-   </div>
-   ```
-
-3. Set the page style in the **index.css** file.
-
-   From the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
-
-
-   ```css
-   .container {
-       display: flex;
-       flex-direction: column;
-       justify-content: center;
-       align-items: center;
-       left: 0px;
-       top: 0px;
-       width: 100%;
-       height: 100%;
-   }
-   
-   .title {
-       font-size: 100px;
-       font-weight: bold;
-       text-align: center;
-       width: 100%;
-       margin: 10px;
-   }
-   
-   .btn {
-       font-size: 60px;
-       font-weight: bold;
-       text-align: center;
-       width: 40%;
-       height: 5%;
-       margin-top: 20px;
-   }
-   ```
-
-4. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 
-
-   Below is how the first page looks on the Previewer.
-
-   ![en-us_image_0000001216084724](figures/en-us_image_0000001216084724.png)
-
-
-## Building the Second Page
-
-1. Create the second page.
-   
-   In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **second** folder.
-
-![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png)
-
-2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
-
-   Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
-
-
-   ```html
-   <!--second.hml-->
-   <div class="container">
-       <text class="title">
-           Hi there
-       </text>
-   
-   <!-- Add a button, set the value to Back, and bind the back method to the button.-->
-       <input class="btn" type="button" value="Back" onclick="back"></input>
-   </div>
-   ```
-
-3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below:
-
-   ```css
-   .container {
-       display: flex;
-       flex-direction: column;
-       justify-content: center;
-       align-items: center;
-       left: 0px;
-       top: 0px;
-       width: 100%;
-       height: 100%;
-   }
-   
-   .title {
-       font-size: 100px;
-       font-weight: bold;
-       text-align: center;
-       width: 100%;
-       margin: 10px;
-   }
-   
-   .btn {
-       font-size: 60px;
-       font-weight: bold;
-       text-align: center;
-       width: 40%;
-       height: 5%;
-       margin-top: 20px;
-   }
-   ```
-
-
-## Implementing Page Redirection
-
-You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
-
-1. Implement redirection from the first page to the second page.
-   
-   In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
-
-
-   ```js
-   // index.js
-   import router from '@ohos.router';
-   
-   export default {
-       onclick: function () {
-           router.push({
-               url: "pages/second/second"
-           })
-       }
-   }
-   ```
-
-2. Implement redirection from the second page to the first page.
-
-   In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
-
-
-   ```js
-   // second.js
-   import router from '@ohos.router';
-   
-   export default {
-       back: function () {
-           router.back()
-       }
-   }
-   ```
-
-3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect.
-
-   ![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png)
-
-
-## Running the Application on a Real Device
-
-1. Connect the development board running the OpenHarmony standard system to the computer.
-
-2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
-
-   ![en-us_image_0000001223557290](figures/en-us_image_0000001223557290.png)
-
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below.
-
-   ![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png)
-
-Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
index 15cbc7066707a773f3cbc0ecd5c970eb46d1b249..b1ddec221aa2d0719a3318fbef56e824eca18c57 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
@@ -5,7 +5,7 @@
 > **NOTE**
 > - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 > 
-> - The APIs provided by this module are system APIs.
+> - The APIs provided by this component are system APIs.
 
 
 ## Required Permissions
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
index 3a90aab90084be24746bba23aa9b224b15b2b99f..b91476d6a6e485f6521f52335259233fdcbea967 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
@@ -1,9 +1,10 @@
 # XComponent
 
   > **NOTE**<br>
+
   > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-  The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
+  The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
 
 ## Required Permissions
 
@@ -17,22 +18,34 @@
 
   XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
 
-  - Name
-
-    | Name        | Type                                    | Mandatory | Description                                                        |
-    | ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ |
-    | id          | string                                        | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.                   |
-    | type        | string                                        | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components. |
-    | libraryname | string                                        | No  | Name of the dynamic library generated after compilation at the application native layer. |
-    | controller  | [XComponentController](#XComponentController) | No  | Controller bound to the component, which can be used to invoke methods of the component.              |
+**Parameters**
 
+| Name      | Type    | Mandatory  | Description   |
+| --------- | ------ | ---- | ----- |
+| id  | string | Yes   | Unique ID of the component. The value can contain a maximum of 128 characters.|
+| type      | string | Yes   |  Type of the component. The options are as follows:<br>-**surface**: The content of this component is displayed individually, without being combined with that of other components.<br>-**component**: The content of this component is displayed after having been combined with that of other components.|
+| libraryname | string | No   | Name of the dynamic library generated after compilation at the application native layer.|
+| controller   | [XComponentcontroller](#xcomponentcontroller) | No   | Controller bound to the component, which can be used to invoke methods of the component.|
 
 ## Events
 
-| Name                            | Description              |
-| ------------------------------- | ------------------------ |
-| onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
-| onDestroy() => void              | Triggered when the plug-in is destroyed. |
+### onLoad
+
+onLoad(callback: (event?: object) => void )
+
+Triggered when the plug-in is loaded.
+
+**Parameters**
+
+| Name          | Type  | Mandatory | Description                     |
+| ------------- | ------ | ---- | ----------------------- |
+| event  | object |   No | Context of the **\<XComponent>** object. The APIs contained in the context are defined at the C++ layer by developers.|
+
+### onDestroy
+
+onDestroy(event: () => void )
+
+Triggered when the plug-in is destroyed.
 
 ## XComponentController
 
@@ -50,11 +63,13 @@ getXComponentSurfaceId(): string
 
 Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces, such as camera-related interfaces.
 
-  - Return value
+**System API**: This is a system API.
 
-    | Type   | Description                 |
-    | ------ | --------------------------- |
-    | string | ID of the surface held by the **\<XComponent>**. |
+**Return value**
+
+| Type    | Description                     |
+| ------ | ----------------------- |
+| string | ID of the surface held by the **\<XComponent>**.|
 
 ### setXComponentSurfaceSize
 
@@ -62,12 +77,14 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
 
 Sets the width and height of the surface held by the **\<XComponent>**.
 
-- Parameters
+**System API**: This is a system API.
+
+**Parameters**
 
-  | Name       | Type | Mandatory | Default Value | Description              |
-  | ------------- | -------- | ---- | ------ | ----------------------------- |
-  | surfaceWidth  | number   | Yes  | -      | Width of the surface held by the **\<XComponent>**. |
-  | surfaceHeight | number   | Yes  | -      | Height of the surface held by the **\<XComponent>**. |
+| Name          | Type  | Mandatory | Description                     |
+| ------------- | ------ | ---- | ----------------------- |
+| surfaceWidth  | number | Yes   | Width of the surface held by the **\<XComponent>**.|
+| surfaceHeight | number | Yes   | Height of the surface held by the **\<XComponent>**.|
 
 ### getXComponentContext
 
@@ -75,15 +92,16 @@ getXComponentContext(): Object
 
 Obtains the context of an **\<XComponent>** object.
 
-- Return value
+**Return value**
 
-  | Type  | Description                                                        |
-  | ------ | ------------------------------------------------------------ |
-  | Object | Context of an **\<XComponent>** object. The APIs contained in the context are defined by developers. |
+| Type    | Description                                      |
+| ------ | ---------------------------------------- |
+| Object | Context of the **\<XComponent>** object. The APIs contained in the context are defined by developers.|
 
 ## Example
 
-Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
+Provide a surface-type **\<XComponent>** to support capabilities such as camera preview. 
+You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
 
 ```ts
 // xxx.ets