Module-tutorial

Author: harshilp24

website/docs/packages/reference/ui-module-instance.md

@@ -29,7 +29,7 @@ Inputs enable you to dynamically populate widget properties, run queries, or exe
 You can bind static values, widget outputs, query results, or app/user data into Inputs using JavaScript bindings.
 
 
-If you want to pass customer details fetched from a query into the module, you can set Inputs using the query response fields.
+*Example:* If you want to pass customer details fetched from a query into the module, you can set Inputs using the query response fields.
 
 ```js
 //inputCustomerName

website/docs/packages/reference/ui-module.md

@@ -19,7 +19,7 @@ Content properties control the functional behavior of the UI Module container an
 
 
 Inputs allow you to pass dynamic values from the application into the UI Module.
-They act as a bridge between the app and the widgets, queries, or JavaScript logic inside the module.
+They act as a bridge between the app and the widgets, queries, or JS logic inside the module.
 
 You can create multiple Inputs when designing the module. Each Input has:
 
@@ -31,7 +31,7 @@ Inputs help you dynamically configure the behavior of widgets inside the UI Modu
 
 **Accessing Inputs**
 
-Inputs are accessed using the same syntax across widgets, queries, and JavaScript functions inside the module:
+Inputs can be accessed using the same syntax across widgets, queries, and JavaScript functions within the module:
 
 ```javascript
 {{inputs.inputName}}
@@ -90,15 +90,15 @@ Controls whether a loading animation appears while the UI Module's widgets, quer
 ### Style Properties
 
 Style properties control the appearance of the UI Module container, including background, border, and shadow settings.
-Some style properties are also JavaScript configurable and can accept dynamic values through Inputs.
+Some style properties are also JS configurable and can accept dynamic values through Inputs.
 
 #### Background Color `string`
 
 <dd> 
 
 Sets the background color of the UI Module container. You can define a static color value or bind a dynamic color using JavaScript expressions.
 
-Background Color is JavaScript configurable and can also be dynamically controlled by passing a color value through an **Input**.
+Background Color is JS configurable and can also be dynamically controlled by passing a color value through an **Input**.
 
 
 </dd>

website/docs/packages/tutorial/ui-module.md

@@ -1,18 +1,18 @@
-# UI Module 
+# UI Modules
 
-
-A UI Module is a reusable, self-contained component built using widgets, queries, and JS Objects.
-It enables you to package visual elements, business logic, and data integrations into a module that can be easily reused across applications.
+A UI Module is a reusable, self-contained component built using widgets, queries, and JS Objects. It allows you to group UI elements, logic, and data interactions into a single unit that can be reused across multiple applications.
 
 In this tutorial, you will learn how to create a reusable UI Module that accepts dynamic inputs from an application.
 
 
-:::tip What will I learn? 📝
-In this tutorial, you will create a reusable **User Profile Card** UI Module that displays basic user details dynamically.
+:::tip What will I build? 🧩
+You’ll build a **User Profile Card** UI Module that displays user details like name, email, and profile photo based on values passed from the app.
+
+- **Basics**: Learn how to create and configure a UI Module.
+- **Dynamic Data**: Learn how to pass data from an application into the UI Module.
+- **Reusability**: Learn how to reuse the UI Module across multiple applications.
 
-- 🔧 **Basics**: Learn how to create and configure a UI Module.
-- 🔄 **Dynamic Data**: Learn how to pass data from an application into the UI Module.
-- ♻️ **Reusability**: Discover how to reuse the UI Module across multiple applications
+⏱️ **Estimated time:** 15 minutes
 :::
 
 
@@ -132,6 +132,7 @@ Use the following bindings:
 | `userID`    | `{{Table1.selectedRow.id}}`     |
 | `userImg`   | `{{Table1.selectedRow.image}}` |
 
+Now, when you select any row in the Table widget, the corresponding user details will automatically be displayed in the UI Module.
 
 </dd>