diff --git a/docs/.vuepress/components/Code-Demos.vue b/docs/.vuepress/components/Code-Demos.vue
new file mode 100644
index 0000000..4780fbd
--- /dev/null
+++ b/docs/.vuepress/components/Code-Demos.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <h3 class="title">{{lang === 'en-US' ? 'Code Demos' : '代码示例'}}</h3>
+    <div class="wrap">
+      <div class="demo" v-for="item in list" :key="item.index">
+        <a :href="item.prefix" target="_blank">
+          <div class="pic-wrap">
+            <img class="demo-pic" :src="item.imgoss" width="202" height="316" />
+          </div>
+          <div class="demo-name">{{item.title}}</div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import list from '../data/code-demos.js'
+
+export default {
+  props: ['lang'],
+  data() {
+    return {
+      list,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  width: 910px;
+  line-height: 33px;
+  font-family: PingFangSC-Medium;
+  font-size: 24px;
+  color: #373D41;
+  text-align: center;
+  margin-top: 78px;
+  margin-bottom: 20px;
+}
+.wrap {
+  width: 970px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.demo {
+  padding: 20px;
+  padding-bottom: 0;
+  margin-bottom: 30px;
+}
+.demo a:hover{
+  text-decoration: none;
+}
+.demo-pic {
+  display: block;
+}
+.demo-name {
+  text-align: center;
+  line-height: 17px;
+  font-size: 12px;
+  color: #373D41;
+  margin-top: 12px;
+}
+.pic-wrap {
+  position: relative;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
+}
+.icons {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 28px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: all .2s ease,transform .2s ease; 
+}
+.icons > a {
+  flex: 1;
+  font-size: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.pic-wrap img {
+  transition: box-shadow .2s ease,transform .2s ease;
+}
+
+.pic-wrap:hover .icons {
+  opacity: 1;
+}
+
+.pic-wrap:hover img {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 867c0bb..a063d44 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -236,10 +236,8 @@
             ['eeui', 'EEUI Framework']
           ],
           '/community/': [
-            [
-              "who-is-using-weex",
-              "Who is using Weex"
-            ],
+            ['code-demos', 'Code Demos'],
+            ['who-is-using-weex', 'Who is using Weex'],
             ['weex-third-party-extensions', 'Plugins Market']
           ],
           '/blog/': [
@@ -426,8 +424,9 @@
             ["eeui", "EEUI 框架"]
           ],
           '/zh/community/': [
-            ['weex-third-party-extensions', '插件市场'],
-            ["who-is-using-weex","谁在使用Weex"],
+            ['code-demos', '代码示例'],
+            ['who-is-using-weex', '谁在使用Weex'],
+            ['weex-third-party-extensions', '插件市场']
           ],
           '/zh/blog/': [
             ['write-a-blog', '写一篇博客'],
diff --git a/docs/.vuepress/data/code-demos.js b/docs/.vuepress/data/code-demos.js
new file mode 100644
index 0000000..68aca88
--- /dev/null
+++ b/docs/.vuepress/data/code-demos.js
@@ -0,0 +1,393 @@
+export
+default[
+  {
+    "title": "CSS Watermelon",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/f369e040-3a8e-11e9-9d7b-9fda7038a309TB1RIzDdx6I8KJjy0FgXXXXzVXa-540-844.png",
+    "labels": "css,style,watermelon",
+    "prefix": "http://editor.weex.io/p/Hanks10100/css-watermelon",
+  },
+  {
+    "title": "Transparent Background",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/d528d1e0-3a8e-11e9-97dc-7d9ed4675c56TB1CL3nbMDD8KJjy0FdXXcjvXXa-540-844.png",
+    "labels": "css,style,transparent",
+    "prefix": "http://editor.weex.io/p/Hanks10100/transparent-backgrou",
+  },
+  {
+    "title": "Design Board",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/b7a3e790-3a8e-11e9-9d7b-9fda7038a309TB1kU3abRTH8KJjy0FiXXcRsXXa-540-844.png",
+    "labels": "css,style,background",
+    "prefix": "http://editor.weex.io/p/Hanks10100/mesh-bg",
+  },
+  {
+    "title": "CSS Pseudo-class",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/93ec3a50-3a8e-11e9-9e5a-fbf9235adc8bTB1J7goczihSKJjy0FlXXadEXXa-540-844.png",
+    "labels": "css,pseudo,style,selector",
+    "prefix": "http://editor.weex.io/p/Hanks10100/css-pseudo-class",
+  },
+  {
+    "title": "Box Shadow",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/699e9b80-3a8e-11e9-a8cf-4f872f4653f2TB1J7goczihSKJjy0FlXXadEXXa-540-844.png",
+    "labels": "box-shadow,css,style",
+    "prefix": "http://editor.weex.io/p/Hanks10100/box-shadow",
+  },
+  {
+    "title": "Linear Gradient",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/4e2f23b0-3a8e-11e9-9e5a-fbf9235adc8bTB1JQCEhgoQMeJjy1XaXXcSsFXa-540-844.png",
+    "labels": "css,style,linear-gradient,background",
+    "prefix": "http://editor.weex.io/p/Hanks10100/linear-gradient",
+  },
+  {
+    "title": "Robot",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/2d24e330-3a8e-11e9-8747-a9584b64cfa5TB1CCP1ewMPMeJjy1XdXXasrXXa-540-844.png",
+    "labels": "css,position,layout,style",
+    "prefix": "http://editor.weex.io/p/Hanks10100/robot",
+  },
+  {
+    "title": "Set and Get Storage",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/ddbd9620-3a8d-11e9-9e5a-fbf9235adc8bTB1vhlCA1uSBuNjy1XcXXcYjFXa-540-844.png",
+    "labels": "storage,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/storage-module",
+  },
+  {
+    "title": "navigator.push",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/9387efb0-3a8d-11e9-8747-a9584b64cfa5TB1Wh_CcILJ8KJjy0FnXXcFDpXa-540-844.png",
+    "labels": "navigator,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/navigator-push",
+  },
+  {
+    "title": "navigator.back",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/7b4e4e80-3a8d-11e9-8e7e-5f0d891a2b94TB1syzscMvD8KJjy0FlXXagBFXa-540-844.png",
+    "labels": "navigator,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/navigator-back",
+  },
+  {
+    "title": "Simple Animation",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/bed2a8a0-3a8c-11e9-9d7b-9fda7038a309TB1p5DPA_tYBeNjy1XdXXXXyVXa-540-844.png",
+    "labels": "animation,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/animation",
+  },
+  {
+    "title": "Send Network Request",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/8a90f920-3a8c-11e9-8e7e-5f0d891a2b94TB1SAFdbLDH8KJjy1XcXXcpdXXa-540-844.png",
+    "labels": "stream,module,network",
+    "prefix": "http://editor.weex.io/p/Hanks10100/stream-module",
+  },
+  {
+    "title": "Using iconfont",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/53db1550-3a8c-11e9-a8cf-4f872f4653f2TB1_ltpA7yWBuNjy0FpXXassXXa-540-844.png",
+    "labels": "module,addrule,iconfont",
+    "prefix": "http://editor.weex.io/p/Hanks10100/iconfont",
+  },
+  {
+    "title": "dom.getComponentRect",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/32c933b0-3a8c-11e9-97dc-7d9ed4675c56TB1v5zscMvD8KJjy0FlXXagBFXa-540-844.png",
+    "labels": "dom,module,layout,position",
+    "prefix": "http://editor.weex.io/p/Hanks10100/get-component-rect",
+  },
+  {
+    "title": "modal.prompt",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/fa2b2ef0-3a8b-11e9-ac48-d7245a91cf1eTB13B9gdgoQMeJjy0FpXXcTxpXa-540-844.png",
+    "labels": "modal,prompt,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/modal-prompt",
+  },
+  {
+    "title": "modal.confirm",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/e2beefe0-3a8b-11e9-8747-a9584b64cfa5TB1PWmedogQMeJjy0FjXXaExFXa-540-844.png",
+    "labels": "modal,module.confirm",
+    "prefix": "http://editor.weex.io/p/Hanks10100/modal-confirm",
+  },
+  {
+    "title": "modal.alert",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/c79de630-3a8b-11e9-8747-a9584b64cfa5TB1JsqddgoQMeJjy1XaXXcSsFXa-540-844.png",
+    "labels": "alert,modal,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/alert-module",
+  },
+  {
+    "title": "Toast module",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/a579aa30-3a8b-11e9-8747-a9584b64cfa5TB1TPWcdogQMeJjy0FiXXXhqXXa-540-844.png",
+    "labels": "toast,module",
+    "prefix": "http://editor.weex.io/p/Hanks10100/toast-module",
+  },
+  {
+    "title": "<recycle-list> with computed data",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/633c4470-3a8b-11e9-97dc-7d9ed4675c56TB1X10oovDH8KJjy1XcXXcpdXXa-540-844.png",
+    "labels": "recycle-list,component,computed,stateful",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-compute",
+  },
+  {
+    "title": "<recycle-list> remove cell",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/39212750-3a8b-11e9-8747-a9584b64cfa5TB1j5d_XVGWBuNjy0FbXXb4sXXa-540-844.png",
+    "labels": "recycle-list,component,remove",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-remove-",
+  },
+  {
+    "title": "<recycle-list> with stateful component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/1fe3d1c0-3a8b-11e9-8747-a9584b64cfa5TB1AxNRor_I8KJjy1XaXXbsxpXa-540-844.png",
+    "labels": "recycle-list,component,stateful",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-statefu",
+  },
+  {
+    "title": "<recycle-list> update props",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/ef7cc460-3a8a-11e9-9e5a-fbf9235adc8bTB1LeVoovDH8KJjy1XcXXcpdXX2a-540-844.png",
+    "labels": "recycle-list,component,props",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-update-",
+  },
+  {
+    "title": "<recycle-list> with sub component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/cfd918c0-3a8a-11e9-a8cf-4f872f4653f2TB101VoovDH8KJjy1XcXXcpdXXa-540-844.png",
+    "labels": "recycle-list,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-sub-com",
+  },
+  {
+    "title": "<recycle-list> Horizontal Scroll",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/74d5fe70-3a8a-11e9-9e5a-fbf9235adc8bTB12wdnAYGYBuNjy0FoXXciBFXa-540-844.png",
+    "labels": "recycle-list,component,scroll",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-h-scrol",
+  },
+  {
+    "title": "<recycle-list> Infinite Scroll",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/470d1b90-3a8a-11e9-8747-a9584b64cfa5TB1JGrQilfH8KJjy1XbXXbLdXXa-540-844.png",
+    "labels": "recycle-list,component,scroll",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-scroll",
+  },
+  {
+    "title": "<recycle-list> \"loadmore\" event",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/21fc9510-3a8a-11e9-bc60-b53ef9d70989TB1tK66cMMPMeJjy1XcXXXpppXa-540-844.png",
+    "labels": "recycle-list,component,event,loadmore",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-loadmor",
+  },
+  {
+    "title": "<recycle-list> style binding",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/dfacb8c0-3a89-11e9-8e7e-5f0d891a2b94TB14K04oTnI8KJjy0FfXXcdoVXa-540-844.png",
+    "labels": "recycle-list,style,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-style-b",
+  },
+  {
+    "title": "<recycle-list> with v-once",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/bb6cc8b0-3a89-11e9-8e7e-5f0d891a2b94TB1AxNRor_I8KJjy1XaXXbsxpXa-540-844.png",
+    "labels": "recycle-list,component,v-once",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-v-once",
+  },
+  {
+    "title": "<recycle-list> handle event",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/92e8ed60-3a89-11e9-9e5a-fbf9235adc8bTB1BjcCom_I8KJjy0FoXXaFnVXa-540-844.png",
+    "labels": "recycle-list,event,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-event",
+  },
+  {
+    "title": "<recycle-list> with v-else",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/f3fb6b80-3a86-11e9-8747-a9584b64cfa5TB1bsM4ohrI8KJjy0FpXXb5hVXa-540-844.png",
+    "labels": "recycle-list,component,v-else",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-v-else",
+  },
+  {
+    "title": "<recycle-list> multi v-for",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/c6d04f40-3a86-11e9-9e5a-fbf9235adc8bTB1giSLfwoQMeJjy0FoXXcShVXa-540-844.png",
+    "labels": "recycle-list,component,v-for",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-multi-v",
+  },
+  {
+    "title": "<recycle-list> with v-for",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/9a195190-3a86-11e9-ac48-d7245a91cf1eTB1juElXjihSKJjy0FfXXbGzFXa-540-844.png",
+    "labels": "recycle-list,component,v-for",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-v-for",
+  },
+  {
+    "title": "<recycle-list> Attribute Binding",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/571196f0-3a86-11e9-ac48-d7245a91cf1eTB1_pLKolfH8KJjy1XbXXbLdXXa-540-844.png",
+    "labels": "recycle-list,componont,binding",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-attr-bi",
+  },
+  {
+    "title": "<recycle-list> Text Binding",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/30742ee0-3a86-11e9-9d7b-9fda7038a309TB1LeVoovDH8KJjy1XcXXcpdXX2a-540-844.png",
+    "labels": "recycle-list,text",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-text",
+  },
+  {
+    "title": "Waterfall",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/d87d1c10-3a85-11e9-ac48-d7245a91cf1eTB11KFfA7yWBuNjy0FpXXassXXa-540-960.png",
+    "labels": "waterfall,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/waterfall",
+  },
+  {
+    "title": "Richtext component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/1e6ead00-3a82-11e9-9e5a-fbf9235adc8bTB1VPOPcMMPMeJjy1XdXXasrXXa-540-844.png",
+    "labels": "richtext,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/richtext",
+  },
+  {
+    "title": "Richtext Component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/1675efc0-3a85-11e9-ac48-d7245a91cf1eTB1SzOPcMMPMeJjy1XdXXasrXXa-540-844.png",
+    "labels": "richtext,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/richtext-input",
+  },
+  {
+    "title": "switch events",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/825ee4c0-3a81-11e9-9d7b-9fda7038a309TB14HWzdGagSKJjy0FbXXa.mVXa-540-844.jpg",
+    "labels": "switch,event,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch-event",
+  },
+  {
+    "title": "Initial state of switch",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/512ee210-3a81-11e9-8e7e-5f0d891a2b94TB1u0HRc2NNTKJjSspkXXaeWFXa-540-844.jpg",
+    "labels": "switch,component,state",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch-state",
+  },
+  {
+    "title": "Switch component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/cfe30f60-3a80-11e9-a8cf-4f872f4653f2TB1p7eDdGagSKJjy0FhXXcrbFXa-540-843.jpg",
+    "labels": "switch,componont",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch",
+  },
+  {
+    "title": "Custom Textarea",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/a7b7b450-3a80-11e9-97dc-7d9ed4675c56TB1AsF1diERMeJjSspjXXcpOXXa-540-844.png",
+    "labels": "textarea",
+    "prefix": "http://editor.weex.io/p/Hanks10100/custom textarea",
+  },
+  {
+    "title": "Textarea component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/147f9040-3a80-11e9-97dc-7d9ed4675c56TB1TSyddgoQMeJjy0FoXXcShVXa-540-844.png",
+    "labels": "textarea,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/textarea",
+  },
+  {
+    "title": "Handle input event",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/effd6710-3a7f-11e9-8747-a9584b64cfa5TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png",
+    "labels": "input,component,event",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-event",
+  },
+  {
+    "title": "Input type",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/cd468800-3a7f-11e9-8747-a9584b64cfa5TB1qDh_diERMeJjy0FcXXc7opXa-540-844.png",
+    "labels": "input,componont,type",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-type",
+  },
+  {
+    "title": "Input initial state",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/8a594fb0-3a7e-11e9-a8cf-4f872f4653f2TB1rnh_diERMeJjy0FcXXc7opXa-540-844.png",
+    "labels": "input,componont,state",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-initial-state",
+  },
+  {
+    "title": "<recycle-list> multi v-for",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/c6d04f40-3a86-11e9-9e5a-fbf9235adc8bTB1giSLfwoQMeJjy0FoXXcShVXa-540-844.png",
+    "labels": "recycle-list,component,v-for",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-multi-v",
+  },
+  {
+    "title": "<recycle-list> with v-for",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/9a195190-3a86-11e9-ac48-d7245a91cf1eTB1juElXjihSKJjy0FfXXbGzFXa-540-844.png",
+    "labels": "recycle-list,component,v-for",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-v-for",
+  },
+  {
+    "title": "<recycle-list> Attribute Binding",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/571196f0-3a86-11e9-ac48-d7245a91cf1eTB1_pLKolfH8KJjy1XbXXbLdXXa-540-844.png",
+    "labels": "recycle-list,componont,binding",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-attr-bi",
+  },
+  {
+    "title": "<recycle-list> Text Binding",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/30742ee0-3a86-11e9-9d7b-9fda7038a309TB1LeVoovDH8KJjy1XcXXcpdXX2a-540-844.png",
+    "labels": "recycle-list,text",
+    "prefix": "http://editor.weex.io/p/Hanks10100/recycle-list-text",
+  },
+  {
+    "title": "Waterfall",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/d87d1c10-3a85-11e9-ac48-d7245a91cf1eTB11KFfA7yWBuNjy0FpXXassXXa-540-960.png",
+    "labels": "waterfall,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/waterfall",
+  },
+  {
+    "title": "Richtext component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/1e6ead00-3a82-11e9-9e5a-fbf9235adc8bTB1VPOPcMMPMeJjy1XdXXasrXXa-540-844.png",
+    "labels": "richtext,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/richtext",
+  },
+  {
+    "title": "Richtext Component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/1675efc0-3a85-11e9-ac48-d7245a91cf1eTB1SzOPcMMPMeJjy1XdXXasrXXa-540-844.png",
+    "labels": "richtext,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/richtext-input",
+  },
+  {
+    "title": "switch events",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/825ee4c0-3a81-11e9-9d7b-9fda7038a309TB14HWzdGagSKJjy0FbXXa.mVXa-540-844.jpg",
+    "labels": "switch,event,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch-event",
+  },
+  {
+    "title": "Initial state of switch",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/512ee210-3a81-11e9-8e7e-5f0d891a2b94TB1u0HRc2NNTKJjSspkXXaeWFXa-540-844.jpg",
+    "labels": "switch,component,state",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch-state",
+  },
+  {
+    "title": "Switch component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/cfe30f60-3a80-11e9-a8cf-4f872f4653f2TB1p7eDdGagSKJjy0FhXXcrbFXa-540-843.jpg",
+    "labels": "switch,componont",
+    "prefix": "http://editor.weex.io/p/Hanks10100/switch",
+  },
+  {
+    "title": "Custom Textarea",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/a7b7b450-3a80-11e9-97dc-7d9ed4675c56TB1AsF1diERMeJjSspjXXcpOXXa-540-844.png",
+    "labels": "textarea",
+    "prefix": "http://editor.weex.io/p/Hanks10100/custom textarea",
+  },
+  {
+    "title": "Textarea component",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/147f9040-3a80-11e9-97dc-7d9ed4675c56TB1TSyddgoQMeJjy0FoXXcShVXa-540-844.png",
+    "labels": "textarea,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/textarea",
+  },
+  {
+    "title": "Handle input event",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/effd6710-3a7f-11e9-8747-a9584b64cfa5TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png",
+    "labels": "input,component,event",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-event",
+  },
+  {
+    "title": "Input type",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/cd468800-3a7f-11e9-8747-a9584b64cfa5TB1qDh_diERMeJjy0FcXXc7opXa-540-844.png",
+    "labels": "input,componont,type",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-type",
+  },
+  {
+    "title": "Input initial state",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/8a594fb0-3a7e-11e9-a8cf-4f872f4653f2TB1rnh_diERMeJjy0FcXXc7opXa-540-844.png",
+    "labels": "input,componont,state",
+    "prefix": "http://editor.weex.io/p/Hanks10100/input-initial-state",
+  },
+  {
+    "title": "image + text",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/b78588f0-3a74-11e9-8e7e-5f0d891a2b94TB1Mx1UcMoQMeJjy1XaXXcSsFXa-540-844.png",
+    "labels": "image,text",
+    "prefix": "http://editor.weex.io/p/Hanks10100/aaybel",
+  },
+  {
+    "title": "We want you!",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/4861d820-3a74-11e9-a8cf-4f872f4653f2TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png",
+    "labels": "image,component",
+    "prefix": "http://editor.weex.io/p/Hanks10100/koufri",
+  },
+  {
+    "title": "lines attribute of <text>",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/784be2c0-3a73-11e9-9d7b-9fda7038a309TB19JaYcMoQMeJjy0FpXXcTxpXa-540-844.png",
+    "labels": "text,component,lines",
+    "prefix": "http://editor.weex.io/p/Hanks10100/lonate",
+  },
+  {
+    "title": "Yo !",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/7c3435f0-3a72-11e9-8e7e-5f0d891a2b94TB19gKsb8fH8KJjy1XbXXbLdXXa-540-844.png",
+    "labels": "",
+    "prefix": "http://editor.weex.io/p/Hanks10100/kyu02g",
+  },
+  {
+    "title": "<div> 嵌套",
+    "imgoss": "https://emas-fase-server.oss-cn-beijing.aliyuncs.com/images/490301c0-39d2-11e9-90f2-03b4a6e87b3e20190226154735.png",
+    "labels": "weex div",
+    "prefix": "http://editor.weex.io/p/erha19/sv4q1u",
+  },
+];
\ No newline at end of file
diff --git a/docs/community/code-demos.md b/docs/community/code-demos.md
new file mode 100644
index 0000000..e4b1639
--- /dev/null
+++ b/docs/community/code-demos.md
@@ -0,0 +1,5 @@
+---
+pageClass: noFooter
+---
+
+<Code-Demos lang="en-US" />
\ No newline at end of file
diff --git a/docs/zh/community/code-demos.md b/docs/zh/community/code-demos.md
new file mode 100644
index 0000000..52ae531
--- /dev/null
+++ b/docs/zh/community/code-demos.md
@@ -0,0 +1,5 @@
+---
+pageClass: noFooter
+---
+
+<Code-Demos />
\ No newline at end of file