diff --git a/index.html b/index.html
new file mode 100644
index 0000000..273b3de
--- /dev/null
+++ b/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
+    <style>
+      body {
+        margin: 50px auto;
+        width: 80%;
+        max-width: 800px;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script>
+    <script src="https://github.com/medium.patched.js"></script>
+  </head>
+  <body class='markdown-body'>
+
+    <a href="https://github.com/FranzSkuffka/vue-medium.js" target='blank'>
+      <h1>Vue-Medium.JS Demo</h1>
+    </a>
+
+    <div class='demo'>
+      <h4> Editable Content </h4>
+      <div v-medium='text' mode='rich'></div>
+      <h4> Model Value </h4>
+      <div>{{text}}</div>
+    </div>
+
+    <h4>Code</h4>
+
+    <pre>
+// index.html
+
+&lt;div v-medium='text' mode='rich'&gt;&lt;/div&gt;
+
+
+// main.js
+
+var vm = new Vue({
+  el: '.demo',
+  data: {
+      text: '&lt;p&gt;Hello &lt;b&gt;World &lt;/b&gt;&lt;/p&gt;'
+    },
+  directives: {
+      medium: mediumDirective
+    }
+});</pre>
+
+    <script>
+
+      // Generated by CoffeeScript 1.10.0
+      (function() {
+
+        var mediumDirective = {
+          twoWay: true,
+          params: ['mode'],
+          update: function(newValue, oldValue) {
+            this.mode = this.params.mode != null ? this.params.mode + 'Mode' : 'richMode';
+            this.medium = new Medium({
+              element: this.el,
+              mode: Medium[this.mode]
+            });
+            this.medium.value(newValue);
+            return this.medium.element.addEventListener('keyup', (function(_this) {
+              return function() {
+                return _this.set(_this.medium.value());
+              };
+            })(this));
+          }
+        };
+
+        // directive
+        // init vue
+        var vm = new Vue({
+          el: '.demo',
+          data: {
+            text: '<p>Hello <b>World </b></p>'
+            },
+          directives: {
+            medium: mediumDirective
+            }
+        });
+
+      }).call(this);
+    </script>
+  </body>
+</html>
