diff --git a/zh-cn/application-dev/application-dev-website.md b/zh-cn/application-dev/application-dev-website.md
index 4461ca4115f1aced667f5b676395898af362a826..09e13ac43c52e5eff927b176af8037ffceece574 100644
--- a/zh-cn/application-dev/application-dev-website.md
+++ b/zh-cn/application-dev/application-dev-website.md
@@ -79,7 +79,7 @@
           - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
           - [Path2D对象](ui/ui-js-components-path2d.md)
           - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui/ui-js-components-calendar.md)
+        - [栅格布局](ui/ui-js-components-grid.md)
         - Svg开发指导
           - [基础知识](ui/ui-js-components-svg-overview.md)
           - [绘制图形](ui/ui-js-components-svg-graphics.md)
diff --git a/zh-cn/application-dev/background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md b/zh-cn/application-dev/background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md
index 354cf1f372dbbc825a03e30ad2163b98eef427e6..1d2b7047deaad669506f67a6561482b415c8281a 100644
--- a/zh-cn/application-dev/background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md
+++ b/zh-cn/application-dev/background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md
@@ -139,8 +139,12 @@ interface LocalDateTime：时间信息实例
 1. 定义一个倒计时实例
    ```
    import reminderAgent from '@ohos.reminderAgent';
-   import notification from '@ohos.notification';export default {
-       timer: {
+   import notification from '@ohos.notification';
+   export default {
+       // JS工程写法：
+       // timer: {
+       // eTS工程写法：
+       let timer : reminderAgent.ReminderRequestTimer = {
            reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER,
            triggerTimeInSeconds: 10,
            actionButton: [
@@ -186,7 +190,10 @@ interface LocalDateTime：时间信息实例
 日历实例定义：
 
 ```
-calendar: {
+// JS工程写法：
+// calendar: {
+// eTS工程写法：
+let calendar : reminderAgent.ReminderRequestCalendar = {
     reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR,
     dateTime: {
         year: 2050,
@@ -231,7 +238,10 @@ calendar: {
 闹钟实例定义：
 
 ```
-alarm: {
+// JS工程写法：
+// alarm: {
+// eTS工程写法：
+let alarm : reminderAgent.ReminderRequestAlarm = {
     reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
     hour: 11,
     minute: 14,
@@ -265,3 +275,11 @@ alarm: {
     slotType: notification.SlotType.SOCIAL_COMMUNICATION
 }
 ```
+
+
+## 相关实例
+
+基于后台代理提醒开发，有以下相关实例可供参考：
+
+- [`AlarmClock`：后台代理提醒（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/Notification/AlarmClock)
+
diff --git a/zh-cn/application-dev/background-task-management/Readme-CN.md b/zh-cn/application-dev/background-task-management/Readme-CN.md
index 36178f390b77fbf8b4ed9abd5309c450f0fed3eb..509366d9f7b9d1cdb06e2e6f6ca7dd012ced70e8 100644
--- a/zh-cn/application-dev/background-task-management/Readme-CN.md
+++ b/zh-cn/application-dev/background-task-management/Readme-CN.md
@@ -1,5 +1,4 @@
 # 后台任务管理
 
-- 后台任务
   - [后台任务概述](background-task-overview.md)
   - [后台任务开发指导](background-task-dev-guide.md)
\ No newline at end of file
diff --git a/zh-cn/application-dev/internationalization/intl-guidelines.md b/zh-cn/application-dev/internationalization/intl-guidelines.md
index 7f6b0a9f3535b0d5548bd2d522900df0a676a368..9cfee22889379c88237d33d143061dbf19f49dd2 100644
--- a/zh-cn/application-dev/internationalization/intl-guidelines.md
+++ b/zh-cn/application-dev/internationalization/intl-guidelines.md
@@ -300,3 +300,9 @@
    ```
    var options = numberFormat.resolvedOptions();
    ```
+
+## 相关实例
+
+针对Intl开发，有以下相关实例可供参考：
+
+-[`International`：国际化（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/International)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md
index 2666626e9ce1b4dcbd7201faa3814e31925f5e8f..96ecee545b855d4247dae7ff15608cca6a327744 100755
--- a/zh-cn/application-dev/ui/Readme-CN.md
+++ b/zh-cn/application-dev/ui/Readme-CN.md
@@ -55,7 +55,7 @@
             - [CanvasRenderingContext2D对象](ui-js-components-canvasrenderingcontext2d.md)
             - [Path2D对象](ui-js-components-path2d.md)
             - [OffscreenCanvas对象](ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui-js-components-calendar.md)
+        - [栅格布局](ui-js-components-grid.md)
         - Svg开发指导
             - [基础知识](ui-js-components-svg-overview.md)
             - [绘制图形](ui-js-components-svg-graphics.md)
diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-application-resource-access.md
index 27e56e038475a4e80283d6086c98eb2f8f9af846..e97c3ab46e5201eba0b22d53e390019be97d1ec7 100644
--- a/zh-cn/application-dev/ui/ts-application-resource-access.md
+++ b/zh-cn/application-dev/ui/ts-application-resource-access.md
@@ -162,3 +162,10 @@ Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
 
 Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
 ```
+
+
+## 相关实例
+
+针对访问应用资源，有以下相关实例可供参考：
+
+- [`ResourceManager`：资源管理器（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)
diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
index 68a243be960929addf51dadd0f0c8a102c11999b..c293ca9b6a00b0eb11f0fa65220b0041525a450d 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
@@ -83,4 +83,11 @@
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
 
-![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
\ No newline at end of file
+![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
+
+
+## 相关实例
+
+针对background-position样式动画开发，有以下相关实例可供参考：
+
+- [`JsImage`：基本动画（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md
index 7f1b5f194090db2b67e9874181b58ae71c0dc760..0a062acc8680b127fa23bcaad09c8839a5696702 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-transform.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md
@@ -574,3 +574,18 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
 > - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
 > 
 > - transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
+
+
+## 相关实例
+
+针对transform样式动画开发，有以下相关实例可供参考：
+
+- [`JsAnimation`：动效示例应用（JS）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
+
+- [`JsAnimationStyle`：动画与自定义字体（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
+
+- [`Clock`：时钟（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
+
+- [动画样式（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
+
+- [图片常见操作](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageJsDemo)
diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-component.md b/zh-cn/application-dev/ui/ui-js-building-ui-component.md
index 454dbfc4d62182fc56c96b3919b8f964197be053..e9650af37314da5249206dfb766e9bc75e575432 100755
--- a/zh-cn/application-dev/ui/ui-js-building-ui-component.md
+++ b/zh-cn/application-dev/ui/ui-js-building-ui-component.md
@@ -18,3 +18,27 @@
 | 画布组件 | canvas |
 | 栅格组件 | grid-container、grid-row、grid-col |
 | svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform |
+
+
+
+## 相关实例
+
+针对组件开发，有以下相关实例可供参考：
+
+- [`JsPanel`：内容展示面板（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
+
+- [`Popup`：气泡（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
+
+- [`RefreshContainer`：下拉刷新容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
+
+- [`JSComponments`：Js组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
+
+- [`JsUserRegistration`：用户注册（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
+
+- [`ECG`：心率检测（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
+
+- [`Badge`：事件标记控件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
+
+- [rating（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
+
+- [简易视频播放器](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md
index a59b394a7a902f74cbdd6775418f68f22f970d5f..93d3eecda18e5b38b75095ea133c73bc0442e2a9 100644
--- a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md
+++ b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md
@@ -83,3 +83,10 @@ export default {
 运行效果如下图所示：
 
 ![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png)
+
+
+## 相关实例
+
+针对页面路由开发，有以下相关实例可供参考：
+
+- [`JsRouter`：页面路由（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md
index 58a13fb849fb5f16fff83a7464234efb799f3be2..2a71638ee0828780b6623bf15823ca910e4e8f73 100644
--- a/zh-cn/application-dev/ui/ui-js-component-tabs.md
+++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md
@@ -307,4 +307,11 @@ export default {
 }
 ```
 
-![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
\ No newline at end of file
+![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
+
+
+## 相关实例
+
+针对Tabs开发，有以下相关实例可供参考：
+
+- [`Tabs`：页签容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md
index af17ad1a6e310f59778272bb3dfd044a7fcbf775..a719fafcbe6836dbcc3ad784509e1e0d68ad05b5 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvas.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md
@@ -139,3 +139,9 @@ export default {
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 画布不支持在onInit和onReady中进行创建。
+
+## 相关实例
+
+针对Canvas开发，有以下相关实例可供参考：
+
+- [`JsCanvas`：画布组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)
diff --git a/zh-cn/application-dev/ui/ui-js-components-chart.md b/zh-cn/application-dev/ui/ui-js-components-chart.md
index b4b6434aa362e39bcf9a214c85fb61033340e990..643471aa767b543ecf99f2289dd8ef6db81a33bb 100644
--- a/zh-cn/application-dev/ui/ui-js-components-chart.md
+++ b/zh-cn/application-dev/ui/ui-js-components-chart.md
@@ -612,3 +612,13 @@ export default {
 ```
 
 ![zh-cn_image_0000001179018876](figures/zh-cn_image_0000001179018876.gif)
+
+
+
+## 相关实例
+
+针对Chart开发，有以下相关实例可供参考：
+
+- [`Chart`：图表组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
+
+- [chart（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication)
diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md
index 09f8cbdce8580e609d374db9af5777e6500c0f65..f1374aa3c0d8818de784e9bb6846e18599aa6eb4 100644
--- a/zh-cn/application-dev/ui/ui-js-components-dialog.md
+++ b/zh-cn/application-dev/ui/ui-js-components-dialog.md
@@ -319,3 +319,12 @@ export default {
 
 
 ![zh-cn_image_0000001234329527](figures/zh-cn_image_0000001234329527.gif)
+
+
+## 相关实例
+
+针对Dialog开发，有以下相关实例可供参考：
+
+- [`JsDialog`：页面弹窗（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
+
+- [dialog（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
diff --git a/zh-cn/application-dev/ui/ui-js-components-calendar.md b/zh-cn/application-dev/ui/ui-js-components-grid.md
similarity index 97%
rename from zh-cn/application-dev/ui/ui-js-components-calendar.md
rename to zh-cn/application-dev/ui/ui-js-components-grid.md
index 20af9fa3f481b7435d78910519571c4257234f05..df6ac362e27ccc48685834c47b544d60b45779a5 100644
--- a/zh-cn/application-dev/ui/ui-js-components-calendar.md
+++ b/zh-cn/application-dev/ui/ui-js-components-grid.md
@@ -242,3 +242,10 @@ export default {
 
 
 ![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)
+
+
+## 相关实例
+
+针对Grid开发，有以下相关实例可供参考：
+
+- [`JsGrid`：栅格组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
diff --git a/zh-cn/application-dev/ui/ui-js-components-image-animator.md b/zh-cn/application-dev/ui/ui-js-components-image-animator.md
index ca6bc45b5641850fa229a2991dbe548054558ba9..e9fe87f31f9e5127eee4aea5eca80222b31e06f9 100644
--- a/zh-cn/application-dev/ui/ui-js-components-image-animator.md
+++ b/zh-cn/application-dev/ui/ui-js-components-image-animator.md
@@ -333,3 +333,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001218758816](figures/zh-cn_image_0000001218758816.gif)
+
+
+## 相关实例
+
+针对Image-animator开发，有以下相关实例可供参考：
+
+- [image、image-animator（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md
index 6fc1087bff0193efc21d2ab17ff60f1b86a0c2c7..b7f9d9fb580e6998ef43c5232d6a2fb1669e9c3d 100644
--- a/zh-cn/application-dev/ui/ui-js-components-images.md
+++ b/zh-cn/application-dev/ui/ui-js-components-images.md
@@ -203,3 +203,11 @@ export default {
 ```
 
 ![zh-cn_image_0000001188771430](figures/zh-cn_image_0000001188771430.gif)
+
+## 相关实例
+
+针对Image开发，有以下相关实例可供参考：
+
+- [image、image-animator（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
+
+- [图片编辑模板](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md
index d697e7964b575409db4f1509208013248da7ebda..a94be316352c467acc2c81c25e56cc7b05f01681 100644
--- a/zh-cn/application-dev/ui/ui-js-components-input.md
+++ b/zh-cn/application-dev/ui/ui-js-components-input.md
@@ -312,3 +312,10 @@ export default {
 
 
 ![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
+
+
+## 相关实例
+
+针对Input开发，有以下相关实例可供参考：
+
+- [input、label（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication)
diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md
index 7590c03f05b34e9ec06e5d803d7f052960700b92..ddd7128a8a970c9f42902e9d594fe5c089fddd1f 100644
--- a/zh-cn/application-dev/ui/ui-js-components-list.md
+++ b/zh-cn/application-dev/ui/ui-js-components-list.md
@@ -308,3 +308,10 @@ export default {
 
 
 ![zh-cn_image_0000001234287779](figures/zh-cn_image_0000001234287779.gif)
+
+
+## 相关实例
+
+针对List开发，有以下相关实例可供参考：
+
+- [`JsList`：商品列表（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md
index 0ea286c5d05009fa0c147059a3ae069a8e823d23..e1d1d693887526c59f7c7d34277329a3bc3679fb 100644
--- a/zh-cn/application-dev/ui/ui-js-components-menu.md
+++ b/zh-cn/application-dev/ui/ui-js-components-menu.md
@@ -278,3 +278,9 @@ export default {
 ```
 
 ![zh-cn_image_0000001226815403](figures/zh-cn_image_0000001226815403.gif)
+
+## 相关实例
+
+针对Menu开发，有以下相关实例可供参考：
+
+- [`JSMenu`：菜单（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu)
diff --git a/zh-cn/application-dev/ui/ui-js-components-picker.md b/zh-cn/application-dev/ui/ui-js-components-picker.md
index f719c39b8f6bb18942f7273634da68df34c7948b..320db095a4801cadf7cf2542d6768cb6f9a04920 100644
--- a/zh-cn/application-dev/ui/ui-js-components-picker.md
+++ b/zh-cn/application-dev/ui/ui-js-components-picker.md
@@ -295,3 +295,10 @@ export default {
 
 
 ![zh-cn_image_0000001234342189](figures/zh-cn_image_0000001234342189.gif)
+
+
+## 相关实例
+
+针对Picker开发，有以下相关实例可供参考：
+
+- [`Picker`：滑动选择器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker)
diff --git a/zh-cn/application-dev/ui/ui-js-components-slider.md b/zh-cn/application-dev/ui/ui-js-components-slider.md
index 20d4e775e81d5bc5034bb90069729e103e27f927..a3d20f27f76a3863bda59d73817fc5bdc9cad37c 100644
--- a/zh-cn/application-dev/ui/ui-js-components-slider.md
+++ b/zh-cn/application-dev/ui/ui-js-components-slider.md
@@ -211,3 +211,12 @@ export default{
 ```
 
 ![zh-cn_image_0000001263038799](figures/zh-cn_image_0000001263038799.gif)
+
+
+## 相关实例
+
+针对Slider开发，有以下相关实例可供参考：
+
+- [`Slider`：滑动条（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider)
+
+- [slider（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md
index 08c4a02e95f68ff02fcc586f8802725a8bcfcbb3..9aa36109849562e9902a7158d8b02acf72243fb6 100644
--- a/zh-cn/application-dev/ui/ui-js-components-stepper.md
+++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md
@@ -401,3 +401,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif)
+
+
+## 相关实例
+
+针对Stepper开发，有以下相关实例可供参考：
+
+- [`StepNavigator`：步骤导航器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-overview.md b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md
index 141ca67c4f93b7f6eae1e42c9a3293e2db17f363..34a0b1ef4e4b6962cb7f2e01fe1a8d14a16e7b0a 100644
--- a/zh-cn/application-dev/ui/ui-js-components-svg-overview.md
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md
@@ -78,3 +78,10 @@ svg{
 > - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。
 > 
 > - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
+
+
+## 相关实例
+
+针对Svg开发，有以下相关实例可供参考：
+
+- [`JsSvg`：可缩放矢量图形（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg)
diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md
index d318cf8ad7d7a163bab318556723d9cf30410c7a..e4c539292598a383fec8aa029f604c5f94dfaa96 100644
--- a/zh-cn/application-dev/ui/ui-js-components-swiper.md
+++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md
@@ -363,3 +363,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif)
+
+
+## 相关实例
+
+针对Swiper开发，有以下相关实例可供参考：
+
+- [`Swiper`：内容滑动容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md
index 0da0022df394f1a709d2eb687d6bbf8819bfdc66..091d3507356076328dad2794aa539135ed324d40 100644
--- a/zh-cn/application-dev/ui/ui-js-components-text.md
+++ b/zh-cn/application-dev/ui/ui-js-components-text.md
@@ -270,3 +270,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif)
+
+
+## 相关实例
+
+针对Text开发，有以下相关实例可供参考：
+
+- [`JsTextComponents`：基础组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md
index 09f8c17ff06b5d686d2367da9eb3014b70bac79f..7b005260d0c6d40837096e6d32fb06458ca0b5a0 100644
--- a/zh-cn/application-dev/ui/ui-js-components-toolbar.md
+++ b/zh-cn/application-dev/ui/ui-js-components-toolbar.md
@@ -229,3 +229,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)
+
+
+## 相关实例
+
+针对Toolbar开发，有以下相关实例可供参考：
+
+- [`Toolbar`：工具栏（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar)
diff --git a/zh-cn/application-dev/ui/ui-js-custom-components.md b/zh-cn/application-dev/ui/ui-js-custom-components.md
index 2a81303e8141fdc82f8f42d2055b25edc37adef9..b8b4e91d48990c467fb7a1a2692cd6e129623527 100755
--- a/zh-cn/application-dev/ui/ui-js-custom-components.md
+++ b/zh-cn/application-dev/ui/ui-js-custom-components.md
@@ -3,7 +3,7 @@
 使用基于JS扩展的类Web开发范式的方舟开发框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。具体的封装方法示例如下：
 
 
-- **构建自定义组件**
+- 构建自定义组件
   ```
   <!-- comp.hml -->
    <div class="item"> 
@@ -58,7 +58,7 @@
    }
   ```
 
-- **引入自定义组件**
+- 引入自定义组件
   ```
   <!-- xxx.hml -->
    <element name='comp' src='../../common/component/comp.hml'></element> 
@@ -97,3 +97,12 @@
 
 **图1** 自定义组件的效果
 ![zh-cn_image_0000001070693737](figures/zh-cn_image_0000001070693737.png)
+
+
+## 相关实例
+
+针对自定义组件开发，有以下相关实例可供参考：
+
+- [`JSUICustomComponent`：自定义组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSUICustomComponent)
+
+- [自定义组件（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponet)
diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md
index 7bb87d87b265f6c0f4646ad0e63d3651ecb8d1bd..d9bfc10cb4fcbe5de9939ed021c15416640c077f 100755
--- a/zh-cn/application-dev/ui/ui-js-overview.md
+++ b/zh-cn/application-dev/ui/ui-js-overview.md
@@ -26,3 +26,28 @@
 - **Porting Layer**
 
   适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。
+
+
+## 相关实例
+
+基于JS扩展的类Web开发范式的方舟开发框架，有以下相关实例可供参考：
+
+- [`AtomicLayout`：原子布局（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/AtomicLayout)
+
+- [`JsFA`：FA示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsFA)
+
+- [`JsShopping`：购物示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsShopping)
+
+- [`Stack`：堆叠容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Stack)
+
+- [`JsAdaptivePortalList`：多设备自适应的效率型首页（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalList)
+
+- [`JsAdaptivePortalPage`：多设备自适应的FA页面（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalPage)
+
+- [`JsGallery`：图库示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGallery)
+
+- [`AirQuality`：空气质量（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/AirQuality)
+
+- [`Badge`：事件标记控件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
+
+- [购物应用（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingOpenHarmony)
diff --git a/zh-cn/application-dev/ui/ui-ts-components-web.md b/zh-cn/application-dev/ui/ui-ts-components-web.md
index 491801a0129fc10403b69fc90e2045a4f6801309..7ab3f2cd2fe8ee0be7286b9600401665c31ba989 100644
--- a/zh-cn/application-dev/ui/ui-ts-components-web.md
+++ b/zh-cn/application-dev/ui/ui-ts-components-web.md
@@ -193,3 +193,9 @@ struct WebComponent {
   </body>
   </html>
   ```
+
+## 相关实例
+
+针对Web开发，有以下相关实例可供参考：
+
+- [`Web`：ArkUI-Web（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
index 17911df5d9ef67a6fec7477aa57833a476bfa07a..67b9d1bf772478626c845ffcce51ad3a43081a48 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
@@ -368,3 +368,10 @@ struct FlexExample {
 
 
 ![zh-cn_image_0000001261605867](figures/zh-cn_image_0000001261605867.png)
+
+
+## 相关实例
+
+针对弹性布局开发，有以下相关实例可供参考：
+
+- [弹性布局（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
index ab7a1af81cfe8941f905b63ed9cad638a66ad77f..2bbcf5679d0b4aaa1c9e93c1c39641191da1df4f 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
@@ -147,3 +147,10 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
 
 非横屏下文本内容为Portrait，颜色为#DB7093。<br/>
 ![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png)
+
+## 相关实例
+
+针对媒体查询开发，有以下相关实例可供参考：
+
+- [`MediaQuery`：Ets媒体查询（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
+
diff --git a/zh-cn/application-dev/ui/ui-ts-overview.md b/zh-cn/application-dev/ui/ui-ts-overview.md
index 1b2d23da3af31a98e56a123a6ab0646ed778fefb..a067840c02502efc994a9e65f6d4997fa26a1041 100644
--- a/zh-cn/application-dev/ui/ui-ts-overview.md
+++ b/zh-cn/application-dev/ui/ui-ts-overview.md
@@ -53,3 +53,32 @@
 - **平台适配层**
 
   提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。
+
+
+## 相关实例
+
+基于TS扩展的声明式开发范式的方舟开发框架，有以下相关实例可供参考：
+
+- [`Canvas`：画布组件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Canvas)
+
+- [`Drag`：ArkUI-拖拽事件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Drag)
+
+- [`ArkUIAnimation`：Ets动画（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/ArkUIAnimation)
+
+- [`Xcomponent`：ArkUI-XComponent（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent)
+
+- [`MouseEvent`：ArkUI-鼠标事件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MouseEvent)
+
+- [极简声明式UI范式（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts)
+
+- [购物应用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts)
+
+- [转场动画的使用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimtaionEts)
+
+- [基础组件Slider的使用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderApplicationEts)
+
+- [弹窗（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts)
+
+- [一次开发多端部署（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultiDeploymentEts)
+
+- [CustomComponent:组件化（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/CustomComponent)
\ No newline at end of file
diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md
index 4461ca4115f1aced667f5b676395898af362a826..09e13ac43c52e5eff927b176af8037ffceece574 100644
--- a/zh-cn/application-dev/website.md
+++ b/zh-cn/application-dev/website.md
@@ -79,7 +79,7 @@
           - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
           - [Path2D对象](ui/ui-js-components-path2d.md)
           - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui/ui-js-components-calendar.md)
+        - [栅格布局](ui/ui-js-components-grid.md)
         - Svg开发指导
           - [基础知识](ui/ui-js-components-svg-overview.md)
           - [绘制图形](ui/ui-js-components-svg-graphics.md)