diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69de29..cd09d9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,12 @@
+## 0.1.8
+
+* [Add protyleSlash to the plugin](https://github.com/siyuan-note/siyuan/issues/8599)
+* [Add plugin API protyle](https://github.com/siyuan-note/siyuan/issues/8445)
+
+## 0.1.7
+
+* [Support build js and json](https://github.com/siyuan-note/plugin-sample/pull/8)
+
+## 0.1.6
+
+* add `fetchPost` example
diff --git a/README.md b/README.md
index 71d9860..737800a 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 
 [中文版](./README_zh_CN.md)
 
-> Consistent with [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.5](https://github.com/siyuan-note/plugin-sample/tree/v0.1.5).
+> Consistent with [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.8](https://github.com/siyuan-note/plugin-sample/tree/v0.1.8).
 
 
 
diff --git a/README_zh_CN.md b/README_zh_CN.md
index 260eaf0..5177733 100644
--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@@ -4,7 +4,7 @@
 [English](./README.md)
 
 
-> 本例和 [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.5](https://github.com/siyuan-note/plugin-sample/tree/v0.1.5)
+> 本例和 [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.8](https://github.com/siyuan-note/plugin-sample/tree/v0.1.8)
 
 1. 使用 vite 打包
 2. 使用符号链接、而不是把项目放到插件目录下的模式进行开发
diff --git a/package.json b/package.json
index 27331d9..901a1c1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plugin-sample-vite-svelte",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "type": "module",
   "description": "",
   "repository": "",
@@ -22,7 +22,7 @@
     "minimist": "^1.2.8",
     "rollup-plugin-livereload": "^2.0.5",
     "sass": "^1.62.1",
-    "siyuan": "0.7.4",
+    "siyuan": "0.7.5",
     "svelte": "^3.57.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
diff --git a/plugin.json b/plugin.json
index 50fdf74..0cb1325 100644
--- a/plugin.json
+++ b/plugin.json
@@ -2,7 +2,7 @@
   "name": "plugin-sample-vite-svelte",
   "author": "frostime",
   "url": "https://github.com/siyuan-note/plugin-sample-vite-svelte",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "minAppVersion": "2.9.0",
   "backends": ["all"],
   "frontends": ["all"],
diff --git a/src/hello.svelte b/src/hello.svelte
index 9094eb3..6d10108 100644
--- a/src/hello.svelte
+++ b/src/hello.svelte
@@ -1,61 +1,50 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
-    import { version } from "@/api";
-    import { showMessage } from "siyuan";
-    import Typo from "@/libs/b3-typography.svelte";
+    import { version, sql as query } from "@/api";
+    import { showMessage, fetchPost, Protyle } from "siyuan";
 
-    export let name: string;
-    export let i18n: any;
+    export let app;
 
-    let time;
-    let ver;
+    let time: string = "";
+    let ver: string;
 
-    let intv1 = setInterval(async () => {
-        time = new Date();
-    }, 1000);
+    let divProtyle: HTMLDivElement;
+    let protyle: any;
+    let blockID: string = '';
 
     onMount(async () => {
-        time = new Date();
         ver = await version();
+        fetchPost("/api/system/currentTime", {}, (response) => {
+            time = new Date(response.data).toString();
+        });
+        protyle = await initProtyle();
     });
 
-    /**
-     * You must call this function when the component is destroyed.
-    */
     onDestroy(() => {
         showMessage("Hello panel closed");
-        clearInterval(intv1);
+        protyle.destroy();
     });
 
-    $: time_str = new Date(time).toLocaleTimeString();
-
+    async function initProtyle() {
+        let sql = "SELECT * FROM blocks ORDER BY RANDOM () LIMIT 1;";
+        let blocks: Block[] = await query(sql);
+        blockID = blocks[0].id;
+        return new Protyle(app, divProtyle, {
+            blockId: blockID
+        });
+    }
 </script>
 
-<div id="hello">
-    <div class="fn__flex">
-        <div class="fn__flex-1">
-            <h2>Hello {name} v{ver}</h2>
-        </div>
-        <div class="fn__flex-1 b3-label__text __text-right">
-            {time_str}
-        </div>
+<div class="b3-dialog__content">
+    <div>API demo:</div>
+    <div class="fn__hr" />
+    <div class="plugin-sample__time">
+        System current time: <span id="time">{time}</span>
     </div>
-
-    <Typo>
-        <h2>Wellcome to plugin sample with vite & svelte</h2>
-        <p>{@html i18n.makesure}</p>
-    </Typo>
-
+    <div class="fn__hr" />
+    <div class="fn__hr" />
+    <div>Protyle demo: id = {blockID}</div>
+    <div class="fn__hr" />
+    <div id="protyle" style="height: 360px;" bind:this={divProtyle}/>
 </div>
 
-<style lang="scss">
-    #hello {
-        margin: 20px;
-        div {
-            margin-bottom: 10px;
-        }
-    }
-    .__text-right {
-        text-align: right;
-    }
-</style>
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index c336270..58f63ff 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -8,6 +8,7 @@
     "showDialog": "Show dialog",
     "removedData": "Data deleted",
     "confirmRemove": "Confirm to delete the data in ${name}?",
+    "insertEmoji": "Insert Emoji",
     "name": "SiYuan",
     "hello": {
         "makesure": "Before using this template, please read the <a href=\"https://github.com/siyuan-note/plugin-sample\">offical sample</a>, make sure that you've known about the pipeline for plugin developing."
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
index 568cccd..a1ee598 100644
--- a/src/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@@ -8,6 +8,7 @@
     "showDialog": "弹出一个对话框",
     "removedData": "数据已删除",
     "confirmRemove": "确认删除 ${name} 中的数据？",
+    "insertEmoji": "插入表情",
     "name": "思源",
     "hello": {
         "makesure": "使用这个模板之前，请阅读<a href=\"https://github.com/siyuan-note/plugin-sample\">官方教程</a>, 确保自己已经理解了插件的基本开发流程。"
diff --git a/src/index.scss b/src/index.scss
index cb1be95..c8efd4f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,26 @@
 #helloPanel {
     border: 1px rgb(189, 119, 119) dashed;
+}
+
+.plugin-sample {
+    &__custom-tab {
+        background-color: var(--b3-theme-background);
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__custom-dock {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__time {
+        background: var(--b3-card-info-background);
+        border-radius: 4px;
+        padding: 2px 8px;
+    }
 }
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 51c40af..897dcf1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,7 +9,9 @@ import {
     getFrontend,
     getBackend,
     IModel,
-    Setting
+    Setting,
+    fetchPost,
+    Protyle
 } from "siyuan";
 import "@/index.scss";
 
@@ -83,8 +85,7 @@ export default class PluginSample extends Plugin {
         new HelloExample({
             target: tabDiv,
             props: {
-                name: this.i18n.name,
-                i18n: this.i18n.hello
+                app: this.app,
             }
         });
         this.customTab = this.addTab({
@@ -167,6 +168,15 @@ export default class PluginSample extends Plugin {
             actionElement: btnaElement,
         });
 
+        this.protyleSlash = [{
+            filter: ["insert emoji 😊", "插入表情 😊", "crbqwx"],
+            html: `<div class="b3-list-item__first"><span class="b3-list-item__text">${this.i18n.insertEmoji}</span><span class="b3-list-item__meta">😊</span></div>`,
+            id: "insertEmoji",
+            callback(protyle: Protyle) {
+                protyle.insert("😊");
+            }
+        }];
+
         console.log(this.i18n.helloPlugin);
     }
 
@@ -225,11 +235,10 @@ export default class PluginSample extends Plugin {
                 // hello.$destroy();
             },
         });
-        let hello = new HelloExample({
+        new HelloExample({
             target: dialog.element.querySelector("#helloPanel"),
             props: {
-                name: this.i18n.name,
-                i18n: this.i18n.hello
+                app: this.app,
             }
         });
     }
@@ -240,10 +249,10 @@ export default class PluginSample extends Plugin {
         });
         menu.addItem({
             icon: "iconInfo",
-            label: "Dialog",
+            label: "Dialog(open help first)",
             accelerator: this.commands[0].customHotkey,
             click: () => {
-                this.showDialog()
+                this.showDialog();
             }
         });
         if (!this.isMobile) {
diff --git a/src/libs/setting-item.svelte b/src/libs/setting-item.svelte
index 74e08b5..b728cf4 100644
--- a/src/libs/setting-item.svelte
+++ b/src/libs/setting-item.svelte
@@ -13,7 +13,7 @@
         min: number;
         max: number;
         step: number;
-    } = {min: 0, max: 100, step: 1}; // Use it if type is slider
+    } = { min: 0, max: 100, step: 1 }; // Use it if type is slider
 
     const dispatch = createEventDispatcher();
 
@@ -76,15 +76,17 @@
         </select>
     {:else if type == "slider"}
         <!-- Slider -->
-        <input
-            class="b3-slider fn__size200"
-            id="fontSize"
-            min="{slider.min}"
-            max="{slider.max}"
-            step="{slider.step}"
-            type="range"
-            bind:value={settingValue}
-            on:change={changed}
-        />
+        <div class="b3-tooltips b3-tooltips__n" aria-label={settingValue}>
+            <input
+                class="b3-slider fn__size200"
+                id="fontSize"
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                type="range"
+                bind:value={settingValue}
+                on:change={changed}
+            />
+        </div>
     {/if}
 </label>