diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue
index 08b4428..224d789 100644
--- a/docs/.vuepress/components/IndexPage.vue
+++ b/docs/.vuepress/components/IndexPage.vue
@@ -30,7 +30,7 @@
           <h3>{{weex.charc3Title}}</h3>
           <div>{{weex.charc3Content}}</div>
         </div>
-        <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" />
+        <img src="https://gw.alicdn.com/tfs/TB1WFkDjkT2gK0jSZFkXXcIQFXa-808-1180.png" width="50%" height="100%" />
       </div>
 
       <div class="character-o">
diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png
index 1e6e57e..c10f02e 100644
--- a/docs/.vuepress/public/vue-rax.png
+++ b/docs/.vuepress/public/vue-rax.png
Binary files differ
diff --git a/docs/docs/components/a.md b/docs/docs/components/a.md
index 87f2dfb..990acd6 100644
--- a/docs/docs/components/a.md
+++ b/docs/docs/components/a.md
@@ -30,7 +30,7 @@
 The execution order of callback function of click and href is **undefined**. Do **not** use click event to do the preprocessing of `href`.
 :::
 
-## Examples
+## Vue Example
 
 ```Html
 <a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
@@ -39,3 +39,23 @@
 ```
 
 [Demo](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5)
+
+## Rax Example
+
+`rax-link` is the component `<a>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Link from 'rax-link';
+import Text from 'rax-text';
+
+function App() {
+	return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}>
+	  <Text>click me</Text>
+	</Link>
+}
+```
+
+[rax-link doc](https://rax.js.org/docs/components/link)
+
diff --git a/docs/docs/components/cell.md b/docs/docs/components/cell.md
index 9a385ce..df2570c 100644
--- a/docs/docs/components/cell.md
+++ b/docs/docs/components/cell.md
@@ -28,8 +28,21 @@
 
 * **common events**. Check out [common events](../events/common-events.html).
 
-## Example
+## Vue Example
 
 Please refer to
 * [list](./list.html)
 * [waterfall](./waterfall.html)
+
+## Rax Example
+
+```jsx
+import RecyclerView from 'rax-recyclerview';
+```
+
+```jsx
+<RecyclerView.Cell>{...}</RecyclerView.Cell>
+```
+
+[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/docs/components/div.md b/docs/docs/components/div.md
index 1ebbc77..02f3548 100644
--- a/docs/docs/components/div.md
+++ b/docs/docs/components/div.md
@@ -21,3 +21,28 @@
 ## Events
 
 * **common events**. Check out [common events](../events/common-events.html).
+
+## Rax Example
+
+`rax-view` is the component `<div>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import View from "rax-view";
+
+function App() {
+  return <View
+		style={{
+		  width: '200rpx',
+		  height: '200rpx',
+		  backgroundColor: '#222831',
+		}}
+	/>;
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-view doc](https://rax.js.org/docs/components/view)
+
diff --git a/docs/docs/components/image.md b/docs/docs/components/image.md
index c55f3a5..29e0f2a 100644
--- a/docs/docs/components/image.md
+++ b/docs/docs/components/image.md
@@ -161,6 +161,35 @@
 
 Complete example goes [here](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0).
 
-## Examples
+## Vue Example
 * [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
\ No newline at end of file
+* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+
+## Rax Example
+
+`rax-image` is the component `<image>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Image from 'rax-image';
+
+const App = () => {
+ return (
+   <Image
+     source={{
+       uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
+     }}
+     style={{
+       height: '68rpx',
+       width: '67rpx'
+     }}
+  />
+ );
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-image doc](https://rax.js.org/docs/components/image)
+
diff --git a/docs/docs/components/indicator.md b/docs/docs/components/indicator.md
index 423a1c8..7a2a20e 100644
--- a/docs/docs/components/indicator.md
+++ b/docs/docs/components/indicator.md
@@ -22,6 +22,6 @@
 
 No events.
 
-## Example
+## Vue Example
 
 Please refer to [slider](./slider.html)
diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md
index f99c1e6..f42fa45 100644
--- a/docs/docs/components/input.md
+++ b/docs/docs/components/input.md
@@ -139,7 +139,7 @@
 * for `focus` and `blur` events:
   - `timestamp`: the time stamp of the event.
 
-## Demo
+## Vue Example
 - [input with normal content and binding actions Example] (http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)
 - [ date & time Example ](http://dotwe.org/vue/23ec083078356ef0e31618164e5a184b)
 
@@ -148,3 +148,24 @@
 - [Other Examples](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874)
 
 [try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
+
+## Rax Example
+
+`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+  return (
+    <TextInput autoFocus={true} />
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput doc](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/docs/components/list.md b/docs/docs/components/list.md
index 2ed3a09..2738c56 100644
--- a/docs/docs/components/list.md
+++ b/docs/docs/components/list.md
@@ -76,3 +76,83 @@
 
 
 [load more demo](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
+
+## Rax Example
+
+`rax-recyclerview` is the component `<list>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RecyclerView from 'rax-recyclerview';
+
+function Thumb() {
+  return (
+    <RecyclerView.Cell>
+      <View style={styles.button}>
+        <View style={styles.box} />
+      </View>
+    </RecyclerView.Cell>
+  );
+}
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App() {
+  return (
+    <View style={styles.root}>
+      <View style={styles.container}>
+        <RecyclerView
+          style={{
+            height: 500
+          }}>
+          <RecyclerView.Header>
+            <Text>Sticky view is not header</Text>
+          </RecyclerView.Header>
+          <RecyclerView.Header>
+            <View style={styles.sticky}>
+              <Text>Sticky view must in header root</Text>
+            </View>
+          </RecyclerView.Header>
+          {THUMBS.map(createThumbRow)}
+        </RecyclerView>
+      </View>
+    </View>
+  );
+}
+
+let styles = {
+  root: {
+    width: '750rpx',
+  },
+  container: {
+    padding: '20rpx',
+    borderStyle: 'solid',
+    borderColor: '#dddddd',
+    borderWidth: '1rpx',
+    marginLeft: '20rpx',
+    height: '1000rpx',
+    marginRight: '20rpx',
+    marginBottom: '10rpx',
+  },
+  button: {
+    margin: '7rpx',
+    padding: '5rpx',
+    alignItems: 'center',
+    backgroundColor: '#eaeaea',
+    borderRadius: '3rpx',
+  },
+  box: {
+    width: '64rpx',
+    height: '64rpx',
+  }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
index 799291e..227b10a 100644
--- a/docs/docs/components/loading.md
+++ b/docs/docs/components/loading.md
@@ -65,6 +65,6 @@
  </loading>
  ```
 
-## Example
+## Vue Example
 
  - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md
index 475034b..c1d358f 100644
--- a/docs/docs/components/recycle-list.md
+++ b/docs/docs/components/recycle-list.md
@@ -129,7 +129,7 @@
 * Component custom event
   Plan support. Features such as `vm.$on`, `vm.$once`, `vm.$emit`, `vm.$off` are not fully tuned, the interface is available, but the behavior may be slightly different (parameters are missing), do not use it for the time being.
 
-## Demo
+## Example
 ```html
 <recycle-list for="(item, i) in longList" switch="type">
   <cell-slot case="A">
diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md
index 07f292f..656863e 100644
--- a/docs/docs/components/refresh.md
+++ b/docs/docs/components/refresh.md
@@ -76,6 +76,67 @@
 
 
 
-## Example
+## Vue Example
 
  - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
+
+## Rax Example
+
+`rax-refreshcontrol` is the component `<refresh>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from 'driver-universal';
+import RecyclerView from 'rax-recyclerview';
+import RefreshControl from 'rax-refreshcontrol';
+
+class RefreshControlDemo extends Component {
+  state = {
+    isRefreshing: false,
+    loaded: 0,
+    refreshText: '↓ Pull To Refresh'
+  };
+
+  handleRefresh = (e) => {
+    this.setState({
+      isRefreshing: true,
+      refreshText: 'Refreshing',
+    });
+    setTimeout(() => {
+      // update Data
+      this.setState({
+        isRefreshing: false,
+        refreshText: '↓ Pull To Refresh',
+      });
+    }, 1000);
+  };
+
+  render() {
+    return (
+      <View>
+        <RecyclerView
+          refreshControl={null}>
+          <RefreshControl
+            refreshing={this.state.isRefreshing}
+            onRefresh={this.handleRefresh}
+          >
+            <Text>{this.state.refreshText}</Text>
+          </RefreshControl>
+          <RecyclerView.Cell>
+            <View>
+              <Text>this is list</Text>
+            </View>
+          </RecyclerView.Cell>
+        </RecyclerView>
+      </View>
+   );
+  }
+}
+
+render(<RefreshControlDemo/>, document.body, { driver: Driver });
+```
+
+[rax-refreshcontrol doc](https://rax.js.org/docs/components/refreshcontrol)
+
diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md
index f702fd4..8645ee6 100644
--- a/docs/docs/components/richtext.md
+++ b/docs/docs/components/richtext.md
@@ -75,6 +75,6 @@
       * The `a` tag has a `pseudo-ref` property whose value will be sent with the itemclick event. **Please be noted that the default jump behavior on `a` tag will be disabled at this moment.`[Demo](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
     * If `itemclick` is specified on nested nodes, only the event on the outer node will take effect.
 
-## Example
+## Vue Example
 
 [Demo](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md
index ed16904..fb6f5d6 100644
--- a/docs/docs/components/scroller.md
+++ b/docs/docs/components/scroller.md
@@ -59,7 +59,7 @@
 Nested lists or scrollers within the same direction are not supported. In other words. nested list/scroller must have different directions.
 For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
 
-## example
+## Vue Example
 
 ```html
 <template>
@@ -148,3 +148,64 @@
 ```
 
 [try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
+
+## Rax Example
+
+`rax-scrollview` is the component `<scroller>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal"
+import View from 'rax-view';
+import ScrollView from 'rax-scrollview';
+
+function Thumb() {
+  return (
+    <View style={styles.button}>
+      <View style={styles.box} />
+    </View>
+  );
+}
+
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App () {
+  return (
+    <View style={{ ...styles.container, ...{ height: 500 } }}>
+      <ScrollView>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
+    </View>
+  );
+}
+
+let styles = {
+  container: {
+    padding: 20,
+    borderStyle: 'solid',
+    borderColor: '#dddddd',
+    borderWidth: 1,
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 10,
+  },
+  button: {
+    margin: 7,
+    padding: 5,
+    alignItems: 'center',
+    backgroundColor: '#eaeaea',
+    borderRadius: 3,
+  },
+  box: {
+    width: 64,
+    height: 64,
+  }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-scrollview doc](https://rax.js.org/docs/components/scrollview)
+
diff --git a/docs/docs/components/slider.md b/docs/docs/components/slider.md
index e8b65c8..86e3a80 100644
--- a/docs/docs/components/slider.md
+++ b/docs/docs/components/slider.md
@@ -30,7 +30,8 @@
 * **change**. Triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
 * **scroll**. This event is fired when scrolling. The current `offsetXRatio` value is given in this event callback. And `offsetXRatio` means the current slide offset ratio which value range is [-1, 1]. Negative value means the slide is shifted to left and positive value means to right. For example, -0.2 means 20% of the current slide is slided beyonds left border of the slider.
 
-## Example
+## Vue Example
+
 ```html
 <template>
   <div>
@@ -81,3 +82,48 @@
 * [Demo of setting scroll event](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24)
 * [Demo of auto-play with indicator](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3)
 * [Demo Ocean](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e)
+
+## Rax Example
+
+`rax-slider` is the component `<slider>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render, createRef } from 'rax';
+import View from 'rax-view';
+import Image from 'rax-image';
+import Slider from 'rax-slider';
+import Driver from 'driver-universal';
+
+const App  = () => {
+  const handleChange = (idx) {
+    console.log('change to ', idx);
+  }
+
+  return (
+    <View>
+      <Slider
+        className="slider"
+        width="750"
+        height="500"
+    autoPlay
+        onChange={handleChange}
+      >
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
+        </View>
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
+        </View>
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
+        </View>
+      </Slider>
+    </View>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-slider doc](https://rax.js.org/docs/components/slider)
+
diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md
index d4ec54a..cb50633 100644
--- a/docs/docs/components/text.md
+++ b/docs/docs/components/text.md
@@ -80,5 +80,27 @@
 Developers could add `\uFEFF` namely [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) just after the character with inconsistent word-break behavior to force no-break strategy, ref [demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce) to see more detail。`\uFEFF` may not work on all Android ROMs, as some of them may just ignore it.
 :::
 
-## Example
+## Vue Example
 * [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
+
+
+## Rax Example
+
+`rax-text` is the component `<text>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Text from 'rax-text';
+
+function App() {
+  return (
+    <Text>Text</Text>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-text doc](https://rax.js.org/docs/components/text)
+
diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index 9843800..89df18f 100644
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -49,7 +49,7 @@
 	* @param isShow: boolean, showing or hiding the keyboard.
 	* @param keyboardSize: keyboard height in web pixel format.
 
-## Example
+## Vue Example
 
 ```html
 <template>
@@ -116,3 +116,36 @@
 * [Demo](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
 * [Demo of events](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40)
 * [Demo of binding](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1)
+
+## Rax Example
+
+`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+  return (
+    <View style={{margin: '20rpx'}}>
+      <TextInput
+        multiline={true}
+        numberOfLines={3}
+        style={{
+          height: '150rpx',
+          width: '600rpx',
+          borderWidth: '1rpx',
+          borderColor: '#dddddd',
+          borderStyle: 'solid'
+        }}
+      />
+    </View>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput doc](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md
index 7917a2e..0a6e919 100644
--- a/docs/docs/components/video.md
+++ b/docs/docs/components/video.md
@@ -28,7 +28,7 @@
 * **finish** Triggered when playback state is Finished.
 * **fail** Triggered when playback state is Failed.
 
-# Example
+# Vue Example
 
 ```html
 <template>
@@ -81,3 +81,26 @@
 * [Demo](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
 * [Demo of autoplay](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
 * [Demo of controls](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
+
+## Rax Example
+
+`rax-video` is the component `<video>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from "rax";
+import Video from "rax-video";
+import Driver from "driver-universal";
+
+render(
+  <Video
+    style={{ width: '750rpx', height: '400rpx' }}
+    autoPlay
+    src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
+  />,
+  document.body,
+  { driver: Driver }
+);
+```
+
+[rax-video doc](https://rax.js.org/docs/components/video)
+
diff --git a/docs/docs/components/waterfall.md b/docs/docs/components/waterfall.md
index 93fe2ba..b1d3745 100644
--- a/docs/docs/components/waterfall.md
+++ b/docs/docs/components/waterfall.md
@@ -49,6 +49,96 @@
 
 All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html)
 
-## Example
+## Vue Example
 
 [waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
+
+## Rax Example
+
+`rax-waterfall` is the component `<waterfall>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, useState, useRef, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RefreshControl from 'rax-refreshcontrol';
+import Waterfall from 'rax-waterfall';
+
+const data = [
+  { height: 550, item: {} },
+  { height: 624, item: {} },
+  { height: 708, item: {} },
+  { height: 600, item: {} },
+  { height: 300, item: {} },
+  { height: 100, item: {} },
+  { height: 400, item: {} },
+  { height: 550, item: {} },
+  { height: 624, item: {} },
+  { height: 708, item: {} },
+  { height: 600, item: {} },
+  { height: 300, item: {} },
+  { height: 100, item: {} },
+  { height: 400, item: {} }
+];
+
+let App = (props) => {
+
+  let [refreshing, setRefreshing] = useState(false);
+  let handleRefresh = () => {
+    if (refreshing) {
+      return;
+    }
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 500);
+  }
+  let loadMore = () => {
+    console.log('load more');
+  }
+
+  return (
+    <Waterfall
+      columnWidth={370}
+      columnCount={2}
+      columnGap={10}
+      dataSource={data}
+      renderHeader={() => {
+        return [
+          <RefreshControl
+            key="0"
+            refreshing={refreshing}
+            onRefresh={handleRefresh}>
+            <Text>RefreshControl</Text>
+          </RefreshControl>,
+          <View key="1" style={{
+            height: 100, 
+            backgroundColor: '#efefef', 
+            marginBottom: 10
+          }}><Text>Header Mod</Text></View>
+        ];
+      }}
+      renderFooter={() => {
+        return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>;
+      }}
+      renderItem={(item, index) => {
+        return (
+          <View style={{
+            height: item.height, 
+            backgroundColor: '#efefef', 
+            marginBottom: 10
+          }}>
+            <Text>{index}</Text>
+          </View>
+        );
+      }}
+      onEndReached={loadMore} />
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-waterfall doc](https://rax.js.org/docs/components/waterfall)
+
diff --git a/docs/docs/components/web.md b/docs/docs/components/web.md
index a39dac8..26d8668 100644
--- a/docs/docs/components/web.md
+++ b/docs/docs/components/web.md
@@ -120,6 +120,30 @@
 - `<web>` can not have any nested child component.
 - You can use [webview module](../modules/webview.html) to control `<web>` component, see the [example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939).
 
-## Examples
+## Vue Example
 
 - [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
+
+## Rax Example
+
+`rax-embed` is the component `<web>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render, Component } from 'rax';
+import Driver from 'driver-universal';
+import Embed from 'rax-embed';
+
+function App() {
+  const urlParam = {
+      paramOne:123,
+     paramTwo:456
+  };
+  return <Embed urlParam={urlParam} src={'http://taobao.com'} 
+  useIframeInWeb={true} style={{ height: 750, width: 750 }} />
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-embed doc](https://rax.js.org/docs/components/embed)
+
diff --git a/docs/guide/front-end-frameworks.md b/docs/guide/front-end-frameworks.md
index 837d08a..1b60988 100644
--- a/docs/guide/front-end-frameworks.md
+++ b/docs/guide/front-end-frameworks.md
@@ -81,6 +81,8 @@
 
 ## Rax
 
-Rax is a front-end framework with React-compatible APIs.
+Rax is a front-end framework with React-compatible APIs.Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
 
-Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
+::: tip
+Please refer to [Use Rax in Weex](./use-rax-in-weex.html) document to learn more technics about Weex and Rax.
+:::
diff --git a/docs/guide/images/vue-rax.png b/docs/guide/images/vue-rax.png
index 1e6e57e..a748fd6 100644
--- a/docs/guide/images/vue-rax.png
+++ b/docs/guide/images/vue-rax.png
Binary files differ
diff --git a/docs/zh/docs/components/a.md b/docs/zh/docs/components/a.md
index e29aa7d..0f714b7 100644
--- a/docs/zh/docs/components/a.md
+++ b/docs/zh/docs/components/a.md
@@ -30,7 +30,7 @@
 `click` 事件的回调函数和 `href` 跳转的执行顺序**未被定义**，**不要**使用 `click` 来进行 `href` 跳转前的逻辑处理。
 :::
 
-## 示例
+## Vue 示例
 
 ```Html
 <a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
@@ -39,3 +39,24 @@
 ```
 
 [示例](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5)
+
+
+## Rax 示例
+
+`rax-link` 是 `<a>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Link from 'rax-link';
+import Text from 'rax-text';
+
+function App() {
+	return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}>
+	  <Text>点击跳转</Text>
+	</Link>
+}
+```
+
+[rax-link 文档](https://rax.js.org/docs/components/link)
+
diff --git a/docs/zh/docs/components/cell.md b/docs/zh/docs/components/cell.md
index e2da8a8..1d484d4 100644
--- a/docs/zh/docs/components/cell.md
+++ b/docs/zh/docs/components/cell.md
@@ -10,7 +10,6 @@
 
 ## 属性
 
-* **keep-scroll-position** boolean. 控制当 Cell 被添加到列表中时，列表的滚动位置是否要保持不变。
 
 * **insert-animation** string, cell 的插入动画。当前只支持 `none` 和 `default`。
 * **delete-animation** string, cell 的删除动画。当前只支持 `none` 和 `default`。
@@ -30,8 +29,23 @@
 
 * **通用事件**. 参见[通用事件](../events/common-events.html)
 
-## 示例
+## Vue 示例
 
 Cell 的例子请参考
 * [list](./list.html)
 * [waterfall](./waterfall.html)
+
+## Rax 示例
+
+Rax 中 cell 是 `rax-recyclerview` 提供的子组件，使用方式如下
+
+```jsx
+import RecyclerView from 'rax-recyclerview';
+```
+
+```jsx
+<RecyclerView.Cell>{...}</RecyclerView.Cell>
+```
+
+[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/zh/docs/components/div.md b/docs/zh/docs/components/div.md
index 382a270..00eb069 100644
--- a/docs/zh/docs/components/div.md
+++ b/docs/zh/docs/components/div.md
@@ -21,3 +21,28 @@
 ## 事件
 
 * **通用事件** 支持所有[通用事件](../events/common-events.html)。
+
+## Rax 示例
+
+`rax-view` 是 `<div>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import View from "rax-view";
+
+function App() {
+  return <View
+		style={{
+		  width: '200rpx',
+		  height: '200rpx',
+		  backgroundColor: '#222831',
+		}}
+	/>;
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-view 文档](https://rax.js.org/docs/components/view)
+
diff --git a/docs/zh/docs/components/image.md b/docs/zh/docs/components/image.md
index 56a805e..b7a159a 100644
--- a/docs/zh/docs/components/image.md
+++ b/docs/zh/docs/components/image.md
@@ -160,7 +160,36 @@
 
 参见[完整示例](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0)。
 
-## 示例
+## Vue 示例
 
 * [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
\ No newline at end of file
+* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+
+## Rax 示例
+
+`rax-image` 是 `<image>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Image from 'rax-image';
+
+const App = () => {
+ return (
+   <Image
+     source={{
+       uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
+     }}
+     style={{
+       height: '68rpx',
+       width: '67rpx'
+     }}
+  />
+ );
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-image 文档](https://rax.js.org/docs/components/image)
+
diff --git a/docs/zh/docs/components/indicator.md b/docs/zh/docs/components/indicator.md
index daaea72..7a57676 100644
--- a/docs/zh/docs/components/indicator.md
+++ b/docs/zh/docs/components/indicator.md
@@ -22,6 +22,6 @@
 
 无事件
 
-## 示例
+## Vue 示例
 
 请参考 [slider](./slider.html)
diff --git a/docs/zh/docs/components/input.md b/docs/zh/docs/components/input.md
index 1ced9ad..4a5dc7a 100644
--- a/docs/zh/docs/components/input.md
+++ b/docs/zh/docs/components/input.md
@@ -126,7 +126,7 @@
 目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 `<input>` 组件的 input、change 事件中改写。
 :::
 
-## 示例
+## Vue 示例
 
 - [input标签使用及事件处理 demo](http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)
 
@@ -138,3 +138,24 @@
 
 * [其他示例集合](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874)
   <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB10jc9nVzqK1RjSZFvXXcB7VXa-297-479.png" />
+
+## Rax 示例
+
+`rax-textinput` 是 `<textarea>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+  return (
+    <TextInput autoFocus={true} />
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput 文档](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/zh/docs/components/list.md b/docs/zh/docs/components/list.md
index f035ef6..85ad2bc 100644
--- a/docs/zh/docs/components/list.md
+++ b/docs/zh/docs/components/list.md
@@ -107,8 +107,88 @@
 滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能，可通过 `dom.scrollToElement()` 滚动到指定 `<cell>`。更多信息可参考 [dom module](/docs/modules/dom.html)。  
 相应的 demo 可参考 [&lt;scroller&gt; 示例](http://dotwe.org/vue/014c0dc53edf7320df7701ebf7c0b2be)中的实现。
 
-## 示例
+## Vue 示例
 [简单示例](http://dotwe.org/vue/c9ab413141713d5c7ea3e5083eb4dbd1)  
 [滑动加载](http://dotwe.org/vue/f188936d60c6ca45d342d34f0659a2be)  
 [头部示例](http://dotwe.org/vue/b66212f9779e20f456ba48ab91fd199f)  
 [cell appear事件](http://dotwe.org/vue/b9e8186c38641f41a7bb1785b3d3fa92)  
+
+## Rax 示例
+
+`rax-recyclerview` 是 `<list>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RecyclerView from 'rax-recyclerview';
+
+function Thumb() {
+  return (
+    <RecyclerView.Cell>
+      <View style={styles.button}>
+        <View style={styles.box} />
+      </View>
+    </RecyclerView.Cell>
+  );
+}
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App() {
+  return (
+    <View style={styles.root}>
+      <View style={styles.container}>
+        <RecyclerView
+          style={{
+            height: 500
+          }}>
+          <RecyclerView.Header>
+            <Text>Sticky view is not header</Text>
+          </RecyclerView.Header>
+          <RecyclerView.Header>
+            <View style={styles.sticky}>
+              <Text>Sticky view must in header root</Text>
+            </View>
+          </RecyclerView.Header>
+          {THUMBS.map(createThumbRow)}
+        </RecyclerView>
+      </View>
+    </View>
+  );
+}
+
+let styles = {
+  root: {
+    width: '750rpx',
+  },
+  container: {
+    padding: '20rpx',
+    borderStyle: 'solid',
+    borderColor: '#dddddd',
+    borderWidth: '1rpx',
+    marginLeft: '20rpx',
+    height: '1000rpx',
+    marginRight: '20rpx',
+    marginBottom: '10rpx',
+  },
+  button: {
+    margin: '7rpx',
+    padding: '5rpx',
+    alignItems: 'center',
+    backgroundColor: '#eaeaea',
+    borderRadius: '3rpx',
+  },
+  box: {
+    width: '64rpx',
+    height: '64rpx',
+  }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/zh/docs/components/loading.md b/docs/zh/docs/components/loading.md
index 050ac78..259801d 100644
--- a/docs/zh/docs/components/loading.md
+++ b/docs/zh/docs/components/loading.md
@@ -44,6 +44,6 @@
 </loading>
 ```
 
-## 示例
+## Vue 示例
 [基本用法](http://dotwe.org/vue/1c303ff427e3a92fc8ef5846c00b35e5)
 <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1QYo8n9zqK1RjSZFpXXakSXXa-1242-2208.png" />
diff --git a/docs/zh/docs/components/refresh.md b/docs/zh/docs/components/refresh.md
index bdded90..0287e1e 100644
--- a/docs/zh/docs/components/refresh.md
+++ b/docs/zh/docs/components/refresh.md
@@ -48,6 +48,67 @@
 </refresh>
 ```
 
-## 示例
+## Vue 示例
 [基本用法](http://dotwe.org/vue/fccb7c6b9a9f4b7b1f3f7518344cf1bb)
-<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" />
\ No newline at end of file
+<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" />
+
+## Rax 示例
+
+`rax-refreshcontrol` 是 `<refresh>` 组件的上层封装，提供了 Weex 下拉刷新能力
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from 'driver-universal';
+import RecyclerView from 'rax-recyclerview';
+import RefreshControl from 'rax-refreshcontrol';
+
+class RefreshControlDemo extends Component {
+  state = {
+    isRefreshing: false,
+    loaded: 0,
+    refreshText: '↓ Pull To Refresh'
+  };
+
+  handleRefresh = (e) => {
+    this.setState({
+      isRefreshing: true,
+      refreshText: 'Refreshing',
+    });
+    setTimeout(() => {
+      // update Data
+      this.setState({
+        isRefreshing: false,
+        refreshText: '↓ Pull To Refresh',
+      });
+    }, 1000);
+  };
+
+  render() {
+    return (
+      <View>
+        <RecyclerView
+          refreshControl={null}>
+          <RefreshControl
+            refreshing={this.state.isRefreshing}
+            onRefresh={this.handleRefresh}
+          >
+            <Text>{this.state.refreshText}</Text>
+          </RefreshControl>
+          <RecyclerView.Cell>
+            <View>
+              <Text>this is list</Text>
+            </View>
+          </RecyclerView.Cell>
+        </RecyclerView>
+      </View>
+   );
+  }
+}
+
+render(<RefreshControlDemo/>, document.body, { driver: Driver });
+```
+
+[rax-refreshcontrol 文档](https://rax.js.org/docs/components/refreshcontrol)
+
diff --git a/docs/zh/docs/components/richtext.md b/docs/zh/docs/components/richtext.md
index 14e8a39..34e33cb 100644
--- a/docs/zh/docs/components/richtext.md
+++ b/docs/zh/docs/components/richtext.md
@@ -74,6 +74,6 @@
       * `a`标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。**此时 `a` 标签的无效。**。[示例](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
     * 若多个嵌套节点上均包含 `itemclick` 事件，则只有最外层节点上的 `itemclick` 会被触发
 
-## 示例
+## Vue 示例
 
 [示例](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/zh/docs/components/scroller.md b/docs/zh/docs/components/scroller.md
index ed1e287..649769a 100644
--- a/docs/zh/docs/components/scroller.md
+++ b/docs/zh/docs/components/scroller.md
@@ -104,7 +104,7 @@
 - `options {Object}`：可选项，属性为：
   - `offset {number}`：一个到其可见位置的偏移距离，默认是 0
 
-## 示例
+## Vue 示例
 
 - [scrollerstart 事件](http://dotwe.org/vue/6e3c7fb21976e80c2959f330ddd1b26a)
 - [设置 scroller 事件触发频率](http://dotwe.org/vue/d896b0896293ec55c209729fdfc7bff2)
@@ -119,3 +119,64 @@
 - [聊天窗口](http://dotwe.org/vue/21d8b0a79c20e95139353d9cc8b634f5)，页面局部可滚动，底部输入框不可滚动。
 
   <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB11_g_n7voK1RjSZPfXXXPKFXa-264-439.gif" />
+
+## Rax 示例
+
+`rax-scrollview` 是 `<scroller>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal"
+import View from 'rax-view';
+import ScrollView from 'rax-scrollview';
+
+function Thumb() {
+  return (
+    <View style={styles.button}>
+      <View style={styles.box} />
+    </View>
+  );
+}
+
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App () {
+  return (
+    <View style={{ ...styles.container, ...{ height: 500 } }}>
+      <ScrollView>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
+    </View>
+  );
+}
+
+let styles = {
+  container: {
+    padding: 20,
+    borderStyle: 'solid',
+    borderColor: '#dddddd',
+    borderWidth: 1,
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 10,
+  },
+  button: {
+    margin: 7,
+    padding: 5,
+    alignItems: 'center',
+    backgroundColor: '#eaeaea',
+    borderRadius: 3,
+  },
+  box: {
+    width: 64,
+    height: 64,
+  }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-scrollview 文档](https://rax.js.org/docs/components/scrollview)
+
diff --git a/docs/zh/docs/components/slider.md b/docs/zh/docs/components/slider.md
index 1bbe1eb..6dc054e 100644
--- a/docs/zh/docs/components/slider.md
+++ b/docs/zh/docs/components/slider.md
@@ -30,7 +30,7 @@
 * **change** 当轮播索引改变时，触发该事件。该事件给前端的参数中含有 `index`表示当前切换到的序号。
 * **scroll** 列表发生滚动时将会触发该事件。在参数中有 `offsetXRatio`，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。
 
-## 示例
+## Vue 示例
 ```html
 <template>
   <div>
@@ -81,3 +81,48 @@
 * [滚动事件示例](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24)
 * [自动播放和indicator示例](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3)
 * [Ocean示例](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e)
+
+## Rax 示例
+
+`rax-slider` 是 `<slider>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render, createRef } from 'rax';
+import View from 'rax-view';
+import Image from 'rax-image';
+import Slider from 'rax-slider';
+import Driver from 'driver-universal';
+
+const App  = () => {
+  const handleChange = (idx) {
+    console.log('change to ', idx);
+  }
+
+  return (
+    <View>
+      <Slider
+        className="slider"
+        width="750"
+        height="500"
+    autoPlay
+        onChange={handleChange}
+      >
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
+        </View>
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
+        </View>
+        <View style={styles.itemWrap}>
+          <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
+        </View>
+      </Slider>
+    </View>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-slider 文档](https://rax.js.org/docs/components/slider)
+
diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md
index 55503d3..1ee769f 100644
--- a/docs/zh/docs/components/text.md
+++ b/docs/zh/docs/components/text.md
@@ -82,6 +82,27 @@
 开发者可通过在意外换行处添加 `\uFEFF` 即 [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) 以触发**强制不换行**，详细用法可参考[demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce)。请注意这个方法**无法**保证在所有 Android ROM 上有效，一些 ROM 会忽略 *ZERO WIDTH NO-BREAK SPACE* 指令。
 :::
 
-## 示例
+## Vue 示例
 * [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0)
   
+
+## Rax 示例
+
+`rax-text` 是 `<text>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Text from 'rax-text';
+
+function App() {
+  return (
+    <Text>Text</Text>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-text 文档](https://rax.js.org/docs/components/text)
+
diff --git a/docs/zh/docs/components/textarea.md b/docs/zh/docs/components/textarea.md
index ca3bed7..d41ff74 100644
--- a/docs/zh/docs/components/textarea.md
+++ b/docs/zh/docs/components/textarea.md
@@ -50,7 +50,7 @@
   * @param isShow: boolean, 显示或隐藏键盘。
   * @param keyboardSize: 键盘的高度，以前端使用的样式单位返回。
 
-## 示例
+## Vue 示例
 
 ```html
 <template>
@@ -117,3 +117,36 @@
 * [示例](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
 * [事件示例](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40)
 * [绑定示例](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1)
+
+## Rax 示例
+
+`rax-textinput` 是 `<textarea>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+  return (
+    <View style={{margin: '20rpx'}}>
+      <TextInput
+        multiline={true}
+        numberOfLines={3}
+        style={{
+          height: '150rpx',
+          width: '600rpx',
+          borderWidth: '1rpx',
+          borderColor: '#dddddd',
+          borderStyle: 'solid'
+        }}
+      />
+    </View>
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput 文档](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/zh/docs/components/video.md b/docs/zh/docs/components/video.md
index c1f03c7..f85bb59 100644
--- a/docs/zh/docs/components/video.md
+++ b/docs/zh/docs/components/video.md
@@ -28,7 +28,7 @@
 * **finish** 当 playback 的状态是 Finished 时触发。
 * **fail** 当 playback 状态是 Failed 时触发。
 
-# 示例
+# Vue 示例
 
 ```html
 <template>
@@ -80,4 +80,27 @@
 ```
 * [示例](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
 * [自动播放示例](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
-* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
\ No newline at end of file
+* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
+
+## Rax 示例
+
+`rax-video` 是 `<video>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render } from "rax";
+import Video from "rax-video";
+import Driver from "driver-universal";
+
+render(
+  <Video
+    style={{ width: '750rpx', height: '400rpx' }}
+    autoPlay
+    src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
+  />,
+  document.body,
+  { driver: Driver }
+);
+```
+
+[rax-video 文档](https://rax.js.org/docs/components/video)
+
diff --git a/docs/zh/docs/components/waterfall.md b/docs/zh/docs/components/waterfall.md
index 374aa92..a1e3ebd 100644
--- a/docs/zh/docs/components/waterfall.md
+++ b/docs/zh/docs/components/waterfall.md
@@ -60,7 +60,7 @@
 - appear：用于监听子组件出现事件（一般绑定于子组件之上例如：监听最后一个元素出现，加载新的数据）
 - disappear：用于监听子组件滑出屏幕事件（一般绑定于子组件之上）
 
-## 示例
+## Vue 示例
 [体验示例](http://dotwe.org/vue/c2d4c7b54d92ac83bb2024ebbf3ccf92)
 
 上述示例使用了4种子组件，同时点击不同的单元格，可体验 `<waterfall>` 不同属性间的区别。
@@ -71,3 +71,94 @@
 
 
 <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1iEk9nVzqK1RjSZFCXXbbxVXa-544-960.gif" />
+
+## Rax 示例
+
+`rax-waterfall` 是 `<waterfall>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, useState, useRef, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RefreshControl from 'rax-refreshcontrol';
+import Waterfall from 'rax-waterfall';
+
+// 数据需要指定高度
+const data = [
+  { height: 550, item: {} },
+  { height: 624, item: {} },
+  { height: 708, item: {} },
+  { height: 600, item: {} },
+  { height: 300, item: {} },
+  { height: 100, item: {} },
+  { height: 400, item: {} },
+  { height: 550, item: {} },
+  { height: 624, item: {} },
+  { height: 708, item: {} },
+  { height: 600, item: {} },
+  { height: 300, item: {} },
+  { height: 100, item: {} },
+  { height: 400, item: {} }
+];
+
+let App = (props) => {
+
+  let [refreshing, setRefreshing] = useState(false);
+  let handleRefresh = () => {
+    if (refreshing) {
+      return;
+    }
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 500);
+  }
+  let loadMore = () => {
+    console.log('load more');
+  }
+
+  return (
+    <Waterfall
+      columnWidth={370}
+      columnCount={2}
+      columnGap={10}
+      dataSource={data}
+      renderHeader={() => {
+        return [
+          <RefreshControl
+            key="0"
+            refreshing={refreshing}
+            onRefresh={handleRefresh}>
+            <Text>RefreshControl</Text>
+          </RefreshControl>,
+          <View key="1" style={{
+            height: 100, 
+            backgroundColor: '#efefef', 
+            marginBottom: 10
+          }}><Text>Header Mod</Text></View>
+        ];
+      }}
+      renderFooter={() => {
+        return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>;
+      }}
+      renderItem={(item, index) => {
+        return (
+          <View style={{
+            height: item.height, 
+            backgroundColor: '#efefef', 
+            marginBottom: 10
+          }}>
+            <Text>{index}</Text>
+          </View>
+        );
+      }}
+      onEndReached={loadMore} />
+  );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-waterfall 文档](https://rax.js.org/docs/components/waterfall)
+
diff --git a/docs/zh/docs/components/web.md b/docs/zh/docs/components/web.md
index 4ff8120..3dc41cf 100644
--- a/docs/zh/docs/components/web.md
+++ b/docs/zh/docs/components/web.md
@@ -82,8 +82,32 @@
 <style></style>
 ```
 
-## 示例
+## Vue 示例
 
 * [体验示例](http://dotwe.org/vue/9f8a7be89a4ad881ff515145cc9306ea)
 
 上述示例监听了 pagestart、pagefinish 及 error 事件，同时使用了  [webview module](../modules/webview.html) 提供的 API。
+
+## Rax 示例
+
+`rax-embed` 是 `<web>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render, Component } from 'rax';
+import Driver from 'driver-universal';
+import Embed from 'rax-embed';
+
+function App() {
+  const urlParam = {
+      paramOne:123,
+     paramTwo:456
+  };
+  return <Embed urlParam={urlParam} src={'http://taobao.com'} 
+  useIframeInWeb={true} style={{ height: 750, width: 750 }} />
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-embed 文档](https://rax.js.org/docs/components/embed)
+
diff --git a/docs/zh/guide/front-end-frameworks.md b/docs/zh/guide/front-end-frameworks.md
index b6e0df3..4f2d57c 100644
--- a/docs/zh/guide/front-end-frameworks.md
+++ b/docs/zh/guide/front-end-frameworks.md
@@ -81,3 +81,7 @@
 ## Rax
 
 Rax 是一个兼容 React 接口的前端框架，请参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 来获得更多信息。
+
+::: tip
+关于在 Weex 中使用 Rax 的技巧请参阅： [《在 Weex 中使用 Rax》](./use-rax-in-weex.html)。
+:::
\ No newline at end of file
diff --git a/docs/zh/guide/images/vue-rax.png b/docs/zh/guide/images/vue-rax.png
index 1e6e57e..a748fd6 100644
--- a/docs/zh/guide/images/vue-rax.png
+++ b/docs/zh/guide/images/vue-rax.png
Binary files differ
diff --git a/docs/zh/guide/introduction.md b/docs/zh/guide/introduction.md
index f5b0ae0..b77cfe0 100644
--- a/docs/zh/guide/introduction.md
+++ b/docs/zh/guide/introduction.md
@@ -15,7 +15,7 @@
 想初步了解 Weex 其实非常简单。
 
 * 安装 [Weex Playground](https://weex.apache.org/zh/guide/playground.html). 在 Playground 里，你可以打开各种示例。
-* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的[单页面]((https://vuejs.org/v2/guide/single-file-components.html))例子，并用 WeexPlayground 应用扫码查看实时效果。
+* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的[单页面](https://vuejs.org/v2/guide/single-file-components.html)例子，并用 WeexPlayground 应用扫码查看实时效果。
 
 ::: tip
 尽管 Weex Playground 是 Apache Weex 的一部分，但 Online Editor 不是。
diff --git a/docs/zh/guide/use-rax-in-weex.md b/docs/zh/guide/use-rax-in-weex.md
index a110a7c..8f2e735 100644
--- a/docs/zh/guide/use-rax-in-weex.md
+++ b/docs/zh/guide/use-rax-in-weex.md
@@ -1,3 +1,224 @@
 # 在 Weex 中使用 Rax
 
 > **Rax 是一个兼容 React 接口的前端框架，请访问 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解更多信息。**
+
+[[toc]]
+
+在 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) （发布于 2016 年 2 月 17 日）以及后续的版本中，集成了 v2 版本的 Vue.js。Vue 是一套构建用户界面的渐进式框架，详情请参阅其[官方网站](https://cn.vuejs.org/)。
+
+> 如果没有特别指示，文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。
+
+## 什么是 Rax
+
+如果你习惯于 React 的书写方式，欢迎使用 Rax，Rax 是一款超轻量，高性能，易上手的前端解决方案。
+一次开发多端运行，同时支持 Weex Web 小程序等不同端。
+
+## 环境变量
+
+Weex 提供 WXEnvironment 用来获取 Weex 运行的环境变量，Rax 页面可以通过 WXEnvironment 访问。
+提供字段如下：
+
+* platform (String) Current running platform, could be "Android", "iOS" or "Web".
+* weexVersion (String) The version of Weex SDK.
+* appName (String) Mobile app name or browser name.
+* appVersion (String) The version of current app.
+* osName (String) The OS name, could be "Android" or "iOS".
+* osVersion (String) The version of current OS.
+* deviceModel (String) Mobile phone device model. (native only)
+* deviceWidth (Number) Screen resolution width.
+* deviceHeight (Number) Screen resolution height.
+
+Rax 环境中的全局变量 Weex 在 WeexSDK 0.15 版本之后提供
+
+## Weex Rax Framework
+
+Native 和 Web 天生就有很多差异，为了让开发者有更好的体验，大部分的差异是不需要让开发者去关心的。因此 Native 端通过 Framework 模拟出了大量 Web 端的标准全局 API。
+
+常用 API 包括
+
+
+| W3C API |||||
+| -- | -- | -- | -- | -- |
+| name | closed | atob | btoa | performance |
+| document | location | navigator | screen | devicePixelRatio |
+| fetch | setTimeout | clearTimeout | setInterval | clearInterval |
+| requestAnimationFrame | cancelAnimationFrame | alert | open | close |
+| postMessage | addEventListener | removeEventListener | dispatchEvent | onerror |
+| Promise | Symbol | Map | Set | WeakMap |
+| WeakSet | Headers | Response | Request | XMLHttpRequest |
+| URL | URLSearchParams | FontFace | WebSocket | Event |
+| CustomEvent | matchMedia | | | |
+
+其中部分实现依赖 Weex Module 能力
+
+* fetch 使用 @weex-module/stream
+* setTimeout 使用 @weex-module/timer
+* clearTimeout 使用 @weex-module/timer
+* setInterval 使用 @weex-module/timer
+* clearInterval 使用 @weex-module/timer
+* requestAnimationFrame 使用 @weex-module/timer
+* cancelAnimationFrame 使用 @weex-module/timer
+* alert 使用 @weex-module/modal
+* open 使用 @weex-module/navigator
+* close 使用 @weex-module/navigator
+* postMessage	使用 BroadcastChannel 能力
+* addEventListener	跨页面监听使用 BroadcastChannel 能力，页面内监听使用内部的 Emitter
+* onerror	使用 @weex-module/globalEvent
+
+模块规范
+| API | 描述 |
+| -- | -- |
+| define | 组件定义 |
+| require | 组件依赖，支持 Rax 组件与 Weex 原生模块，注意 Weex 模块需要以 @weex-module/ 开头 |
+
+其他 API
+
+| API | 描述 |
+| -- | -- |
+| `__weex_document__` | createInstanceContext 过程中创建的 Document 实例 |
+| `__weex_module_supports__` | weex.isRegisteredModule |
+| `__weex_tag_supports__` | weex.isRegisteredComponent |
+| `__weex_define__` | 组件定义 |
+| `__weex_require__` | 组件依赖，支持 Rax 组件与 Weex 原生模块，注意 Weex 模块需要以  |@weex-module/ 开头
+| `__weex_downgrade__` | 页面降级方法，依赖 @weex-module/instanceWrap |
+| `__weex_env__` | WXEnvironment |
+| `__weex_options__` | 创建 Instance 所传递的参数 |
+| `__weex_data__` | 创建 Instance 所传递的数据 |
+| `__weex_config__` | 同 __weex_options__ |
+
+## 样式支持
+
+Rax 样式在 Weex 端与 Weex 所提供能力相同，并无额外扩展样式。
+
+## 使用组件
+
+Rax 的基础组件内部实现抹平了各端的差异，在 Weex 端的实现是Weex 提供的基础组件。例如 rax-view 的实现是 div，rax-text 的实现是 text。
+
+Rax 基础组件会将所有属性向下透传，并对核心逻辑进行多端的兼容。
+示例：
+
+```jsx
+<list loadmoreoffset={...}>
+	...
+</list>
+```
+
+Weex 组件与 Rax 混用
+
+```jsx
+<View>
+  <text>Hello Rax</text>
+</View>
+```
+
+## 使用 Weex 模块
+
+Rax 提供了多端兼容的 API [universal-api](https://rax.js.org/docs/api/introduce)。
+但在某些特殊场景下，如果向自己引用原生模块的方法，可以按照如下方式使用
+
+以 Weex Dom 模块为例
+
+```jsx
+let dom = require('@weex-module/dom');
+dom.scrollToElement(someNode, {
+  offset: 20,
+});
+```
+
+或
+
+```jsx
+let dom = __weex_require__('@weex-module/dom');
+dom.scrollToElement(someNode, {
+  offset: 20,
+});
+```
+
+## 页面降级
+
+Rax 页面降级可以使用 Weex Module @weex-module/instanceWrap，
+也可以使用更方便的辅助工具 @weex-project/downgrade
+
+Rax Framework 中也提供了全局的降级方法 `__weex_downgrade__` 方便开发者使用
+
+## 事件
+
+组件通用事件与 Weex 通用事件相同，Rax 中需要以 on 开头驼峰方式命名
+
+```jsx
+<View onClick={() => {}}>
+  ...
+</View>
+```
+
+页面事件，需要通过 setNativeProps API 手动向 body 节点绑定
+
+```jsx
+let bodyProps = {
+  onViewAppear: () => {},
+  onViewDisAppear: () => {}
+};
+let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {};
+if (weexDocument && weexDocument.body) {
+  setNativeProps(findDOMNode(weexDocument.body), bodyProps);
+}
+```
+
+事件冒泡
+
+```jsx
+let bodyProps = {
+  bubble: true,
+};
+let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {};
+if (weexDocument && weexDocument.body) {
+  setNativeProps(findDOMNode(weexDocument.body), bodyProps);
+}
+```
+
+阻止冒泡
+
+```jsx
+<View onClick={(event) => {
+	event.stopPropagation();
+}}>
+  ...
+</View>
+```
+
+## 事件通信
+
+Weex 提供了页面间通信的能力 BroadcastChannel（weex v0.9+）, Rax 页面中可以通过 Window 的全局方法进行通信。
+
+### 页面间通信
+
+页面 A 发送消息
+
+```jsx
+window.postMessage('{hello:1}',  '*');
+```
+
+页面 B 接收消息
+
+```jsx
+window.addEventListener('message', (e) => {
+  console.log('data is', e.data);
+});
+```
+
+### 页面内消息广播
+
+页面内发送消息
+
+```jsx
+window.dispatchEvent(new CustomEvent('eventName', { detail: 1 }));
+```
+
+页面内接收消息
+
+```jsx
+window.addEventListener('eventName', (event) => {
+	const {detail} = event;
+	// 业务逻辑
+});
+```