diff --git a/packages/ui-react/src/button/Button.tsx b/packages/ui-react/src/button/Button.tsx
index 57a399a9..390e547f 100644
--- a/packages/ui-react/src/button/Button.tsx
+++ b/packages/ui-react/src/button/Button.tsx
@@ -34,11 +34,7 @@ const Page: React.FC<ButtonProps> = ({ config }) => {
   const MagicUiText = app.resolveComponent('text');
 
   return (
-    <button
-      className="magic-ui-button"
-      style={app.transformStyle(config.style || {})}
-      id={`${config.id || ''}`}
-    >
+    <button className="magic-ui-button" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
       <MagicUiText
         config={{
           text: config.text,
diff --git a/packages/ui-react/src/img/Img.tsx b/packages/ui-react/src/img/Img.tsx
index 43a678f9..1ef0bcee 100644
--- a/packages/ui-react/src/img/Img.tsx
+++ b/packages/ui-react/src/img/Img.tsx
@@ -36,10 +36,16 @@ const Img: React.FC<ImgProps> = ({ config }) => {
 
   const clickHandler = () => {
     if (config.url) window.location.href = config.url;
-  }
+  };
 
   return (
-    <img className="magic-ui-img" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={config.src} onClick={clickHandler} />
+    <img
+      className="magic-ui-img"
+      style={app.transformStyle(config.style || {})}
+      id={`${config.id}`}
+      src={config.src}
+      onClick={clickHandler}
+    />
   );
 };
 
diff --git a/packages/ui-react/src/overlay/Overlay.tsx b/packages/ui-react/src/overlay/Overlay.tsx
index 400b4514..327e25f4 100644
--- a/packages/ui-react/src/overlay/Overlay.tsx
+++ b/packages/ui-react/src/overlay/Overlay.tsx
@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-import React, { useContext, useEffect , useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import Core from '@tmagic/core';
 import { MComponent, MNode } from '@tmagic/schema';
 
-import useApp from '../useApp';
 import AppContent from '../AppContent';
+import useApp from '../useApp';
 
 interface OverlayProps {
   config: MComponent;
@@ -55,7 +55,7 @@ const Overlay: React.FC<OverlayProps> = ({ config }) => {
     methods: {
       openOverlay,
       closeOverlay,
-    }
+    },
   });
 
   app?.on('editor:select', (info: any, path: MNode[]) => {
@@ -66,13 +66,16 @@ const Overlay: React.FC<OverlayProps> = ({ config }) => {
     }
   });
 
-  
   if (!visible) return null;
 
   const MagicUiComp = app.resolveComponent('container');
 
   return (
-    <MagicUiComp id={config.id} className="magic-ui-overlay" config={ { style: config.style, items: config.items } }></MagicUiComp>
+    <MagicUiComp
+      id={config.id}
+      className="magic-ui-overlay"
+      config={{ style: config.style, items: config.items }}
+    ></MagicUiComp>
   );
 };
 
diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx
index bc0dc39c..f614257d 100644
--- a/packages/ui-react/src/page/Page.tsx
+++ b/packages/ui-react/src/page/Page.tsx
@@ -30,33 +30,35 @@ const Page: React.FC<PageProps> = ({ config }) => {
   const { app } = useApp({
     config,
     methods: {
-      refresh: () => window.location.reload()
-    }
+      refresh: () => window.location.reload(),
+    },
   });
 
   if (!app) return null;
 
-  return  <div
-    id={`${config.id || ''}`}
-    className={`magic-ui-page${config.className ? ` ${config.className}` : ''}`}
-    style={app.transformStyle(config.style || {})}
-  >
-    {config.items?.map((item: MComponent | MContainer) => {
-      const MagicUiComp = app.resolveComponent(item.type || 'container');
+  return (
+    <div
+      id={`${config.id || ''}`}
+      className={`magic-ui-page${config.className ? ` ${config.className}` : ''}`}
+      style={app.transformStyle(config.style || {})}
+    >
+      {config.items?.map((item: MComponent | MContainer) => {
+        const MagicUiComp = app.resolveComponent(item.type || 'container');
 
-      if (!MagicUiComp) return null;
+        if (!MagicUiComp) return null;
 
-      return (
-        <MagicUiComp
-          id={`${item.id || ''}`}
-          key={item.id}
-          config={item}
-          className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
-          style={app.transformStyle(item.style || {})}
-        ></MagicUiComp>
-      );
-    })}
-  </div>;
+        return (
+          <MagicUiComp
+            id={`${item.id || ''}`}
+            key={item.id}
+            config={item}
+            className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
+            style={app.transformStyle(item.style || {})}
+          ></MagicUiComp>
+        );
+      })}
+    </div>
+  );
 };
 
 Page.displayName = 'magic-ui-page';
diff --git a/packages/ui-react/src/qrcode/Qrcode.tsx b/packages/ui-react/src/qrcode/Qrcode.tsx
index 5b04fe65..268ee07e 100644
--- a/packages/ui-react/src/qrcode/Qrcode.tsx
+++ b/packages/ui-react/src/qrcode/Qrcode.tsx
@@ -19,9 +19,10 @@
 import React, { useEffect, useState } from 'react';
 import QRCode from 'qrcode';
 
-import useApp from '../useApp';
 import { MComponent } from '@tmagic/schema';
 
+import useApp from '../useApp';
+
 interface QrcodeProps {
   config: {
     url: string;
@@ -38,10 +39,9 @@ const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
   useEffect(() => {
     QRCode.toDataURL(config.url, (e: any, url: string) => {
       if (e) console.error(e);
-      setImgSrc(url)
+      setImgSrc(url);
     });
-  }, [config.url])
-
+  }, [config.url]);
 
   return (
     <img className="magic-ui-qrcode" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={imgSrc} />
diff --git a/runtime/react/src/page/main.tsx b/runtime/react/src/page/main.tsx
index 498be722..06c40816 100644
--- a/runtime/react/src/page/main.tsx
+++ b/runtime/react/src/page/main.tsx
@@ -47,7 +47,7 @@ const getLocalConfig = (): MApp[] => {
   }
 };
 
-window.magicDSL = []
+window.magicDSL = [];
 
 const app = new Core({
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},