diff --git a/demo/app.vue b/demo/app.vue
new file mode 100644
index 0000000..54da34e
--- /dev/null
+++ b/demo/app.vue
@@ -0,0 +1,51 @@
+<style lang="scss">
+  .toggle {
+    cursor: pointer;
+    margin: 20px;
+  }
+</style>
+
+<template>
+  <div class="row">
+    <div class="toggle" @click="toggle">TOGGLE</div>
+
+    <audio-recorder v-if="showRecorder"
+      upload-url="some url"
+      :attempts="3"
+      :time="2"
+      :start-record="callback"
+      :stop-record="callback"
+      :start-upload="callback"
+      :successful-upload="callback"
+      :failed-upload="callback"/>
+
+    <audio-player :src="mp3" v-if="!showRecorder"/>
+  </div>
+</template>
+
+<script>
+  import AudioPlayer from '../src/components/player'
+  import AudioRecorder from '../src/components/recorder'
+
+  export default {
+    name: 'app',
+    components: {
+      AudioPlayer,
+      AudioRecorder
+    },
+    data () {
+      return {
+        mp3: '/demo/example.mp3',
+        showRecorder: true
+      }
+    },
+    methods: {
+      callback (msg) {
+        console.debug('Event: ', msg)
+      },
+      toggle () {
+        this.showRecorder = !this.showRecorder
+      }
+    }
+  }
+</script>
diff --git a/demo/example.mp3 b/demo/example.mp3
new file mode 100644
index 0000000..56e01bf
Binary files /dev/null and b/demo/example.mp3 differ
diff --git a/demo/index.html b/demo/index.html
index e0da726..f00dcb5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,16 +6,6 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   </head>
   <body>
-    <div id="app">
-      <audio-recorder
-        upload-url="some url"
-        :attempts="3"
-        :time="2"
-        :start-record="callback"
-        :stop-record="callback"
-        :start-upload="callback"
-        :successful-upload="callback"
-        :failed-upload="callback"/>
-    </div>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
index 6f89355..1ae2161 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,16 +1,10 @@
 import Vue from 'vue'
 import axios from 'axios'
-import AudioRecorder from '../src/audio-recorder'
+import app from './app'
 
-Vue.config.productionTip = false
 Vue.prototype.$http = axios
 
 new Vue({
   el: '#app',
-  components: {AudioRecorder},
-  methods: {
-    callback (msg) {
-      console.debug('Event: ', msg)
-    }
-  }
+  render: h => h(app)
 })
