diff --git a/src/AppDemoActions.vue b/src/AppDemoActions.vue
index 143d82d19..5d44b2e22 100644
--- a/src/AppDemoActions.vue
+++ b/src/AppDemoActions.vue
@@ -29,6 +29,12 @@ export default {
                     command: () => {
                         EventBus.emit('run-demo', 'composition-api');
                     }
+                },
+                {
+                    label: 'Browser Demo',
+                    command: () => {
+                        EventBus.emit('run-demo', 'browser-source');
+                    }
                 }
 			]
 		}
diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index 27e53a772..ae9f8cf71 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -36,6 +36,7 @@ export default {
 
             this.renderSource('options-api', tabs);
             this.renderSource('composition-api', tabs);
+            this.renderSource('browser-source', tabs);
 
             if (this.service) {
                 let serviceArr = [];
@@ -75,12 +76,44 @@ export default {
 
             return tabs;
         },
+        renderContent(source) {
+            if (source.tabName === 'Browser Source') {
+                const _imports = source.imports ? source.imports.replaceAll('<\\/script>', '<\/script>') : '';
+                return `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+        <!-- PrimeVue -->
+        <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
+
+        <!-- Dependencies -->
+        <script src="https://unpkg.com/vue@next"><\/script>
+        <script src="./core.js"><\/script>
+
+        <!-- Demo -->
+        <link href="./index.css" rel="stylesheet" />
+        ${_imports}
+    </head>
+    <body>
+        ${source.content.replace('<\\/script>', '<\/script>')}
+    </body>
+</html>
+                `
+            }
+            return source.content.replace('<\\/script>', '<\/script>');
+        },
         renderSource(sourceType, tabs) {
             if (this.sources && this.sources[sourceType]) {
                 tabs.push(
                     <TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
                         <pre v-code><code>
-                            {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
+                            {this.renderContent(this.sources[sourceType])}
                         </code></pre>
                     </TabPanel>
                 );
