diff --git a/cli/bin.ts b/cli/bin.ts
index 08c21d19..903447a2 100644
--- a/cli/bin.ts
+++ b/cli/bin.ts
@@ -10,6 +10,7 @@ import dotenv from "dotenv";
 import fs from "fs";
 import { checkForUpdate } from "./update";
 import { login, logout } from "./auth";
+import { startFlutterDaemonServer } from "./flutter/daemon";
 
 function loadenv(argv) {
   const { cwd } = argv;
@@ -113,6 +114,17 @@ export default async function cli() {
       },
       [loadenv]
     )
+    .command(
+      "flutter daemon start",
+      "Starts local flutter daemon server for grida services",
+      () => {},
+      () => {
+        startFlutterDaemonServer();
+      }
+    )
+    .option("port", {
+      requiresArg: false,
+    })
     .option("figma-personal-access-token", {
       description: "figma personal access token",
       alias: ["fpat", "figma-pat"],
diff --git a/cli/flutter/daemon/index.ts b/cli/flutter/daemon/index.ts
new file mode 100644
index 00000000..713ab563
--- /dev/null
+++ b/cli/flutter/daemon/index.ts
@@ -0,0 +1,6 @@
+import Daemon from "@flutter-daemon/server";
+
+export function startFlutterDaemonServer() {
+  const server = new Daemon();
+  server.listen({});
+}
diff --git a/cli/flutter/index.ts b/cli/flutter/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/cli/package.json b/cli/package.json
index 3c858aae..08d62ea1 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,6 +1,6 @@
 {
     "name": "grida",
-    "version": "0.0.13",
+    "version": "0.0.14",
     "private": false,
     "license": "Apache-2.0",
     "description": "grida CLI",
@@ -8,6 +8,7 @@
     "repository": "https://github.com/gridaco/code",
     "dependencies": {
         "@base-sdk-fp/auth": "^0.1.4",
+        "@flutter-daemon/server": "^0.0.1",
         "dotenv": "^16.0.1",
         "enquirer": "^2.3.6",
         "glob": "^8.0.3",
@@ -18,7 +19,6 @@
         "open": "^8.4.0",
         "ora": "^5.4.0",
         "semver": "^7.3.7",
-        "ts-node": "^10.9.1",
         "which": "^2.0.2",
         "yaml": "^2.1.1",
         "yargs": "^17.2.1"
@@ -28,7 +28,7 @@
         "dev": "ts-node index.ts",
         "dev:watch": "ts-node-dev index.ts --watch",
         "test": "jest",
-        "build": "ncc build index.ts -o dist -e keytar",
+        "build": "ncc build index.ts -o dist -e keytar -e glob -e dotenv",
         "prepack": "yarn test && yarn clean && yarn build"
     },
     "devDependencies": {
@@ -40,6 +40,7 @@
         "@vercel/ncc": "^0.34.0",
         "jest": "^28.1.3",
         "ts-jest": "^28.0.7",
+        "ts-node": "^10.9.1",
         "ts-node-dev": "^2.0.0",
         "typescript": "^4.7.4"
     },
diff --git a/cli/yarn.lock b/cli/yarn.lock
index 1ad24aef..47fef2b6 100644
--- a/cli/yarn.lock
+++ b/cli/yarn.lock
@@ -320,6 +320,13 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@flutter-daemon/server@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@flutter-daemon/server/-/server-0.0.1.tgz#b01f2b2742490fe21c2de2a4a82fae409263131a"
+  integrity sha512-eGnGOzhLr5jtSek9ynyQmFO46lXrH/C9AS9vyO8h8mhn1lNUXk8qChnL3i0Z2R3iED4lMnOk8uqel6aif5/OQQ==
+  dependencies:
+    ws "^8.8.1"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2881,6 +2888,11 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+ws@^8.8.1:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
+
 xtend@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
diff --git a/editor-packages/editor-preview-flutter-daemon-view/flutter-daemon-view.tsx b/editor-packages/editor-preview-flutter-daemon-view/flutter-daemon-view.tsx
new file mode 100644
index 00000000..bec3bfdd
--- /dev/null
+++ b/editor-packages/editor-preview-flutter-daemon-view/flutter-daemon-view.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import Client, { FlutterProject } from "@flutter-daemon/client";
+
+/**
+ * cached client
+ */
+let _clinet: Client;
+function useClinet() {
+  const [client, setClient] = useState<Client>(_clinet);
+  useEffect(() => {
+    if (!_clinet) {
+      _clinet = new Client("ws://localhost:43070");
+      setClient(_clinet);
+    }
+  }, []);
+
+  return client;
+}
+
+/**
+ * cached project
+ */
+let _project: FlutterProject;
+function useMainProject(initial?: string) {
+  const client = useClinet();
+  const [project, setProject] = useState<FlutterProject>(_project);
+  useEffect(() => {
+    if (!client) return;
+    if (!_project) {
+      client
+        .project("tmp", "tmp", {
+          "lib/main.dart": initial,
+        })
+        .then((project) => {
+          _project = project;
+          setProject(_project);
+        });
+    }
+  }, [client]);
+  return project;
+}
+
+/**
+ * A flutter render view uses `@flutter-daemon/client` with present `@flutter-daemon/server` connection.
+ * @returns
+ */
+export function SingleFileMainFlutterDaemonView({
+  src,
+  loading,
+}: {
+  src: string;
+  loading?: JSX.Element;
+}) {
+  const project = useMainProject(src);
+  const [booted, setBooted] = useState(false);
+  const [weblaunchUrl, setWeblaunchUrl] = useState<string>();
+
+  const [refreshKey, setRefreshKey] = useState<number>(0);
+
+  useEffect(() => {
+    if (project) {
+      project.webLaunchUrl().then((url) => {
+        setBooted(true);
+        setWeblaunchUrl(url);
+      });
+    }
+  }, [project]);
+
+  useEffect(() => {
+    console.log("src changed");
+    if (project) {
+      console.log("writing file...");
+      project
+        .writeFile("lib/main.dart", src, true)
+        .then(() => {
+          console.log("file written");
+          setRefreshKey(refreshKey + 1);
+        })
+        .catch(console.error);
+      // project.restart().then(() => {});
+    }
+  }, [src]);
+
+  if (booted) {
+    return (
+      <iframe
+        key={refreshKey}
+        style={{
+          width: "100%",
+          height: "100%",
+          border: "none",
+        }}
+        src={weblaunchUrl}
+      />
+    );
+  } else {
+    return loading ?? <></>;
+  }
+}
diff --git a/editor-packages/editor-preview-flutter-daemon-view/index.ts b/editor-packages/editor-preview-flutter-daemon-view/index.ts
new file mode 100644
index 00000000..f8bd265a
--- /dev/null
+++ b/editor-packages/editor-preview-flutter-daemon-view/index.ts
@@ -0,0 +1,2 @@
+import { SingleFileMainFlutterDaemonView } from "./flutter-daemon-view";
+export default SingleFileMainFlutterDaemonView;
diff --git a/editor-packages/editor-preview-flutter-daemon-view/package.json b/editor-packages/editor-preview-flutter-daemon-view/package.json
new file mode 100644
index 00000000..29f8ad36
--- /dev/null
+++ b/editor-packages/editor-preview-flutter-daemon-view/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@code-editor/flutter-daemon-view",
+  "version": "0.0.0",
+  "description": "Flutter render view uses @flutter-daemon/clinet to communicate with the Flutter engine.",
+  "dependencies": {
+    "@flutter-daemon/client": "^0.0.2"
+  }
+}
\ No newline at end of file
diff --git a/editor-packages/editor-preview-flutter-daemon-view/tsconfig.json b/editor-packages/editor-preview-flutter-daemon-view/tsconfig.json
new file mode 100644
index 00000000..f6c5fa35
--- /dev/null
+++ b/editor-packages/editor-preview-flutter-daemon-view/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}
diff --git a/editor/components/app-runner/flutter-app-runner.tsx b/editor/components/app-runner/flutter-app-runner.tsx
index 687bc8fc..a2fafe7c 100644
--- a/editor/components/app-runner/flutter-app-runner.tsx
+++ b/editor/components/app-runner/flutter-app-runner.tsx
@@ -1,16 +1,32 @@
 import React, { useEffect, useRef, useState } from "react";
 import type { IScenePreviewDataFlutterPreview } from "core/states";
+import FlutterDaemonView from "@code-editor/flutter-daemon-view";
 
 const dartservices_html_src = "https://dartpad.dev/scripts/frame_dark.html";
 
 export function VanillaFlutterRunner({
+  updatedAt,
   widgetKey,
   loader,
   source,
 }: IScenePreviewDataFlutterPreview) {
   switch (loader) {
     case "vanilla-flutter-template": {
-      return <DartpadServedHtmlIframe js={source} />;
+      return <DartpadServedHtmlIframe key={widgetKey.id} js={source} />;
+    }
+    case "flutter-daemon-view": {
+      // return <FlutterDaemonView key={widgetKey.id} src={source} />;
+      return (
+        <iframe
+          key={updatedAt.toString()}
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+          }}
+          src={source}
+        />
+      );
     }
     default: {
       throw new Error(`Unsupported loader: ${loader}`);
diff --git a/editor/components/app-runner/vanilla-dedicated-preview-renderer.tsx b/editor/components/app-runner/vanilla-dedicated-preview-renderer.tsx
index f8cc490f..e0ea4afe 100644
--- a/editor/components/app-runner/vanilla-dedicated-preview-renderer.tsx
+++ b/editor/components/app-runner/vanilla-dedicated-preview-renderer.tsx
@@ -27,6 +27,7 @@ export function VanillaDedicatedPreviewRenderer({
         />
       );
     }
+    case "flutter-daemon-view":
     case "vanilla-flutter-template": {
       return (
         <VanillaFlutterRunner
diff --git a/editor/components/canvas/isolated-canvas.tsx b/editor/components/canvas/isolated-canvas.tsx
index 752d87c9..3e78db56 100644
--- a/editor/components/canvas/isolated-canvas.tsx
+++ b/editor/components/canvas/isolated-canvas.tsx
@@ -55,12 +55,14 @@ export function IsolatedCanvas({
   building = false,
   onExit,
   onFullscreen,
+  onReload,
 }: {
   defaultSize: { width: number; height: number };
   children?: React.ReactNode;
   building?: boolean;
   onExit?: () => void;
   onFullscreen?: () => void;
+  onReload?: () => void;
 }) {
   const _margin = 20;
   const [canvasSizingRef, canvasBounds] = useMeasure();
@@ -140,6 +142,7 @@ export function IsolatedCanvas({
           {onExit && (
             <ActionButton onClick={onExit}>End Isolation</ActionButton>
           )}
+          {onReload && <ActionButton onClick={onReload}>Reload</ActionButton>}
         </Controls>
         {/* <ScalingAreaStaticRoot> */}
         <TransformContainer
diff --git a/editor/core/states/editor-state.ts b/editor/core/states/editor-state.ts
index 0fd19eb7..168378e0 100644
--- a/editor/core/states/editor-state.ts
+++ b/editor/core/states/editor-state.ts
@@ -71,7 +71,7 @@ export interface IScenePreviewData<T> {
   initialSize: { width: number; height: number };
   isBuilding: boolean;
   meta: {
-    bundler: "vanilla" | "esbuild-wasm" | "dart-services";
+    bundler: "vanilla" | "esbuild-wasm" | "dart-services" | "flutter-daemon";
     framework: FrameworkConfig["framework"];
     reason: "fill-assets" | "initial" | "update";
   };
@@ -86,7 +86,7 @@ export interface IScenePreviewDataVanillaPreview
 
 export interface IScenePreviewDataFlutterPreview
   extends IScenePreviewData<string> {
-  loader: "vanilla-flutter-template";
+  loader: "vanilla-flutter-template" | "flutter-daemon-view";
   source: string;
 }
 
diff --git a/editor/scaffolds/canvas/isolate-mode.tsx b/editor/scaffolds/canvas/isolate-mode.tsx
index 3924e6b7..5dee6c43 100644
--- a/editor/scaffolds/canvas/isolate-mode.tsx
+++ b/editor/scaffolds/canvas/isolate-mode.tsx
@@ -15,6 +15,7 @@ export function IsolateModeCanvas({
   onEnterFullscreen: () => void;
 }) {
   const [state] = useEditorState();
+  const [renderkey, setRenderkey] = useState(0);
 
   const {
     fallbackSource,
@@ -35,6 +36,9 @@ export function IsolateModeCanvas({
         building={isBuilding}
         onExit={onClose}
         onFullscreen={onEnterFullscreen}
+        onReload={() => {
+          setRenderkey(renderkey + 1);
+        }}
         defaultSize={{
           width: initialSize?.width ?? 375,
           height: initialSize?.height ?? 812,
@@ -43,6 +47,7 @@ export function IsolateModeCanvas({
         <>
           {source ? (
             <VanillaDedicatedPreviewRenderer
+              key={renderkey + ""}
               {...state.currentPreview}
               enableIspector
             />
diff --git a/editor/scaffolds/editor/editor-preview-provider.tsx b/editor/scaffolds/editor/editor-preview-provider.tsx
index 218150c6..5ebf040e 100644
--- a/editor/scaffolds/editor/editor-preview-provider.tsx
+++ b/editor/scaffolds/editor/editor-preview-provider.tsx
@@ -11,9 +11,12 @@ import { useTargetContainer } from "hooks";
 import { WidgetKey } from "@reflect-ui/core";
 import { supportsPreview } from "config";
 import { stable as dartservices } from "dart-services";
+import Client, { FlutterProject } from "@flutter-daemon/client";
 
 const esbuild_base_html_code = `<div id="root"></div>`;
 
+const flutter_bundler: "dart-services" | "flutter-daemon" = "flutter-daemon";
+
 /**
  * This is a queue handler of d2c requests.
  * Since the d2c can share cache and is a async process, we need this middleware wrapper to handle it elegantly.
@@ -171,8 +174,8 @@ export function EditorPreviewDataProvider({
           initialSize: initialSize,
           isBuilding: false,
           meta: {
-            bundler: "esbuild-wasm",
-            framework: "react",
+            bundler: "dart-services",
+            framework: "flutter",
             reason: "update",
           },
           updatedAt: Date.now(),
@@ -317,26 +320,70 @@ export function EditorPreviewDataProvider({
           break;
         }
         case "flutter": {
-          dartservices
-            .compileComplete(state.editingModule.raw)
-            .then((r) => {
-              if (!r.error) {
-                onDartServicesFlutterBuildComplete({
-                  key: wkey,
-                  initialSize: initialSize,
-                  componentName: componentName,
-                  js: r.result,
-                });
+          is_daemon_running(local_flutter_daemon_server_url).then(
+            (daemon_available) => {
+              consoleLog({
+                method: "info",
+                data: ["running flutter app with local daemon"],
+              });
+              if (daemon_available) {
+                FlutterDaemon.instance
+                  .initProject(state.editingModule.raw)
+                  .then(() => {
+                    setTimeout(() => {
+                      FlutterDaemon.instance
+                        .save(state.editingModule.raw)
+                        .then(() => {
+                          FlutterDaemon.instance.webLaunchUrl().then((url) => {
+                            updateBuildingState(false);
+                            dispatch({
+                              type: "preview-set",
+                              data: {
+                                loader: "flutter-daemon-view",
+                                viewtype: "unknown",
+                                widgetKey: wkey,
+                                componentName: componentName,
+                                fallbackSource:
+                                  state.currentPreview?.fallbackSource,
+                                source: url,
+                                initialSize: initialSize,
+                                isBuilding: false,
+                                meta: {
+                                  bundler: "flutter-daemon",
+                                  framework: "flutter",
+                                  reason: "update",
+                                },
+                                updatedAt: Date.now(),
+                              },
+                            });
+                          });
+                        });
+                    }, 500);
+                  });
               } else {
-                consoleLog({ method: "error", data: [r.error] });
+                dartservices
+                  .compileComplete(state.editingModule.raw)
+                  .then((r) => {
+                    if (!r.error) {
+                      onDartServicesFlutterBuildComplete({
+                        key: wkey,
+                        initialSize: initialSize,
+                        componentName: componentName,
+                        js: r.result,
+                      });
+                    } else {
+                      consoleLog({ method: "error", data: [r.error] });
+                    }
+                  })
+                  .catch((e) => {
+                    consoleLog({ method: "error", data: [e.message] });
+                  })
+                  .finally(() => {
+                    updateBuildingState(false);
+                  });
               }
-            })
-            .catch((e) => {
-              consoleLog({ method: "error", data: [e.message] });
-            })
-            .finally(() => {
-              updateBuildingState(false);
-            });
+            }
+          );
           break;
         }
         default:
@@ -360,3 +407,57 @@ ${s}
 const App = () => <><${n}/></>
 ReactDOM.render(<App />, document.querySelector('#root'));`;
 };
+
+function is_daemon_running(url: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    var ws = new WebSocket(url);
+    ws.addEventListener("error", (e) => {
+      // @ts-ignore
+      if (e.target.readyState === 3) {
+        resolve(false);
+      }
+    });
+    ws.addEventListener("open", () => {
+      resolve(true);
+      ws.close();
+    });
+  });
+}
+
+const local_flutter_daemon_server_url = "ws://localhost:43070";
+
+class FlutterDaemon {
+  private static _instance: FlutterDaemon;
+  static get instance() {
+    if (!FlutterDaemon._instance) {
+      FlutterDaemon._instance = new FlutterDaemon();
+    }
+    return FlutterDaemon._instance;
+  }
+  static client: Client;
+  static project: FlutterProject;
+  constructor() {
+    if (!FlutterDaemon.client) {
+      FlutterDaemon.client = new Client(local_flutter_daemon_server_url);
+    }
+  }
+
+  async initProject(initial: string) {
+    if (!FlutterDaemon.project) {
+      FlutterDaemon.project = await FlutterDaemon.client.project(
+        "preview",
+        "preview",
+        { "lib/main.dart": initial }
+      );
+    }
+    return FlutterDaemon.project;
+  }
+
+  async save(content) {
+    await FlutterDaemon.project.writeFile("lib/main.dart", content, true);
+  }
+
+  async webLaunchUrl() {
+    return await FlutterDaemon.project.webLaunchUrl();
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 633cd7ed..9fee5340 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1420,7 +1420,7 @@
 
 "@design-sdk/figma-core@^0.0.25":
   version "0.0.25"
-  resolved "https://registry.npmjs.org/@design-sdk/figma-core/-/figma-core-0.0.25.tgz"
+  resolved "https://registry.yarnpkg.com/@design-sdk/figma-core/-/figma-core-0.0.25.tgz#7fa28cc7d6e45cd713c5f268d42e4dd4f2b41590"
   integrity sha512-6OF7eUbDOlR4/BFtd2FRyDvvUf777OGNbVbNScUOv3Fk/kUXBzMTXX6ZdoRlTx887v/vo3+Lh0D31SG1sm80aA==
 
 "@design-sdk/figma-node-conversion@^0.0.35":
@@ -2469,6 +2469,13 @@
     "@flutter-builder/flutter-material-icons" "0.0.6"
     dart-style "^1.3.2-dev"
 
+"@flutter-daemon/client@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@flutter-daemon/client/-/client-0.0.2.tgz#039ce0a372779c9bfbffb77556a971509d8692b3"
+  integrity sha512-Jja/JRs1M5w20NSwZtauUrxDq0hMOAgdEbi2gDaT7YVIziKhEimrmYPASGWyLd+sTVHFXv9nl49Wfhva/DImaQ==
+  dependencies:
+    ws "^8.8.1"
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz"
@@ -19571,7 +19578,7 @@ write-pkg@^4.0.0:
     type-fest "^0.4.1"
     write-json-file "^3.2.0"
 
-ws@>=7.4.6, ws@^8.2.3:
+ws@>=7.4.6, ws@^8.2.3, ws@^8.8.1:
   version "8.8.1"
   resolved "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz"
   integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==