diff --git a/src/components/code-editor.vue b/src/components/code-editor.vue
index fb52237..346ae82 100644
--- a/src/components/code-editor.vue
+++ b/src/components/code-editor.vue
@@ -1,9 +1,16 @@
 <template>
-  <div class="code-editor" ref="container"></div>
+  <div class="container" ref="container"></div>
 </template>
 
 <script>
-import { EditorView, minimalSetup, vue, js, css, html } from '@bytedo/editor'
+import {
+  EditorView,
+  minimalSetup,
+  vue,
+  javascript,
+  css,
+  html
+} from '@bytedo/editor'
 
 export default {
   props: {
@@ -13,8 +20,8 @@ export default {
 
   mounted() {
     this.$view = new EditorView({
-      doc: '',
-      extensions: minimalSetup(vue()),
+      doc: this.code,
+      extensions: minimalSetup(vue(), EditorView.lineWrapping),
       parent: this.$refs.container
     })
   }
@@ -22,6 +29,11 @@ export default {
 </script>
 
 <style>
+.container {
+  width: 50%;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-plain-2);
+}
 .cm-editor {
   width: 100%;
   height: 100%;
diff --git a/src/pages/index/app.vue b/src/pages/index/app.vue
new file mode 100644
index 0000000..7586b08
--- /dev/null
+++ b/src/pages/index/app.vue
@@ -0,0 +1,12 @@
+<template>
+  <h1>it works!</h1>
+  <div><a href="/playground.html">plyaground</a></div>
+</template>
+
+<script>
+export default {
+  components: {}
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/src/pages/index/main.js b/src/pages/index/main.js
index e69de29..ca3de47 100644
--- a/src/pages/index/main.js
+++ b/src/pages/index/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './app.vue'
+
+const app = createApp(App)
+
+app.mount('.app')
diff --git a/src/pages/playground/app.vue b/src/pages/playground/app.vue
index e2c9953..086bb3e 100644
--- a/src/pages/playground/app.vue
+++ b/src/pages/playground/app.vue
@@ -1,13 +1,54 @@
 <template>
-  <CodeEditor></CodeEditor>
+  <Topbar />
+  <div class="playground">
+    <CodeEditor :code="code" />
+    <Preview />
+  </div>
 </template>
 
 <script>
 import CodeEditor from '@/components/code-editor.vue'
+import Topbar from './views/topbar.vue'
+import Preview from './views/preview.vue'
 
 export default {
-  components: { CodeEditor }
+  components: { Topbar, CodeEditor, Preview },
+  data() {
+    return {
+      code: `<!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">
+  <title>{{title}}</title>
+  <meta name="keywords" content="{{keywords}}">
+  <meta name="description" content="{{description}}">
+  <link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
+  <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
+  <script type="importmap">{{importmap}}<\/script>
+<\/head>
+<body>
+  <div class="app noselect"></div>
+  <script src="main.js"><\/script>
+<\/body>
+<\/html>
+`
+    }
+  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  color: var(--color-dark-1);
+}
+
+.playground {
+  display: flex;
+  height: calc(100vh - 48px);
+}
+</style>
diff --git a/src/pages/playground/main.js b/src/pages/playground/main.js
index 0736249..c5f2f19 100644
--- a/src/pages/playground/main.js
+++ b/src/pages/playground/main.js
@@ -5,4 +5,4 @@ import store from './store'
 
 const app = createApp(App)
 
-app.use(router).use(store).mount('.app')
+app.use(store).mount('.app')
diff --git a/src/pages/playground/view/about.vue b/src/pages/playground/view/about.vue
deleted file mode 100644
index 24aa159..0000000
--- a/src/pages/playground/view/about.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-<script>
-export default {
-  data(){
-    return {
-      content: '这是关于我们页面'
-    }
-  }
-}
-</script>
-
-<template>
-  <main>
-    <h1>{{content}}</h1>
-    <cite>当前vue-live版本: v{{$store.version}}</cite>
-  </main>
-</template>
-    
diff --git a/src/pages/playground/view/home.vue b/src/pages/playground/views/preview.vue
similarity index 51%
rename from src/pages/playground/view/home.vue
rename to src/pages/playground/views/preview.vue
index 987c694..7458b74 100644
--- a/src/pages/playground/view/home.vue
+++ b/src/pages/playground/views/preview.vue
@@ -1,7 +1,10 @@
+<template>
+  <main class="preview"></main>
+</template>
 
 <script>
 export default {
-  data(){
+  data() {
     return {
       content: '欢迎访问~~ 这是首页'
     }
@@ -9,9 +12,9 @@ export default {
 }
 </script>
 
-<template>
-  <main>
-    <h1>{{content}}</h1>
-  </main>
-</template>
-    
+<style lang="scss" scoped>
+.preview {
+  width: 50%;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/pages/playground/views/topbar.vue b/src/pages/playground/views/topbar.vue
new file mode 100644
index 0000000..411edb9
--- /dev/null
+++ b/src/pages/playground/views/topbar.vue
@@ -0,0 +1,38 @@
+<template>
+  <header class="topbar noselect">
+    <a class="logo">@bd/ui playground</a>
+
+    <a class="github" href="//github.com/bd-js/wcui" target="_blank">github</a>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--color-plain-2);
+}
+
+.logo {
+  font-size: 18px;
+  color: var(--color-red-2);
+}
+
+.github {
+  color: var(--color-dark-1);
+}
+</style>
diff --git a/vue.live.js b/vue.live.js
index 27187d7..9c8401e 100644
--- a/vue.live.js
+++ b/vue.live.js
@@ -12,6 +12,10 @@ export default {
     }
   },
   pages: {
+    index: {
+      entry: resolve('./src/pages/index/main.js'),
+      title: 'home page'
+    },
     playground: {
       entry: resolve('./src/pages/playground/main.js'),
       title: '@bd/ui Playground'
