diff --git a/examples/dialog/dialogInList.json b/examples/dialog/dialogInList.json
index 1b9a02c4..964f0e82 100644
--- a/examples/dialog/dialogInList.json
+++ b/examples/dialog/dialogInList.json
@@ -20,7 +20,7 @@
       },
       "impl": [
         {
-          "id": "hstack",
+          "id": "{{ $moduleId }}__hstack",
           "type": "chakra_ui/v1/hstack",
           "properties": {
             "spacing": "24px"
@@ -28,7 +28,7 @@
           "traits": []
         },
         {
-          "id": "name",
+          "id": "{{ $moduleId }}__nameText",
           "type": "core/v1/text",
           "properties": {
             "value": {
@@ -41,7 +41,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
@@ -49,7 +49,7 @@
           ]
         },
         {
-          "id": "email",
+          "id": "{{ $moduleId }}__emailText",
           "type": "core/v1/text",
           "properties": {
             "value": {
@@ -62,7 +62,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
@@ -70,7 +70,7 @@
           ]
         },
         {
-          "id": "deleteButton",
+          "id": "{{ $moduleId }}__deleteButton",
           "type": "chakra_ui/v1/button",
           "properties": {
             "text": {
@@ -106,7 +106,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
@@ -114,7 +114,7 @@
           ]
         },
         {
-          "id": "editButton",
+          "id": "{{ $moduleId }}__editButton",
           "type": "chakra_ui/v1/button",
           "properties": {
             "text": {
@@ -150,7 +150,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
diff --git a/examples/list/listModule.json b/examples/list/listModule.json
index ded0f2e1..8d551515 100644
--- a/examples/list/listModule.json
+++ b/examples/list/listModule.json
@@ -13,18 +13,18 @@
       "properties": {},
       "events": ["onEdit"],
       "stateMap": {
-        "value": "input.value"
+        "value": "{{ $moduleId }}__input.value"
       }
     },
     "impl": [
       {
-        "id": "hstack",
+        "id": "{{ $moduleId }}__hstack",
         "type": "chakra_ui/v1/hstack",
         "properties": {},
         "traits": []
       },
       {
-        "id": "text",
+        "id": "{{ $moduleId }}__text",
         "type": "core/v1/text",
         "properties": {
           "value": {
@@ -37,7 +37,7 @@
             "type": "core/v1/slot",
             "properties": {
               "container": {
-                "id": "hstack",
+                "id": "{{ $moduleId }}__hstack",
                 "slot": "content"
               }
             }
@@ -45,11 +45,11 @@
         ]
       },
       {
-        "id": "inputValueText",
+        "id": "{{ $moduleId }}__inputValueText",
         "type": "core/v1/text",
         "properties": {
           "value": {
-            "raw": "**{{ input.value }}**",
+            "raw": "**{{ {{ $moduleId }}__input.value }}**",
             "format": "md"
           }
         },
@@ -58,7 +58,7 @@
             "type": "core/v1/slot",
             "properties": {
               "container": {
-                "id": "hstack",
+                "id": "{{ $moduleId }}__hstack",
                 "slot": "content"
               }
             }
@@ -66,7 +66,7 @@
         ]
       },
       {
-        "id": "input",
+        "id": "{{ $moduleId }}__input",
         "type": "chakra_ui/v1/input",
         "properties": {},
         "traits": [
@@ -74,7 +74,7 @@
             "type": "core/v1/slot",
             "properties": {
               "container": {
-                "id": "hstack",
+                "id": "{{ $moduleId }}__hstack",
                 "slot": "content"
               }
             }
@@ -82,7 +82,7 @@
         ]
       },
       {
-        "id": "button",
+        "id": "{{ $moduleId }}__button",
         "type": "chakra_ui/v1/button",
         "properties": {
           "text": {
@@ -114,7 +114,7 @@
             "type": "core/v1/slot",
             "properties": {
               "container": {
-                "id": "hstack",
+                "id": "{{ $moduleId }}__hstack",
                 "slot": "content"
               }
             }
diff --git a/examples/module/index.json b/examples/module/index.json
index 7626be65..8a1f74e7 100644
--- a/examples/module/index.json
+++ b/examples/module/index.json
@@ -18,18 +18,18 @@
         },
         "events": ["onSubmit"],
         "stateMap": {
-          "value": "input.value"
+          "value": "{{ $moduleId }}__input.value"
         }
       },
       "impl": [
         {
-          "id": "hstack",
+          "id": "{{ $moduleId }}__hstack",
           "type": "chakra_ui/v1/hstack",
           "properties": {},
           "traits": []
         },
         {
-          "id": "input",
+          "id": "{{ $moduleId }}__input",
           "type": "chakra_ui/v1/input",
           "properties": {},
           "traits": [
@@ -37,7 +37,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
@@ -45,11 +45,11 @@
           ]
         },
         {
-          "id": "button",
+          "id": "{{ $moduleId }}__button",
           "type": "chakra_ui/v1/button",
           "properties": {
             "text": {
-              "raw": "{{input.value}}",
+              "raw": "{{{{ $moduleId }}__input.value}}",
               "format": "md"
             }
           },
@@ -77,7 +77,7 @@
               "type": "core/v1/slot",
               "properties": {
                 "container": {
-                  "id": "hstack",
+                  "id": "{{ $moduleId }}__hstack",
                   "slot": "content"
                 }
               }
diff --git a/packages/editor/__tests__/addModuleId.spec.ts b/packages/editor/__tests__/addModuleId.spec.ts
index 2405d5b3..cac21c28 100644
--- a/packages/editor/__tests__/addModuleId.spec.ts
+++ b/packages/editor/__tests__/addModuleId.spec.ts
@@ -31,7 +31,7 @@ describe('format to module schema', () => {
             type: 'test/v1/child',
             properties: {
               test: '{{ value.BE_CAREFUL.toFixed(2) }}',
-              replace: '{{ input1.value }} / {{ BE_CAREFUL.value }}'
+              add: '{{ input1.value }} / {{ BE_CAREFUL.value }}'
             },
 
             traits: [],
@@ -49,7 +49,7 @@ describe('format to module schema', () => {
         Object {
           "id": "{{ $moduleId }}__BE_CAREFUL",
           "properties": Object {
-            "replace": "{{ {{ $moduleId }}__input1.value }} / {{ {{ $moduleId }}__BE_CAREFUL.value }}",
+            "add": "{{ {{ $moduleId }}__input1.value }} / {{ {{ $moduleId }}__BE_CAREFUL.value }}",
             "test": "{{ value.BE_CAREFUL.toFixed(2) }}",
           },
           "traits": Array [],
diff --git a/packages/editor/src/AppStorage.ts b/packages/editor/src/AppStorage.ts
index f2323277..7c5ff884 100644
--- a/packages/editor/src/AppStorage.ts
+++ b/packages/editor/src/AppStorage.ts
@@ -13,7 +13,6 @@ export class AppStorage {
   static ModulesLSKey = 'modules';
 
   constructor() {
-    console.log(this.modules)
     makeObservable(this, {
       app: observable.shallow,
       modules: observable.shallow,
diff --git a/packages/editor/src/utils/addModuleId.ts b/packages/editor/src/utils/addModuleId.ts
index 64ff3ade..d0f0a51c 100644
--- a/packages/editor/src/utils/addModuleId.ts
+++ b/packages/editor/src/utils/addModuleId.ts
@@ -31,7 +31,7 @@ export function addModuleId(module: Module): Module {
         if (ids.includes(val)) {
           tree[key] = `${ModuleIdPrefix}${val}`;
         } else {
-          const newField = replaceProperty(val, ids);
+          const newField = replaceIdsInProperty(val, ids);
           tree[key] = newField;
         }
       } else if (typeof val === 'object') {
@@ -45,7 +45,7 @@ export function addModuleId(module: Module): Module {
   return module;
 }
 
-// remove {{$moduleId}} in moduleSchema
+// remove '{{$moduleId}}__' in moduleSchema
 export function removeModuleId(module: Module): Module {
   function traverse(tree: Record<string, any>) {
     for (const key in tree) {
@@ -63,7 +63,34 @@ export function removeModuleId(module: Module): Module {
   return module;
 }
 
-function replaceExp(exp: string, ids: string[]): string | void {
+// example: replaceIdsInExp('{{input1.value}} + {{input2.value}}', ids: ['input1']])
+function replaceIdsInProperty(property: string, ids: string[]): string {
+  const expRegExp = new RegExp('{{(.*?)}}', 'g');
+  const matches = [...property.matchAll(expRegExp)];
+
+  if (matches.length === 0) return property;
+
+  const expPos: StringPos[] = [];
+  matches.forEach(match => {
+    const newExp = replaceIdsInExp(match[1], ids);
+    if (newExp) {
+      expPos.push({
+        // + 2 because of '{{' length is 2
+        start: match.index! + 2,
+        end: match.index! + 2 + match[1].length,
+        replaceStr: newExp,
+      });
+    }
+  });
+  if (expPos.length === 0) return property;
+
+  return expPos.reverse().reduce((result, { start, end, replaceStr }) => {
+    return result.slice(0, start) + `${replaceStr}` + result.slice(end);
+  }, property);
+}
+
+// example: replaceIdsInExp('input1.value', ids: ['input1']])
+function replaceIdsInExp(exp: string, ids: string[]): string | void {
   const identifierPos: StringPos[] = [];
   simpleWalk((acornLoose as typeof acorn).parse(exp, { ecmaVersion: 2020 }), {
     Identifier: node => {
@@ -86,29 +113,4 @@ function replaceExp(exp: string, ids: string[]): string | void {
   }, exp);
 
   return newExp;
-}
-
-function replaceProperty(property: string, ids: string[]): string {
-  const expRegExp = new RegExp('{{(.*?)}}', 'g');
-  const matches = [...property.matchAll(expRegExp)];
-
-  if (matches.length === 0) return property;
-
-  const expPos: StringPos[] = [];
-  matches.forEach(match => {
-    const newExp = replaceExp(match[1], ids);
-    if (newExp) {
-      expPos.push({
-        // + 2 because of '{{' length is 2
-        start: match.index! + 2,
-        end: match.index! + 2 + match[1].length,
-        replaceStr: newExp,
-      });
-    }
-  });
-  if (expPos.length === 0) return property;
-
-  return expPos.reverse().reduce((result, { start, end, replaceStr }) => {
-    return result.slice(0, start) + `${replaceStr}` + result.slice(end);
-  }, property);
-}
+}
\ No newline at end of file