diff --git a/example/demo/demoCartoonWater/CartoonWater.json b/example/demo/demoCartoonWater.json
similarity index 99%
rename from example/demo/demoCartoonWater/CartoonWater.json
rename to example/demo/demoCartoonWater.json
index 04588a4..f4e9ff9 100644
--- a/example/demo/demoCartoonWater/CartoonWater.json
+++ b/example/demo/demoCartoonWater.json
@@ -521,7 +521,7 @@
         "exposed": true,
         "expanded": true,
         "outValue": {
-          "id": "/example/demo/demoCartoonWater/flowmap.png",
+          "id": "asset/flowmap.png",
           "label": "flowmap.png"
         }
       },
@@ -837,7 +837,7 @@
         "exposed": true,
         "expanded": true,
         "outValue": {
-          "id": "/example/demo/demoCartoonWater/noise.png",
+          "id": "asset/noise.png",
           "label": "noise.png"
         }
       },
@@ -1099,7 +1099,7 @@
         "exposed": true,
         "expanded": true,
         "outValue": {
-          "id": "/example/demo/demoCartoonWater/noise.png",
+          "id": "asset/noise.png",
           "label": "noise.png"
         }
       },
@@ -2770,7 +2770,7 @@
       "name": "FlowTexture",
       "type": "texture2d",
       "defalutValue": {
-        "id": "/example/demo/demoCartoonWater/flowmap.png",
+        "id": "asset/flowmap.png",
         "label": "flowmap.png"
       },
       "exposed": true
@@ -2779,7 +2779,7 @@
       "name": "FoamTexture",
       "type": "texture2d",
       "defalutValue": {
-        "id": "/example/demo/demoCartoonWater/noise.png",
+        "id": "asset/noise.png",
         "label": "noise.png"
       },
       "exposed": true
diff --git a/example/demo/demoCartoonWater/index.ts b/example/demo/demoCartoonWater/index.ts
deleted file mode 100644
index a46d73c..0000000
--- a/example/demo/demoCartoonWater/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import cartoonWater from './CartoonWater.json';
-import imgFlowmap from './flowmap.png';
-import imgNoise from './noise.png';
-
-const replaceImg = <T>(json: T): T => {
-  let jsonStr = JSON.stringify(json);
-  jsonStr = jsonStr.replace(/40bdd9aa-3430-4678-9549-877e9f125c44--764eb/g, imgFlowmap);
-  jsonStr = jsonStr.replace(/ded3a365-f6f7-4ff1-85d1-05c554ca7f05--764eb/g, imgNoise);
-  return JSON.parse(jsonStr) as T;
-};
-
-const demoCartoonWater = replaceImg(cartoonWater);
-
-export default demoCartoonWater;
diff --git a/example/presets.ts b/example/presets.ts
index ec05f69..780790b 100644
--- a/example/presets.ts
+++ b/example/presets.ts
@@ -31,7 +31,7 @@ import demoConstantBiasScaleSubGraph from './demo/demoConstantBiasScaleSubGraph.
 import demoFlowMapSubGraph from './demo/demoFlowMapSubGraph.json';
 import demoFlowMap from './demo/demoFlowMap.json';
 import demoImageFlip from './demo/demoImageFlip.json';
-import demoCartoonWater from './demo/demoCartoonWater';
+import demoCartoonWater from './demo/demoCartoonWater.json';
 import demoSkybox from './demo/demoSkybox.json';
 import demoSummberDissolve from './demo/demoSummberDissolve.json';
 import demoCustomMap from './demo/demoCustomMap.json';
diff --git a/example/demo/demoCartoonWater/flowmap.png b/public/asset/flowmap.png
similarity index 100%
rename from example/demo/demoCartoonWater/flowmap.png
rename to public/asset/flowmap.png
diff --git a/example/demo/demoCartoonWater/noise.png b/public/asset/noise.png
similarity index 100%
rename from example/demo/demoCartoonWater/noise.png
rename to public/asset/noise.png