diff --git a/src/components/code-editor.vue b/src/components/code-editor.vue
index 7b43ece..84209bf 100644
--- a/src/components/code-editor.vue
+++ b/src/components/code-editor.vue
@@ -21,13 +21,15 @@ export default {
   watch: {
     code(v) {
       let doc = this.$view.state.doc
+      let { anchor } = this.$view.state.selection.main
 
       this.$view.dispatch({
         changes: {
           from: 0,
           to: doc.length,
           insert: v
-        }
+        },
+        selection: { anchor } // 恢复之前的光标位置
       })
     }
   },
@@ -49,12 +51,12 @@ export default {
         EditorView.lineWrapping,
         // 监听代码变化
         EditorView.updateListener.of(v => {
-          let value = v.state.doc.toString().trim()
-          if (!this.$last || value === this.$last) {
-            this.$last = value
+          let value = v.state.doc.toString()
+          if (!this.$last || value.trim() === this.$last) {
+            this.$last = value.trim()
             return
           }
-          this.$last = value
+          this.$last = value.trim()
           this.$emit('change', value, lang)
         })
       ),
@@ -75,5 +77,6 @@ export default {
 .cm-editor {
   width: 100%;
   height: 100%;
+  outline: none !important;
 }
 </style>
diff --git a/src/pages/playground/app.vue b/src/pages/playground/app.vue
index d8679bd..aa0fa67 100644
--- a/src/pages/playground/app.vue
+++ b/src/pages/playground/app.vue
@@ -12,7 +12,7 @@
         <CodeEditor lang="css" :code="css" @change="updateCode" />
       </wc-tab>
     </wc-tabs>
-    <Preview :code="preview" />
+    <Preview ref="preview" />
   </div>
 </template>
 
@@ -23,35 +23,6 @@ import Preview from './views/preview.vue'
 
 import { gzip, ungzip } from '@bytedo/gzip'
 
-const template = `<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-  <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
-  {{css}}
-  <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
-  <script type="importmap">${JSON.stringify({
-    imports: {
-      vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
-      'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
-      fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
-      '@bytedo/editor': '//jscdn.ink/@bytedo/editor/latest/index.js',
-      '@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/latest/index.js',
-      '@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
-    }
-  })}<\/script>
-  <script type="module">
-  {{js}}
-  <\/script>
-</head>
-<body>
-  {{html}}
-<\/body>
-<\/html>
-`
-
 export default {
   components: { Topbar, CodeEditor, Preview },
   data() {
@@ -93,22 +64,21 @@ export default {
     },
 
     updateCode(code, lang) {
+      let { html, js, css } = this
+      let codez
       this[lang] = code
-      this.updatePreview(true)
+
+      codez = gzip(JSON.stringify({ html, js, css, [lang]: code }))
+
+      this.$needUpdate = false
+      location.hash = codez
+
+      this.$refs.preview.render({ [lang]: code })
     },
     updatePreview(sync) {
       let { html, js, css } = this
 
-      if (sync) {
-        let code = gzip(JSON.stringify({ html, js, css }))
-        this.$needUpdate = false
-        location.hash = code
-      }
-
-      this.preview = template
-        .replace('{{css}}', css)
-        .replace('{{html}}', html)
-        .replace('{{js}}', js)
+      this.$refs.preview.render({ html, js, css })
     }
   }
 }
diff --git a/src/pages/playground/views/preview.vue b/src/pages/playground/views/preview.vue
index 3a2b2da..67f107b 100644
--- a/src/pages/playground/views/preview.vue
+++ b/src/pages/playground/views/preview.vue
@@ -3,31 +3,56 @@
     <div class="loading">
       <span class="thumb" :style="{ width: progress + '%' }"></span>
     </div>
-    <iframe class="web" ref="preview"></iframe>
+    <iframe class="web" ref="view"></iframe>
   </main>
 </template>
 
 <script>
 import { nextTick } from 'vue'
 
+const template = `<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+  <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
+  <style name="css"></style>
+  <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
+  <script type="importmap">${JSON.stringify({
+    imports: {
+      vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
+      'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
+      fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
+      '@bytedo/editor': '//jscdn.ink/@bytedo/editor/latest/index.js',
+      '@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/latest/index.js',
+      '@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
+    }
+  })}<\/script>
+</head>
+<body><\/body>
+<\/html>
+`
+
 let startTime = 0
+let pending = false
 
 export default {
-  props: {
-    code: ''
-  },
-
   data() {
     return {
       progress: 0
     }
   },
 
-  watch: {
-    code(v) {
-      // console.log(v)
-      this.updatePreview(v)
-    }
+  mounted() {
+    this.$code = {}
+
+    try {
+      let doc = this.$refs.view.contentDocument
+      doc.open()
+      doc.write(template)
+      doc.close()
+    } catch (e) {}
   },
 
   methods: {
@@ -39,26 +64,47 @@ export default {
       let _time = stamp - startTime
 
       // _time / 2000 * 100 %
-      this.progress = ~~(_time / 20)
+      this.progress = ~~(_time / 10)
 
-      if (_time > 2000) {
+      if (pending && _time > 1000) {
         this.progress = 0
-        let doc = this.$refs.preview.contentDocument
+        let doc = this.$refs.view.contentDocument
+
+        for (let k in this.$code) {
+          switch (k) {
+            case 'html':
+              doc.body.innerHTML = this.$code[k]
+              break
+            case 'js':
+              if (doc.head.children.namedItem('js')) {
+                doc.head.children.namedItem('js').textContent = this.$code[k]
+              } else {
+                let script = document.createElement('script')
+                script.name = 'js'
+                script.type = 'module'
+                script.textContent = this.$code[k]
+                doc.head.append(script)
+              }
+              break
+            case 'css':
+              doc.head.children.namedItem('css').textContent = this.$code[k]
+              break
+          }
+        }
+
+        pending = false
 
-        try {
-          doc.open()
-          doc.write(this.code)
-          doc.close()
-        } catch (e) {}
         return
       }
 
       requestAnimationFrame(this.loading)
     },
 
-    updatePreview(html) {
+    render(code = {}) {
       startTime = 0
+      pending = true
       this.progress = 0
+      this.$code = code
 
       requestAnimationFrame(this.loading)
     }
