diff --git a/README.md b/README.md
index 5e4993ec..f493ac4e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # Yank Note
-> 一款面向程序员的 Markdown 笔记应用
+> 一款面向程序员的 Markdown 笔记应用 **[在线体验>>>](https://yn-phi.vercel.app/)**
 
 [![Release](https://github.com/purocean/yn/workflows/Release/badge.svg)](https://github.com/purocean/yn/releases)
 
diff --git a/frontend/src/components/Xterm.vue b/frontend/src/components/Xterm.vue
index 18aa27d1..3a460396 100644
--- a/frontend/src/components/Xterm.vue
+++ b/frontend/src/components/Xterm.vue
@@ -11,7 +11,7 @@ import { useStore } from 'vuex'
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import { useBus } from '../useful/bus'
-import { $args, FLAG_DISABLE_XTERM } from '../useful/global-args'
+import { $args, FLAG_DEMO, FLAG_DISABLE_XTERM } from '../useful/global-args'
 import { getLogger } from '../useful/utils'
 
 const logger = getLogger('component-x-term')
@@ -67,6 +67,12 @@ export default defineComponent({
         xterm.open(refXterm.value!!)
         fitAddon.fit()
         bus.on('resize', fitXterm)
+
+        if (FLAG_DEMO) {
+          const message = 'DEMO 模式终端不可用'
+          xterm.write(message)
+          return
+        }
       }
 
       if (!socket) {
diff --git a/frontend/src/demo.ts b/frontend/src/demo.ts
new file mode 100644
index 00000000..57d9d417
--- /dev/null
+++ b/frontend/src/demo.ts
@@ -0,0 +1,69 @@
+import { FLAG_DEMO } from './useful/global-args'
+import { useToast } from './useful/toast'
+import file from './useful/file'
+
+if (FLAG_DEMO) {
+  const xFetch = window.fetch
+
+  file.upload = (repo, path, fileData: File) => Promise.resolve({
+    repo,
+    path,
+    relativePath: URL.createObjectURL(fileData)
+  })
+
+  window.addEventListener('click', e => {
+    const target = e.target as HTMLElement
+    if (target.parentElement?.tagName === 'FORM' && target.innerText.includes('docx')) {
+      const message = 'DEMO 模式下该功能不可用'
+      useToast().show('warning', message)
+
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }, true)
+
+  window.addEventListener('error', e => {
+    const target = e.target as HTMLImageElement
+    if (target.tagName === 'IMG' && target.src.includes('/api/plantuml')) {
+      target.src = 'data:image/png;base64,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'
+    } else {
+      console.error(e)
+    }
+  }, true)
+
+  window.fetch = (uri: any, init: any) => Promise.resolve({
+    json: () => {
+      console.log('mock api >', uri, init)
+
+      const method = (init && init.method) || 'GET'
+
+      if (uri.startsWith('/api/repositories')) {
+        return Promise.resolve({ status: 'ok', message: '获取成功', data: { test: '/test' } })
+      }
+
+      if (uri.startsWith('/api/tree')) {
+        return Promise.resolve({ status: 'ok', message: '获取成功', data: [{ name: '/', type: 'dir', path: '/', repo: 'test', children: [{ name: '工作', path: '工作', type: 'dir', repo: 'test', children: [{ name: '1.md', path: '工作/1.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635402958.447, mtime: 1623635402958.447 }, { name: '2.md', path: '工作/2.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635406528.4639, mtime: 1623635406528.4639 }, { name: '3.md', path: '工作/3.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635410176.051, mtime: 1623635410177.0498 }] }, { name: '学习', path: '学习', type: 'dir', repo: 'test', children: [{ name: 'a.md', path: '学习/a.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635423871.2678, mtime: 1623635423871.2678 }, { name: 'b.md', path: '学习/b.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635427472.3079, mtime: 1623635427472.3079 }, { name: 'c.md', path: '学习/c.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635431935.041, mtime: 1623635431935.041 }] }, { name: 'TEST.md', path: 'TEST.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635389096.3315, mtime: 1623635389097.3403 }, { name: 'TODO.md', path: 'TODO.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635437968.1262, mtime: 1623635437969.1235 }, { name: '重要账号.c.md', path: '重要账号.c.md', type: 'file', repo: 'test', marked: false, birthtime: 1623635542753.2976, mtime: 1623635542753.2976 }] }] })
+      }
+
+      if (uri.startsWith('/api/help') || uri.startsWith('/api/file')) {
+        if (method === 'POST') {
+          return Promise.resolve({ status: 'ok', message: '保存成功' })
+        } else if (method === 'GET') {
+          return xFetch('/FEATURES.md').then(res => res.text()).then(md => ({
+            status: 'ok',
+            message: '获取成功',
+            data: {
+              content: md,
+              hash: 'test'
+            }
+          }))
+        }
+      }
+
+      const message = 'DEMO 模式下该功能不可用'
+      useToast().show('warning', message)
+
+      return Promise.resolve({ status: 'error', message })
+    }
+  } as any)
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index acfda8fb..9fe0a901 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import './demo'
 import App from './App.vue'
 import router from './router'
 import store from './store'
diff --git a/frontend/src/useful/global-args.ts b/frontend/src/useful/global-args.ts
index df018932..c36e1d57 100644
--- a/frontend/src/useful/global-args.ts
+++ b/frontend/src/useful/global-args.ts
@@ -3,3 +3,4 @@ export function $args () {
 }
 
 export const FLAG_DISABLE_XTERM = false
+export const FLAG_DEMO = process.env.NODE_ENV === 'demo'