diff --git a/packages/web-app-pdf-viewer/src/PdfViewer.vue b/packages/web-app-pdf-viewer/src/PdfViewer.vue
new file mode 100644
index 00000000000..dc2ad628928
--- /dev/null
+++ b/packages/web-app-pdf-viewer/src/PdfViewer.vue
@@ -0,0 +1,16 @@
+<template>
+  <object class="pdf-viewer oc-width-1-1 oc-height-1-1" :data="url" type="application/pdf" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue b/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue
deleted file mode 100644
index 54da550eb45..00000000000
--- a/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="oc-position-center oc-text-center">
-    <oc-icon size="xxlarge" name="error-warning" fill-type="line" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ErrorScreen'
-})
-</script>
diff --git a/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue b/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue
deleted file mode 100644
index 641f4c1e09b..00000000000
--- a/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="oc-position-center oc-text-center">
-    <oc-spinner size="xlarge" />
-    <p v-translate class="oc-invisible">Loading PDF document</p>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'LoadingScreen'
-})
-</script>
diff --git a/packages/web-app-pdf-viewer/src/index.ts b/packages/web-app-pdf-viewer/src/index.ts
index 13c0c0a70ea..53fb11815b4 100644
--- a/packages/web-app-pdf-viewer/src/index.ts
+++ b/packages/web-app-pdf-viewer/src/index.ts
@@ -1,5 +1,6 @@
 import translations from '../l10n/translations.json'
-import App from './App.vue'
+import { AppWrapperRoute } from 'web-pkg/src/components/AppTemplates/AppWrapperRoute'
+import PdfViewer from './PdfViewer.vue'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -9,7 +10,12 @@ function $gettext(msg) {
 const routes = [
   {
     path: '/:driveAliasAndItem(.*)?',
-    component: App,
+    component: AppWrapperRoute(PdfViewer, {
+      applicationId: 'pdf-viewer',
+      urlForResourceOptions: {
+        disposition: 'inline'
+      }
+    }),
     name: 'pdf-viewer',
     meta: {
       authContext: 'hybrid',
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
deleted file mode 100644
index fb904ad84da..00000000000
--- a/packages/web-app-text-editor/src/App.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <AppWrapper
-    v-slot="{ currentContent, ...slotArgs }: AppWrapperSlotArgs"
-    application-id="text-editor"
-  >
-    <TextEditor v-model:current-content="currentContent.value" v-bind="slotArgs" />
-  </AppWrapper>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import AppWrapper, { AppWrapperSlotArgs } from 'web-pkg/src/components/AppTemplates/AppWrapper.vue'
-import TextEditor from './TextEditor.vue'
-
-export default defineComponent({
-  name: 'TextEditorApp',
-  components: {
-    AppWrapper,
-    TextEditor
-  }
-})
-</script>
diff --git a/packages/web-app-text-editor/src/index.ts b/packages/web-app-text-editor/src/index.ts
index b6b1b049602..8125e926e56 100644
--- a/packages/web-app-text-editor/src/index.ts
+++ b/packages/web-app-text-editor/src/index.ts
@@ -1,5 +1,6 @@
-import App from './App.vue'
 import translations from '../l10n/translations.json'
+import TextEditor from './TextEditor.vue'
+import { AppWrapperRoute } from 'web-pkg/src/components/AppTemplates/AppWrapperRoute'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -11,7 +12,9 @@ const appId = 'text-editor'
 const routes = [
   {
     path: '/:driveAliasAndItem(.*)?',
-    component: App,
+    component: AppWrapperRoute(TextEditor, {
+      applicationId: appId
+    }),
     name: 'text-editor',
     meta: {
       authContext: 'hybrid',
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapperRoute.ts b/packages/web-pkg/src/components/AppTemplates/AppWrapperRoute.ts
new file mode 100644
index 00000000000..e62dd6d1529
--- /dev/null
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapperRoute.ts
@@ -0,0 +1,25 @@
+import { defineComponent, h } from 'vue'
+import AppWrapper, { AppWrapperSlotArgs } from './AppWrapper.vue'
+import { UrlForResourceOptions } from 'web-pkg/src/composables'
+
+export function AppWrapperRoute(
+  fileEditor: ReturnType<typeof defineComponent>,
+  options: { applicationId: string; urlForResourceOptions?: UrlForResourceOptions }
+) {
+  return defineComponent({
+    render() {
+      return h(AppWrapper, options, {
+        default: (slotArgs: AppWrapperSlotArgs) => {
+          const { currentContent, ...restArgs } = slotArgs
+          return h(fileEditor, {
+            currentContent: currentContent.value,
+            'onUpdate:currentContent': (value) => {
+              currentContent.value = value
+            },
+            ...restArgs
+          })
+        }
+      })
+    }
+  })
+}