diff --git a/src/hello.svelte b/src/hello.svelte
index 30665f1..6d10108 100644
--- a/src/hello.svelte
+++ b/src/hello.svelte
@@ -3,6 +3,8 @@
     import { version, sql as query } from "@/api";
     import { showMessage, fetchPost, Protyle } from "siyuan";
 
+    export let app;
+
     let time: string = "";
     let ver: string;
 
@@ -15,7 +17,7 @@
         fetchPost("/api/system/currentTime", {}, (response) => {
             time = new Date(response.data).toString();
         });
-        await initProtyle();
+        protyle = await initProtyle();
     });
 
     onDestroy(() => {
@@ -27,9 +29,8 @@
         let sql = "SELECT * FROM blocks ORDER BY RANDOM () LIMIT 1;";
         let blocks: Block[] = await query(sql);
         blockID = blocks[0].id;
-        protyle = new Protyle(this.app, divProtyle, {
-            blockId: blockID,
-            mode: "preview"
+        return new Protyle(app, divProtyle, {
+            blockId: blockID
         });
     }
 </script>
diff --git a/src/index.ts b/src/index.ts
index e12c75c..897dcf1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -83,7 +83,10 @@ export default class PluginSample extends Plugin {
 
         let tabDiv = document.createElement("div");
         new HelloExample({
-            target: tabDiv
+            target: tabDiv,
+            props: {
+                app: this.app,
+            }
         });
         this.customTab = this.addTab({
             type: TAB_TYPE,
@@ -234,6 +237,9 @@ export default class PluginSample extends Plugin {
         });
         new HelloExample({
             target: dialog.element.querySelector("#helloPanel"),
+            props: {
+                app: this.app,
+            }
         });
     }