diff --git a/app.json b/app.json
index e311c5b..f2c2b08 100644
--- a/app.json
+++ b/app.json
@@ -23,7 +23,8 @@
     "pages/component/picker-view/picker-view",
     "pages/component/input/input",
     "pages/component/textarea/textarea",
-    "pages/component/form/form"
+    "pages/component/form/form",
+    "pages/component/rich-text/rich-text"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/component/index/index.js b/pages/component/index/index.js
index b864bb7..35c182d 100644
--- a/pages/component/index/index.js
+++ b/pages/component/index/index.js
@@ -17,7 +17,7 @@ Page({
         id: 'content',
         name: '基础内容',
         open: false,
-        pages: ['text', 'icon', 'progress']
+        pages: ['text', 'icon', 'rich-text', 'progress']
       }, {
         id: 'form',
         name: '表单组件',
diff --git a/pages/component/rich-text/rich-text.js b/pages/component/rich-text/rich-text.js
new file mode 100644
index 0000000..4e76bc8
--- /dev/null
+++ b/pages/component/rich-text/rich-text.js
@@ -0,0 +1,70 @@
+const htmlSnip =
+`<div class="div_class">
+  <h1>Title</h1>
+  <p class="p">
+    Life is&nbsp;<i>like</i>&nbsp;a box of
+    <b>&nbsp;chocolates</b>.
+  </p>
+</div>
+`
+
+const nodeSnip =
+`Page({
+  data: {
+    nodes: [{
+      name: 'div',
+      attrs: {
+        class: 'div_class',
+        style: 'line-height: 60px; color: red;'
+      },
+      children: [{
+        type: 'text',
+        text: 'You never know what you're gonna get.'
+      }]
+    }]
+  }
+})
+`
+
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'rich-text',
+      path: 'page/component/pages/rich-text/rich-text'
+    }
+  },
+
+  data: {
+    htmlSnip,
+    nodeSnip,
+    renderedByHtml: false,
+    renderedByNode: false,
+    nodes: [{
+      name: 'div',
+      attrs: {
+        class: 'div_class',
+        style: 'line-height: 60px; color: #1AAD19;'
+      },
+      children: [{
+        type: 'text',
+        text: 'You never know what you\'re gonna get.'
+      }]
+    }]
+  },
+  renderHtml() {
+    this.setData({
+      renderedByHtml: true
+    })
+  },
+  renderNode() {
+    this.setData({
+      renderedByNode: true
+    })
+  },
+  enterCode(e) {
+    console.log(e.detail.value)
+    this.setData({
+      htmlSnip: e.detail.value
+    })
+  }
+})
\ No newline at end of file
diff --git a/pages/component/rich-text/rich-text.json b/pages/component/rich-text/rich-text.json
new file mode 100644
index 0000000..8c62c6d
--- /dev/null
+++ b/pages/component/rich-text/rich-text.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "rich-text"
+}
diff --git a/pages/component/rich-text/rich-text.wxml b/pages/component/rich-text/rich-text.wxml
new file mode 100644
index 0000000..223d10b
--- /dev/null
+++ b/pages/component/rich-text/rich-text.wxml
@@ -0,0 +1,26 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section">
+      <view class="page-section-title">通过HTML String渲染</view>
+      <view class="page-content">
+        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
+        <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
+        <block wx:if="{{renderedByHtml}}">
+          <rich-text nodes="{{htmlSnip}}"></rich-text>
+        </block>
+      </view>
+    </view>
+
+    <view class="page-section">
+      <view class="page-section-title">通过节点渲染</view>
+      <view class="page-content">
+        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
+        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
+        <block wx:if="{{renderedByNode}}">
+          <rich-text nodes="{{nodes}}"></rich-text>
+        </block>
+      </view>
+    </view>
+  </view>
+
+</view>
\ No newline at end of file
diff --git a/pages/component/rich-text/rich-text.wxss b/pages/component/rich-text/rich-text.wxss
new file mode 100644
index 0000000..3be29cc
--- /dev/null
+++ b/pages/component/rich-text/rich-text.wxss
@@ -0,0 +1 @@
+/* pages/component/rich-text/rich-text.wxss */
\ No newline at end of file