diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..8b76359
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+.idea
+coverage
+examples
+img
+src
+test
+.babelrc
+.travis.yml
+karma.conf.js
+webpack.config.js
\ No newline at end of file
diff --git a/examples/demo1.html b/examples/demo1.html
index bbadfdb..a39d5d9 100644
--- a/examples/demo1.html
+++ b/examples/demo1.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="with=device-width,initial-scale=1.0,
       maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
     <title>vue-tree</title>
+    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
     <link href="https://cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">
     <style>
         html {
@@ -71,7 +72,13 @@
         </h1>
     </a>
     <div class="container">
-      <vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
+        <button class="button is-primary is-small" @click="addNode">
+            <span class="icon is-small" style="margin-right: 2px;">
+                <i class="fa fa-plus-circle"></i>
+            </span>
+            New Treenode
+        </button>
+        <vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
     </div>
 
     <div class="container">
@@ -147,6 +154,12 @@
         this.record = Object.assign({}, vuetree.Record)
       },
 
+      addNode: function () {
+        var node = new vuetree.TreeNode('new node', false)
+        if (!this.data.children) this.data.children = []
+        this.data.addChildren(node)
+      },
+
       getNewTree: function () {
         const vm = this
         function _dfs (oldNode) {
diff --git a/img/demo.gif b/img/demo.gif
new file mode 100644
index 0000000..c875f5a
Binary files /dev/null and b/img/demo.gif differ
diff --git a/package.json b/package.json
index e9ac552..a572a5e 100644
--- a/package.json
+++ b/package.json
@@ -11,21 +11,18 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ParadeTo/vue-date-range.git"
+    "url": "git+https://github.com/ParadeTo/vue-tree.git"
   },
   "keywords": [
     "vue",
-    "datepicker",
-    "date",
-    "range",
-    "moment"
+    "tree"
   ],
   "author": "ayou",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ParadeTo/vue-date-range/issues"
+    "url": "https://github.com/ParadeTo/vue-tree/issues"
   },
-  "homepage": "https://github.com/ParadeTo/vue-date-range#readme",
+  "homepage": "https://github.com/ParadeTo/vue-tree#readme",
   "dependencies": {
     "jquery": "^3.2.1"
   },
diff --git a/readme.md b/readme.md
index d6a13a5..927a811 100644
--- a/readme.md
+++ b/readme.md
@@ -1,3 +1,88 @@
+# vue-tree
+A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
 
-# TODO
-add test
\ No newline at end of file
+![vue-tree-demo.gif](https://github.com/ParadeTo/vue-tree/tree/master/img/demo.gif)
+
+[Live Demo](http://paradeto.com/vue-tree/)
+
+# use
+``npm install vue-tree``
+
+```javascript
+<button @click="addNode">Add Node</button>
+<vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
+<button @click="getNewTree">Get new tree</button>
+<pre>
+  {{newTree}}
+</pre>
+...
+import { VueTree, Tree, TreeNode } from 'vue-tree'
+export default {
+    components: {
+      VueTree
+    },
+    data () {
+      return {
+        newTree: {},
+        data: new Tree([
+          {
+            name: 'Node 1',
+            id: 1,
+            pid: 0,
+            children: [
+              {
+                name: 'Node 1-2',
+                id: 2,
+                isLeaf: true,
+                pid: 1
+              }
+            ]
+          },
+          {
+            name: 'Node 2',
+            id: 3,
+            pid: 0
+          },
+          {
+            name: 'Node 3',
+            id: 4,
+            pid: 0
+          }
+        ])
+      }
+    },
+    methods: {
+      addNode: function () {
+        var node = new TreeNode('new node', false)
+        if (!this.data.children) this.data.children = []
+        this.data.addChildren(node)
+      },
+
+      getNewTree: function () {
+        const vm = this
+        function _dfs (oldNode) {
+          let newNode = {}
+
+          newNode.name = oldNode.name
+          newNode.pid = oldNode.pid
+          newNode.isLeaf = oldNode.isLeaf
+          newNode.id = oldNode.id
+
+          if (oldNode.children && oldNode.children.length > 0) {
+            newNode.children = []
+            for (let i = 0, len = oldNode.children.length; i < len; i++) {
+              newNode.children.push(_dfs(oldNode.children[i]))
+            }
+          }
+          return newNode
+        }
+
+        vm.newTree = _dfs(vm.data)
+      }
+    }
+}
+```
+
+# props
+default-tree-node-name: Default name for new treenode.
+default-leaf-node-name: Default name for new leafnode.