diff --git a/packages/runtime/example/dialog/list.html b/packages/runtime/example/dialog/list.html
index a1eee762..c12c2336 100644
--- a/packages/runtime/example/dialog/list.html
+++ b/packages/runtime/example/dialog/list.html
@@ -22,7 +22,6 @@
         },
         spec: {
           properties: {
-            $id: '',
             name: '',
             email: '',
           },
@@ -31,7 +30,7 @@
           components: [
             // list item
             {
-              id: '{{$id}}hstack',
+              id: '{{$moduleId}}hstack',
               type: 'chakra_ui/v1/hstack',
               properties: {
                 spacing: '24px',
@@ -40,7 +39,7 @@
             },
             // name
             {
-              id: '{{$id}}name',
+              id: '{{$moduleId}}name',
               type: 'core/v1/text',
               properties: {
                 value: {
@@ -53,7 +52,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -62,7 +61,7 @@
             },
             // email
             {
-              id: '{{$id}}email',
+              id: '{{$moduleId}}email',
               type: 'core/v1/text',
               properties: {
                 value: {
@@ -75,7 +74,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -84,7 +83,7 @@
             },
             // delete button
             {
-              id: '{{$id}}deleteButton',
+              id: '{{$moduleId}}deleteButton',
               type: 'chakra_ui/v1/button',
               properties: {
                 text: {
@@ -121,7 +120,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -130,7 +129,7 @@
             },
             // edit button
             {
-              id: '{{$id}}editButton',
+              id: '{{$moduleId}}editButton',
               type: 'chakra_ui/v1/button',
               properties: {
                 text: {
@@ -167,7 +166,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -295,9 +294,9 @@
               properties: {
                 listData: '{{ root.listData }}',
                 template: {
+                  id: 'list{{$listItem.id}}',
                   type: 'core/v1/listItem',
                   properties: {
-                    $id: 'list{{$listItem.id}}',
                     name: '{{$listItem.name}}',
                     email: '{{$listItem.email}}',
                   },
diff --git a/packages/runtime/example/list/listModule.html b/packages/runtime/example/list/listModule.html
index 7ecf70f3..7ce5e45e 100644
--- a/packages/runtime/example/list/listModule.html
+++ b/packages/runtime/example/list/listModule.html
@@ -22,13 +22,13 @@
         spec: {
           components: [
             {
-              id: '{{$id}}hstack',
+              id: '{{$moduleId}}hstack',
               type: 'chakra_ui/v1/hstack',
               properties: {},
               traits: [],
             },
             {
-              id: '{{$id}}1',
+              id: '{{$moduleId}}1',
               type: 'core/v1/text',
               properties: {
                 value: {
@@ -41,7 +41,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -49,7 +49,7 @@
               ],
             },
             {
-              id: '{{$id}}input',
+              id: '{{$moduleId}}input',
               type: 'chakra_ui/v1/input',
               properties: {},
               traits: [
@@ -57,7 +57,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -65,7 +65,7 @@
               ],
             },
             {
-              id: '{{$id}}button',
+              id: '{{$moduleId}}button',
               type: 'chakra_ui/v1/button',
               properties: {
                 text: {
@@ -97,7 +97,7 @@
                   type: 'core/v1/slot',
                   properties: {
                     container: {
-                      id: '{{$id}}hstack',
+                      id: '{{$moduleId}}hstack',
                       slot: 'content',
                     },
                   },
@@ -108,7 +108,7 @@
           properties: {},
           events: ['onEdit'],
           stateMap: {
-            value: '{{$id}}input.value',
+            value: '{{$moduleId}}input.value',
           },
         },
       };
@@ -179,7 +179,7 @@
                 template: {
                   type: 'core/v1/littleItem',
                   properties: {
-                    $id: '{{$listItem.id}}{{$i}}',
+                    $moduleId: '{{$listItem.id}}{{$i}}',
                     value: '{{$listItem.name}}',
                   },
                   handlers: [
diff --git a/packages/runtime/src/components/_internal/ModuleRenderer.tsx b/packages/runtime/src/components/_internal/ModuleRenderer.tsx
index 61e71ec5..35e60085 100644
--- a/packages/runtime/src/components/_internal/ModuleRenderer.tsx
+++ b/packages/runtime/src/components/_internal/ModuleRenderer.tsx
@@ -1,7 +1,7 @@
 import { Static } from '@sinclair/typebox';
 import React from 'react';
 import { RuntimeApplication } from '@meta-ui/core';
-import { MetaUIServices } from '../../types/RuntimeSchema';
+import { MetaUIServices, RuntimeModuleSchema } from '../../types/RuntimeSchema';
 import { EventHandlerSchema } from '../../types/TraitPropertiesSchema';
 import { parseTypeComponents } from '../chakra-ui/List';
 import { resolveAppComponents } from '../../services/resolveAppComponents';
@@ -10,30 +10,29 @@ import { watch } from '../../utils/watchReactivity';
 import { get } from 'lodash';
 import { useEffect } from 'react';
 
-export type RuntimeModuleSchema = {
-  moduleId: string;
-  type: string;
-  properties: Record<string, string>;
-  handlers: Array<Static<typeof EventHandlerSchema>>;
-};
-
-type Props = RuntimeModuleSchema & {
+type Props = Static<typeof RuntimeModuleSchema> & {
   evalScope: Record<string, any>;
   services: MetaUIServices;
   app?: RuntimeApplication;
 };
 
 export const ModuleRenderer: React.FC<Props> = props => {
-  const { moduleId, type, properties, handlers, evalScope, services, app } = props;
+  const { type, properties, handlers, evalScope, services, app } = props;
 
   // first eval the property of module
-  const { properties: moduleProperties, handlers: moduleHandlers } =
-    services.stateManager.mapValuesDeep({ properties, handlers }, ({ value }) => {
+  const {
+    properties: moduleProperties,
+    handlers: moduleHandlers,
+    moduleId,
+  } = services.stateManager.mapValuesDeep(
+    { properties, handlers, moduleId: props.id },
+    ({ value }) => {
       if (typeof value === 'string') {
         return services.stateManager.maskedEval(value, true, evalScope);
       }
       return value;
-    });
+    }
+  );
 
   const runtimeModule = services.registry.getModuleByType(type);
   const parsedtemplete = runtimeModule.spec.components.map(parseTypeComponents);
diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx
index aace0a63..ecded9a1 100644
--- a/packages/runtime/src/components/chakra-ui/List.tsx
+++ b/packages/runtime/src/components/chakra-ui/List.tsx
@@ -5,9 +5,11 @@ import { List as BaseList, ListItem as BaseListItem } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../services/registry';
 import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants';
 import { parseType } from '../../utils/parseType';
-import { RuntimeApplicationComponent } from 'src/types/RuntimeSchema';
+import {
+  RuntimeApplicationComponent,
+  RuntimeModuleSchema,
+} from '../../types/RuntimeSchema';
 import { ModuleRenderer } from '../_internal/ModuleRenderer';
-import { EventHandlerSchema } from '../../types/TraitPropertiesSchema';
 
 export function parseTypeComponents(
   c: Application['spec']['components'][0]
@@ -50,7 +52,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
     const listItemEle = (
       <BaseListItem key={listItem.id} spacing={3}>
         <ModuleRenderer
-          moduleId={`${component.id}ListItem${i}`}
+          id={`${component.id}ListItem${i}`}
           type={template.type}
           properties={template.properties}
           handlers={template.handlers}
@@ -73,11 +75,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
 
 const PropsSchema = Type.Object({
   listData: Type.Array(Type.Record(Type.String(), Type.String())),
-  template: Type.Object({
-    type: Type.String(),
-    properties: Type.Object({}),
-    handlers: Type.Array(EventHandlerSchema),
-  }),
+  template: RuntimeModuleSchema,
 });
 
 const exampleProperties = {
diff --git a/packages/runtime/src/types/RuntimeSchema.ts b/packages/runtime/src/types/RuntimeSchema.ts
index f7e2d019..669e33ce 100644
--- a/packages/runtime/src/types/RuntimeSchema.ts
+++ b/packages/runtime/src/types/RuntimeSchema.ts
@@ -4,6 +4,8 @@ import { GlobalHandlerMap } from 'src/services/handler';
 import { Registry } from 'src/services/registry';
 import { StateManager } from 'src/services/stateStore';
 import { Application, RuntimeApplication } from '@meta-ui/core';
+import { EventHandlerSchema } from './TraitPropertiesSchema';
+import { Type } from '@sinclair/typebox';
 
 export type RuntimeApplicationComponent = RuntimeApplication['spec']['components'][0];
 
@@ -87,3 +89,10 @@ export type TraitImplementation<T = any> = (
       services: MetaUIServices;
     }
 ) => TraitResult;
+
+export const RuntimeModuleSchema = Type.Object({
+  id: Type.String(),
+  type: Type.String(),
+  properties: Type.Record(Type.String(), Type.Any()),
+  handlers: Type.Array(EventHandlerSchema),
+});