asyncapi
diff --git a/‎components/index.js
+17-6 b/‎components/index.js
+17-6
diff --git a/‎template/js/app.js.js
+17 b/‎template/js/app.js.js
+17
@@ -26,6 +26,10 @@ export function Index({ asyncapi, params = {} }) {
   if(params.baseHref) {
     basehref = `<base href="${params.baseHref}">`;
   }
+  let appJs = `<script type="application/javascript" src="js/app.js"></script>`;
+  if(params?.singleFile) {
+    appJs = `<script>${App({asyncapi, params})}</script>`;
+  }
   return (`<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -42,13 +46,20 @@ export function Index({ asyncapi, params = {} }) {
   
       ${asyncapiScript}
   
-      <script>
-        const schema = ${stringifySpec(asyncapi)};
-        const config = ${stringifyConfiguration(params)};
-        AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
-      </script>
+      ${appJs}
     </body>
   </html>`
   );
 }
-  
+
+export function App({ asyncapi, params = {} }) {
+  return (`
+    const schema = ${stringifySpec(asyncapi)};
+    const config = ${stringifyConfiguration(params)};
+    const appRoot = document.getElementById('root');
+    AsyncApiStandalone.render(
+        { schema, config, }, appRoot
+    );
+  `
+  );
+}
@@ -0,0 +1,17 @@
+import { File } from '@asyncapi/generator-react-sdk';
+import { App } from '../../components/index';
+import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
+
+/**
+ * 
+ * @param {object} param0 
+ * @param {AsyncAPIDocumentInterface} param0.asyncapi 
+ * @returns 
+ */
+export default function({ asyncapi, params = {} }) {
+  return (
+    <File name='app.js'>
+        <App asyncapi={asyncapi} params={params} />
+    </File>
+  );
+}