diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index bb9a21db4e8..2cb80b71aa9 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -21,18 +21,25 @@
   -->
 
 <template>
-	<Editor :file-id="fileid"
+	<Editor v-if="false"
+		:file-id="fileid"
 		:relative-path="filename"
 		:active="active"
 		:autofocus="autofocus"
 		:share-token="shareToken"
 		:mime="mime" />
+	<Component :is="readerComponent" v-else :content="content" />
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
+import PlainTextReader from './PlainTextReader.vue'
+import RichTextReader from './RichTextReader.vue'
 export default {
 	name: 'ViewerComponent',
 	components: {
+		RichTextReader,
+		PlainTextReader,
 		Editor: () => import(/* webpackChunkName: "editor" */'./Editor.vue'),
 	},
 	props: {
@@ -60,6 +67,15 @@ export default {
 			type: String,
 			default: null,
 		},
+		source: {
+			type: String,
+			default: undefined,
+		},
+	},
+	data() {
+		return {
+			content: '',
+		}
 	},
 	beforeMount() {
 		// FIXME Dirty fix to avoid recreating the component on stable16
@@ -67,6 +83,17 @@ export default {
 			window.removeEventListener('resize', this.$parent.$parent.onResize)
 		}
 	},
+	mounted() {
+		axios.get(this.source).then(({ data }) => {
+			this.content = data
+			this.$emit('update:loaded', true)
+		})
+	},
+	computed: {
+		readerComponent() {
+			return this.mime === 'text/markdown' ? RichTextReader : PlainTextReader
+		},
+	},
 }
 </script>
 <style lang="scss">