diff --git a/components/index.js b/components/index.js
index a7a2a6d61..5862c3277 100644
--- a/components/index.js
+++ b/components/index.js
@@ -42,13 +42,20 @@ export function Index({ asyncapi, params = {} }) {
   
       ${asyncapiScript}
   
-      <script>
-        const schema = ${stringifySpec(asyncapi)};
-        const config = ${stringifyConfiguration(params)};
-        AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
-      </script>
+      <script type="application/javascript" src="js/app.js"></script>
     </body>
   </html>`
   );
 }
-  
\ No newline at end of file
+
+export function App({ asyncapi, params = {} }) {
+  return (`
+    const schema = ${stringifySpec(asyncapi)};
+    const config = ${stringifyConfiguration(params)};
+    const appRoot = document.getElementById('root');
+    AsyncApiStandalone.render(
+        { schema, config, }, appRoot
+    );
+  `
+  );
+}
diff --git a/template/js/app.js.js b/template/js/app.js.js
new file mode 100644
index 000000000..036de9078
--- /dev/null
+++ b/template/js/app.js.js
@@ -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>
+  );
+}