multimeric
diff --git a/‎README.md
Lines changed: 29 additions & 11 deletions b/‎README.md
Lines changed: 29 additions & 11 deletions
diff --git a/‎docs/index.html
Lines changed: 4 additions & 6 deletions b/‎docs/index.html
Lines changed: 4 additions & 6 deletions
@@ -1,8 +1,16 @@
 # Vue CWL
 Vue CWL provides a Vue component for the visualization of CWL (Common Workflow Language) workflows.
 
-## Installation
-Install from `npm`:
+## Motivation
+
+Vue CWL uses the fantastic [cwl-svg](https://github.com/rabix/cwl-svg) library behind the scenes, which you can also use directly.
+However, you might want to use Vue CWL because:
+
+* You can use it directly in your HTML application, without setting up a compiler. You don't even need to use npm!
+* If you're using Vue elsewhere in your application, Vue CWL will be much easier to integrate.
+
+## Installation (if using npm )
+Install from npm:
 
 ```bash
 npm install vue-cwl --save-dev
@@ -14,11 +22,11 @@ Or, if you want the latest development version, install from github:
 npm install git+https://[email protected]/TMiguelT/vue-cwl.git --save-dev
 ```
 
-## Adding to Vue
+## Integration
 Vue CWL is exported as a UMD module, which means that you can either import it with a module loader,
 or import it directly in the browser.
 
-If using webpack:
+If using webpack and npm:
 
 ```javascript
 import Vue from 'vue';
@@ -32,20 +40,30 @@ new Vue({
 })
 ```
 
-If using no bundler:
+You can now use the `<cwl>` tag in your template:
+```html
+<cwl
+    cwl-url="https://unpkg.com/[email protected]/cwl-samples/fastqc.json"
+></cwl>
+```
+
+If using no bundler, you can include Vue and Vue CWL using something like `unpkg`:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
-<script src="node_modules/vue-cwl/dist/index.js"></script>
+<div id="vue" style="width: 800px; height: 800px">
+    <cwl
+            cwl-url="https://unpkg.com/[email protected]/cwl-samples/fastqc.json"
+    ></cwl>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
+<script src="https://unpkg.com/vue-cwl/dist/index.js"></script>
 <script>
-    Vue.config.devtools = true;
-    Vue.config.debug = true;
     new Vue({
         el: '#vue',
         components: {
             cwl: vueCwl.default
         }
-    })
+    });
 </script>
 ```
 
@@ -76,5 +94,5 @@ An online demo of Vue CWL is available at <https://tmiguelt.github.io/vue-cwl/in
 If you wish to build the demo yourself:
 * Clone the repo
 * Run `npm run demo`
-* Then browse to <http://localhost:8080/docs/> in your web browser (or whatever URL the command
+* Then browse to <http://localhost:8080/> in your web browser (or whatever URL the command
 prints out)
@@ -3,20 +3,18 @@
 <body>
 <div id="vue" style="width: 800px; height: 800px">
     <cwl
-            cwl-url="https://rawgit.com/rabix/cwl-svg/master/cwl-samples/fastqc.json"
+            cwl-url="https://unpkg.com/cwl-svg@2.1.5/cwl-samples/fastqc.json"
     ></cwl>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-cwl/dist/index.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
+<script src="https://unpkg.com/vue-cwl/dist/index.js"></script>
 <script>
-    Vue.config.devtools = true;
-    Vue.config.debug = true;
     new Vue({
         el: '#vue',
         components: {
             cwl: vueCwl.default
         }
-    })
+    });
 </script>
 </body>
 </html>