diff --git a/docs/.vuepress/components/Tool-Dotwe.vue b/docs/.vuepress/components/Tool-Dotwe.vue
new file mode 100644
index 0000000..18b2b5f
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Dotwe.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="wrap">
+    <div class="warning">
+      <p class="warning-icon">WARNING</p>
+      <p>{{lang === 'en-US' ? 'Online Playground is a third party editor, and is not developed nor maintained by Apache Weex.' : 'Online Playground 是三方编辑器, 不由 Apache Weex 开发或维护。'}}</p>
+    </div>
+    <img class="editor hide" src="https://img.alicdn.com/tfs/TB1OFpuI4naK1RjSZFBXXcW7VXa-1936-1188.png" />
+    <div class="link">
+      <h3 class="title">{{lang === 'en-US' ? 'Online Editor' : '在线编辑器'}}</h3>
+      <div class="desc">{{lang === 'en-US' ? 'Weex Online Editor for developers. Developer don\'t need install anything. Also, it\'s convenient for talking about some developing issue.' : 'Weex 在线编辑器，无需安装任何环境，马上开始Weex代码开发。交流Weex代码的利器！'}}</div>
+      <a href="http://editor.weex.io" target="_blank" class="btn">{{lang === 'en-US' ? 'Open Editor' : '打开在线编辑器'}}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang']
+}
+</script>
+
+<style scoped>
+.wrap {
+  position: relative;
+  display: flex;
+  height: calc(100vh - 3.6rem);
+  margin-top: 3.6rem !important;
+  padding-left: 11rem;
+  background: url(https://img.alicdn.com/tfs/TB1WrU8IQvoK1RjSZPfXXXPKFXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.warning {
+  position: absolute;
+  width: 100%;
+  border-color: #f63;
+  background-color: #fff2ee;
+  padding: .1rem 1rem;
+  border-left-width: .2rem;
+}
+.warning-icon {
+  padding-left: 21px;
+  color: #606273;
+  background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat;
+  font-weight: 600;
+  margin-bottom: -.4rem;
+}
+.warning-icon + p {
+  color: #4d0000;
+}
+.editor {
+  margin-top: 7.2rem;
+  height: calc(100vh - 3.6rem - 7.2rem);
+}
+.link {
+  margin-left: -140px;
+  width: 250px;
+}
+.title {
+  padding-top: 150px;
+  margin-top: 0;
+  margin-bottom: 6px;
+  line-height: 56px;
+  font-family: PingFangSC-Semibold;
+  font-size: 40px;
+  color: #373D41;
+}
+.desc {
+  line-height: 20px;
+  font-size: 14px;
+  color: #373D41;
+  margin-bottom: 32px;
+}
+.btn {
+  display: inline-block;
+  width: 176px;
+  height: 48px;
+  line-height: 48px;
+  color: #fff;
+  font-size: 16px;
+  background: #00B4FF;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  text-align: center;
+}
+.btn:hover {
+  text-decoration: none !important;
+}
+
+@media (max-width: 1200px) { 
+  .hide {
+    display: none;
+  }
+  .link {
+    margin-left: 0;
+    width: auto;
+    text-align: center;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .wrap {
+    display: block;
+  }
+}
+
+@media (max-width: 720px) {
+  .wrap {
+    padding-left: 0;
+    background-position-x: 0;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/Tool-Playground.vue b/docs/.vuepress/components/Tool-Playground.vue
new file mode 100644
index 0000000..a821a0f
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Playground.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="wrap">
+    <img class="phone hide" src="https://img.alicdn.com/tfs/TB1mvFeI7voK1RjSZFwXXciCFXa-976-1420.png" />
+    <div class="download">
+      <h3 class="title">Weex Playground</h3>
+      <div class="desc">{{lang === 'en-US' ? 'Weex Native Runtime showcase & Weex vue file preview.' : 'Weex 示例App，可扫码预览Weex代码构建后的页面。'}}</div>
+      <img src="/tool-playground-qrcode.png" width="128" />
+      <div class="desc2">{{lang === 'en-US' ? 'scan the qrcode and download the app' : '扫二维码下载该APP'}}</div>
+      <div><a href="https://itunes.apple.com/cn/app/weex-playground/id1130862662?mt=8" target="_blank" class="btn"><img src="/tool-playground-apple-icon.png" width="12" />{{lang === 'en-US' ? 'iOS' : 'iOS版下载'}}</a><a href="http://appdownload.alicdn.com/publish/weex_playgroud/latest/weex_playgroud_10006024.apk" class="btn" ><img src="/tool-playground-android-icon.png" width="12"/>{{lang === 'en-US' ? 'Android' : 'Android版下载'}}</a></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang']
+}
+</script>
+
+
+<style scoped>
+.wrap {
+  display: flex;
+  height: calc(100vh - 3.6rem);
+  margin-top: 3.6rem !important;
+  padding-left: 11rem;
+  background: url(https://img.alicdn.com/tfs/TB1qzBXI7voK1RjSZFNXXcxMVXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.phone {
+  height: calc(100vh - 3.6rem);
+}
+.download {
+  margin-left: 130px;
+  text-align: center;
+}
+.title {
+  margin-top: 0;
+  padding-top: 140px;
+  margin-bottom: 6px;
+  line-height: 56px;
+  font-family: PingFangSC-Semibold;
+  font-size: 40px;
+  color: #373D41;
+}
+.desc {
+  line-height: 20px;
+  font-size: 14px;
+  color: #373D41;
+  margin-bottom: 38px;
+}
+.desc2 {
+  margin-top: 5px;
+  margin-bottom: 24px;
+  line-height: 22px;
+  font-size: 12px;
+  color: #373D41;
+}
+.btn {
+  display: inline-block;
+  width: 158px;
+  height: 48px;
+  line-height: 48px;
+  color: #fff;
+  font-size: 16px;
+  background: #00B4FF;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-bottom: 10px;
+}
+.btn:hover {
+  text-decoration: none !important;
+}
+.btn > img {
+  margin-right: 5px;
+}
+
+@media (max-width: 1050px) { 
+  .hide {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .wrap {
+    display: block;
+    padding-left: 0;
+    background-position-x: 0;
+  }
+  .download {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/docs/tools/dotwe.md b/docs/tools/dotwe.md
new file mode 100644
index 0000000..224b3f4
--- /dev/null
+++ b/docs/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe lang="en-US" />
\ No newline at end of file
diff --git a/docs/tools/playground.md b/docs/tools/playground.md
index 6796501..0a5ba7f 100644
--- a/docs/tools/playground.md
+++ b/docs/tools/playground.md
@@ -1 +1,5 @@
-# Playground App
\ No newline at end of file
+---
+pageClass: tool
+---
+
+<Tool-Playground lang="en-US"/>
\ No newline at end of file
diff --git a/docs/zh/tools/dotwe.md b/docs/zh/tools/dotwe.md
new file mode 100644
index 0000000..a526877
--- /dev/null
+++ b/docs/zh/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe />
\ No newline at end of file
diff --git a/docs/zh/tools/playground.md b/docs/zh/tools/playground.md
index 6796501..022cedf 100644
--- a/docs/zh/tools/playground.md
+++ b/docs/zh/tools/playground.md
@@ -1 +1,5 @@
-# Playground App
\ No newline at end of file
+---
+pageClass: tool
+---
+
+<Tool-Playground />
\ No newline at end of file