diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 0d86913bc7b..82d85c6010c 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -47,13 +47,34 @@ const loadSourceFiles = async (files: string[], version: number) => {
 }
 
 const openHtmlEditor = async (code: string, options?: EditorOptions) => {
-  const [index_ts, index_html, variables_css, package_json] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'html/index.ts',
     options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
     'html/variables.css',
     'html/package.json'
   ], options.version);
 
+  const indexHtml = 'index.html';
+  const files = {
+    'index.ts': defaultFiles[0],
+    [indexHtml]: defaultFiles[1],
+    'theme/variables.css': defaultFiles[2],
+    ...options?.files
+  };
+
+  const package_json = defaultFiles[3];
+
+  files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace('</head>', `
+  <script>
+    window.Ionic = {
+      config: {
+        mode: '${options?.mode}'
+      }
+    }
+  </script>
+</head>
+`);
+
   let dependencies = {};
   try {
     dependencies = {
@@ -68,18 +89,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     template: 'typescript',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'index.html': index_html.replace(/{{ TEMPLATE }}/g, code).replace(/{{ MODE }}/g, options?.mode),
-      'index.ts': index_ts,
-      'theme/variables.css': variables_css,
-      ...options?.files
-    },
+    files,
     dependencies
   })
 }
 
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
-  let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, variables_css, angular_json, tsconfig_json, package_json] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'angular/main.ts',
     'angular/app.module.ts',
     'angular/app.component.ts',
@@ -92,18 +108,40 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular/angular.json',
     'angular/tsconfig.json',
     'angular/package.json'
-  ], options.version)
+  ], options.version);
+
+  const appModule = 'src/app/app.module.ts';
+  const files = {
+    'src/main.ts': defaultFiles[0],
+    'src/polyfills.ts': `import 'zone.js/dist/zone';`,
+    [appModule]: defaultFiles[1],
+    'src/app/app.component.ts': defaultFiles[2],
+    'src/app/app.component.css': defaultFiles[3],
+    'src/app/app.component.html': defaultFiles[4],
+    'src/app/example.component.ts': defaultFiles[5],
+    'src/app/example.component.html': code,
+    'src/app/example.component.css': '',
+    'src/index.html': '<app-root></app-root>',
+    'src/styles.css': defaultFiles[6],
+    'src/global.css': defaultFiles[7],
+    'src/theme/variables.css': defaultFiles[8],
+    'angular.json': defaultFiles[9],
+    'tsconfig.json': defaultFiles[10],
+    ...options?.files
+  };
+
+  const package_json = defaultFiles[11];
 
   if (options.angularModuleOptions) {
     if (options.angularModuleOptions.imports) {
-      app_module_ts = `${options.angularModuleOptions.imports.join('\n')}\n${app_module_ts}`;
+      files[appModule] = `${options.angularModuleOptions.imports.join('\n')}\n${files[appModule]}`;
     }
     if (options.angularModuleOptions.declarations) {
-      app_module_ts = app_module_ts.replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
+      files[appModule] = files[appModule].replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
     }
   }
 
-  app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
+  files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`);
 
   let dependencies = {};
   try {
@@ -119,30 +157,13 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     template: 'angular-cli',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'src/main.ts': main_ts,
-      'src/polyfills.ts': `import 'zone.js/dist/zone';`,
-      'src/app/app.module.ts': app_module_ts,
-      'src/app/app.component.ts': app_component_ts,
-      'src/app/app.component.html': app_component_html,
-      'src/app/example.component.ts': example_component_ts,
-      'src/app/example.component.html': code,
-      'src/app/example.component.css': '',
-      'src/app/app.component.css': app_component_css,
-      'src/index.html': '<app-root></app-root>',
-      'src/styles.css': styles_css,
-      'src/global.css': global_css,
-      'src/theme/variables.css': variables_css,
-      'angular.json': angular_json,
-      'tsconfig.json': tsconfig_json,
-      ...options?.files
-    },
+    files,
     dependencies
   });
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json, index_html] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'react/index.tsx',
     options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
     'react/variables.css',
@@ -152,31 +173,34 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'react/index.html',
   ], options.version);
 
-  app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
+  const appTsx = 'src/App.tsx';
+  const files = {
+    'public/index.html': defaultFiles[6],
+    'src/index.tsx': defaultFiles[0],
+    [appTsx]: defaultFiles[1],
+    'src/main.tsx': code,
+    'src/theme/variables.css': defaultFiles[2],
+    'tsconfig.json': defaultFiles[3],
+    'package.json': defaultFiles[4],
+    'package-lock.json': defaultFiles[5],
+    ...options?.files,
+    '.stackblitzrc': `{
+  "startCommand": "yarn run start"
+}`
+  };
+
+  files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`);
 
   sdk.openProject({
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'public/index.html': index_html,
-      'src/index.tsx': index_tsx,
-      'src/App.tsx': app_tsx,
-      'src/main.tsx': code,
-      'src/theme/variables.css': variables_css,
-      'tsconfig.json': ts_config_json,
-      'package.json': package_json,
-      'package-lock.json': package_lock_json,
-      ...options?.files,
-      '.stackblitzrc': `{
-        "startCommand": "yarn run start"
-      }`
-    }
-  })
+    files
+  });
 }
 
 const openVueEditor = async (code: string, options?: EditorOptions) => {
-  let [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'vue/package.json',
     'vue/package-lock.json',
     'vue/index.html',
@@ -189,7 +213,28 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'vue/env.d.ts'
   ], options.version);
 
-  main_ts = main_ts.replace('{{ MODE }}', options?.mode);
+  const mainTs = 'src/main.ts';
+  const files = {
+    'src/App.vue': defaultFiles[6],
+    'src/components/Example.vue': code,
+    [mainTs]: defaultFiles[5],
+    'src/env.d.ts': defaultFiles[9],
+    'src/theme/variables.css': defaultFiles[3],
+    'index.html': defaultFiles[2],
+    'vite.config.ts': defaultFiles[4],
+    'package.json': defaultFiles[0],
+    'package-lock.json': defaultFiles[1],
+    'tsconfig.json': defaultFiles[7],
+    'tsconfig.node.json': defaultFiles[8],
+    ...options?.files,
+    '.stackblitzrc': `{
+  "startCommand": "yarn run dev"
+}`
+  };
+
+  files[mainTs] = files[mainTs].replace('.use(IonicVue)', `.use(IonicVue, {
+  mode: '${options?.mode}'
+})`);
 
   /**
    * We have to use Stackblitz web containers here (node template), due
@@ -201,23 +246,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'src/App.vue': app_vue,
-      'src/components/Example.vue': code,
-      'src/main.ts': main_ts,
-      'src/env.d.ts': env_d_ts,
-      'src/theme/variables.css': variables_css,
-      'index.html': index_html,
-      'vite.config.ts': vite_config_ts,
-      'package.json': package_json,
-      'package-lock.json': package_lock_json,
-      'tsconfig.json': tsconfig_json,
-      'tsconfig.node.json': tsconfig_node_json,
-      ...options?.files,
-      '.stackblitzrc': `{
-        "startCommand": "yarn run dev"
-      }`
-    }
+    files
   });
 }
 
diff --git a/static/code/stackblitz/v6/angular/app.module.ts b/static/code/stackblitz/v6/angular/app.module.ts
index dcee64f417e..7f6894ce6af 100644
--- a/static/code/stackblitz/v6/angular/app.module.ts
+++ b/static/code/stackblitz/v6/angular/app.module.ts
@@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
-    mode: '{{ MODE }}'
-  })],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/code/stackblitz/v6/html/index.html b/static/code/stackblitz/v6/html/index.html
index 1ba72a98949..8a59c2afc0f 100644
--- a/static/code/stackblitz/v6/html/index.html
+++ b/static/code/stackblitz/v6/html/index.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v6/html/index.withContent.html b/static/code/stackblitz/v6/html/index.withContent.html
index c13b3063615..3cd31834675 100644
--- a/static/code/stackblitz/v6/html/index.withContent.html
+++ b/static/code/stackblitz/v6/html/index.withContent.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v6/react/app.tsx b/static/code/stackblitz/v6/react/app.tsx
index 17430586f74..7ba9c8b93c7 100644
--- a/static/code/stackblitz/v6/react/app.tsx
+++ b/static/code/stackblitz/v6/react/app.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v6/react/app.withContent.tsx b/static/code/stackblitz/v6/react/app.withContent.tsx
index e1f307d03cd..d90d8f74ffe 100644
--- a/static/code/stackblitz/v6/react/app.withContent.tsx
+++ b/static/code/stackblitz/v6/react/app.withContent.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v6/vue/main.ts b/static/code/stackblitz/v6/vue/main.ts
index c8650146df9..207b1ad84c6 100644
--- a/static/code/stackblitz/v6/vue/main.ts
+++ b/static/code/stackblitz/v6/vue/main.ts
@@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-createApp(App).use(IonicVue, {
-  mode: '{{ MODE }}'
-}).mount('#app');
+createApp(App).use(IonicVue).mount('#app');
diff --git a/static/code/stackblitz/v7/angular/app.module.ts b/static/code/stackblitz/v7/angular/app.module.ts
index dcee64f417e..7f6894ce6af 100644
--- a/static/code/stackblitz/v7/angular/app.module.ts
+++ b/static/code/stackblitz/v7/angular/app.module.ts
@@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
-    mode: '{{ MODE }}'
-  })],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html
index a521ed9844e..5e77463a672 100644
--- a/static/code/stackblitz/v7/html/index.html
+++ b/static/code/stackblitz/v7/html/index.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html
index a5efecac81d..242233075dc 100644
--- a/static/code/stackblitz/v7/html/index.withContent.html
+++ b/static/code/stackblitz/v7/html/index.withContent.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v7/react/app.tsx b/static/code/stackblitz/v7/react/app.tsx
index 17430586f74..7ba9c8b93c7 100644
--- a/static/code/stackblitz/v7/react/app.tsx
+++ b/static/code/stackblitz/v7/react/app.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v7/react/app.withContent.tsx b/static/code/stackblitz/v7/react/app.withContent.tsx
index e1f307d03cd..d90d8f74ffe 100644
--- a/static/code/stackblitz/v7/react/app.withContent.tsx
+++ b/static/code/stackblitz/v7/react/app.withContent.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v7/vue/main.ts b/static/code/stackblitz/v7/vue/main.ts
index c8650146df9..207b1ad84c6 100644
--- a/static/code/stackblitz/v7/vue/main.ts
+++ b/static/code/stackblitz/v7/vue/main.ts
@@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-createApp(App).use(IonicVue, {
-  mode: '{{ MODE }}'
-}).mount('#app');
+createApp(App).use(IonicVue).mount('#app');