diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 504958f53..d4545728e 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -197,10 +197,10 @@
     }
   },
   "scripts": {
-    "start": "NODE_OPTIONS=--max_old_space_size=12288 vite",
-    "build": "yarn test && lowcoder-cli build",
-    "build_only": "lowcoder-cli build",
-    "build_publish": "lowcoder-cli build --publish",
+    "start": "NODE_OPTIONS=--max_old_space_size=6442 vite",
+    "build": "NODE_OPTIONS=--max_old_space_size=6442 yarn test && lowcoder-cli build",
+    "build_only": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build",
+    "build_publish": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build --publish",
     "test": "jest"
   },
   "devDependencies": {
diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
index 49acf03f4..01a0f29a8 100644
--- a/client/packages/lowcoder-sdk/package.json
+++ b/client/packages/lowcoder-sdk/package.json
@@ -28,8 +28,8 @@
     }
   },
   "scripts": {
-    "build": "vite build",
-    "start": "vite"
+    "build": "NODE_OPTIONS=--max_old_space_size=6442 vite build",
+    "start": "NODE_OPTIONS=--max_old_space_size=2048 vite"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",
diff --git a/client/packages/lowcoder/src/comps/comps/dataChangeResponderComp.tsx b/client/packages/lowcoder/src/comps/comps/dataChangeResponderComp.tsx
index fe57edd1e..b906a7b60 100644
--- a/client/packages/lowcoder/src/comps/comps/dataChangeResponderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dataChangeResponderComp.tsx
@@ -21,6 +21,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
 import { setFieldsNoTypeCheck } from "util/objectUtils";
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const dataChangeEvent: EventConfigType = {
   label: "onDataChange",
@@ -71,7 +72,15 @@ const DataResponderItemCompBase = new MultiCompBuilder(
                 </QuerySectionWrapper>
               </QueryPropertyViewWrapper><><TacoMarkDown>{trans("dataResponder.documentationText")}</TacoMarkDown><DocLink style={{ marginTop: 8 }} href={QueryTutorials.dataResponder} title={trans("dataResponder.documentationText")}>
                 {trans("dataResponder.docLink")}
-              </DocLink></></>
+              </DocLink><br/><br/>
+
+              <SupaDemoDisplay
+                url={trans("supademos.dataresponder")}
+                modalWidth="80%"
+                modalTop="20px"
+              />
+              
+              </></>
               
             ),
           },
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 17f61762a..db1f9f050 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -59,6 +59,7 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { styleControl } from "comps/controls/styleControl";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 export const getStyle = (
   style:
diff --git a/client/packages/lowcoder/src/comps/comps/temporaryStateComp.tsx b/client/packages/lowcoder/src/comps/comps/temporaryStateComp.tsx
index e8bd0fdbe..4ff27d198 100644
--- a/client/packages/lowcoder/src/comps/comps/temporaryStateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/temporaryStateComp.tsx
@@ -8,13 +8,13 @@ import { trans } from "i18n";
 import _ from "lodash";
 import { DocLink } from "lowcoder-design";
 import { BottomTabs } from "pages/editor/bottom/BottomTabs";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bottomRes";
 import { JSONObject } from "util/jsonTypes";
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
-import { evalAndReduce } from "../utils";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const TemporaryStateItemCompBase = new MultiCompBuilder(
     {
@@ -24,29 +24,51 @@ const TemporaryStateItemCompBase = new MultiCompBuilder(
     () => null
   )
   .setPropertyViewFn((children) => {
-    return (
-      <BottomTabs
-        type={BottomResTypeEnum.TempState}
-        tabsConfig={[
-          {
-            key: "general",
-            title: trans("query.generalTab"),
-            children: children.value.propertyView({
-              label: trans("temporaryState.value"),
-              tooltip: trans("temporaryState.valueTooltip"),
-              placement: "bottom",
-              extraChildren: QueryTutorials.tempState && (
-                <><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
-                  {trans("temporaryState.docLink")}
-                </DocLink></>
-              ),
-            }),
-          },
-        ]}
-        tabTitle={children.name.getView()}
-        status=""
-      />
-    );
+    const PropertyViewWithModal = () => {
+      const [isOpen, setIsOpen] = useState(false);
+  
+      const handleOpen = () => {
+        setIsOpen(true);
+      };
+  
+      const handleClose = () => {
+        setIsOpen(false);
+      };
+
+      return (
+        <BottomTabs
+          type={BottomResTypeEnum.TempState}
+          tabsConfig={[
+            {
+              key: "general",
+              title: trans("query.generalTab"),
+              children: children.value.propertyView({
+                label: trans("temporaryState.value"),
+                tooltip: trans("temporaryState.valueTooltip"),
+                placement: "bottom",
+                extraChildren: QueryTutorials.tempState && (
+                  <><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
+                    {trans("temporaryState.docLink")}
+                  </DocLink><br/><br/>
+
+                  <SupaDemoDisplay
+                    url={trans("supademos.temporarystate")}
+                    modalWidth="80%"
+                    modalTop="20px"
+                  />
+                  
+                  </>
+                ),
+              }),
+            },
+          ]}
+          tabTitle={children.name.getView()}
+          status=""
+        />
+      );
+    };
+
+    return <PropertyViewWithModal />;
   })
   .build();
 
diff --git a/client/packages/lowcoder/src/comps/comps/transformerListComp.tsx b/client/packages/lowcoder/src/comps/comps/transformerListComp.tsx
index c409edd75..0bed05a86 100644
--- a/client/packages/lowcoder/src/comps/comps/transformerListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transformerListComp.tsx
@@ -13,6 +13,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const TransformerItemCompBase = new MultiCompBuilder(
   {
@@ -44,7 +45,15 @@ const TransformerItemCompBase = new MultiCompBuilder(
                         <><br/><TacoMarkDown>{trans("transformer.documentationText")}</TacoMarkDown>
                         <DocLink style={{ marginTop: 8 }} href={QueryTutorials.transformer} title={trans("transformer.documentationText")}>
                           {trans("transformer.docLink")}
-                        </DocLink></>
+                        </DocLink><br/><br/>
+
+                        <SupaDemoDisplay
+                          url={trans("supademos.transformer")}
+                          modalWidth="80%"
+                          modalTop="20px"
+                        />
+
+                        </>
                       )}
                     </div>
                   ),
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index b48b8714e..d71a28470 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -31,6 +31,7 @@ import { QueryComp } from "../queryComp";
 import { ResourceDropdown } from "../resourceDropdown";
 import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery";
 import { StreamQuery } from "../httpQuery/streamQuery";
+import SupaDemoDisplay from "../../utils/supademoDisplay";
 
 export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp> }) {
   const { comp } = props;
@@ -362,6 +363,72 @@ export const QueryGeneralPropertyView = (props: {
             </QueryConfigLabel>
             {children.onEvent.getPropertyView()}
           </QueryConfigWrapper>
+
+          <br/>    
+          
+          {["postgres", "mysql", "mssql", "oracle", "mariadb"].includes(datasourceType) && (
+            <SupaDemoDisplay
+              url={trans("supademos.dataquery2table")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "restApi" && (
+            <SupaDemoDisplay
+              url={trans("supademos.restApiQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {/* {datasourceType === "js" && (
+            <SupaDemoDisplay
+              url={trans("supademos.jsQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "streamApi" && (
+            <SupaDemoDisplay
+            url={trans("supademos.streamApiQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "mongodb" && (
+            <SupaDemoDisplay
+              url={trans("supademos.mongodbQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "libraryQuery" && (
+            <SupaDemoDisplay
+              url={trans("supademos.libraryQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "googleSheets" && (
+            <SupaDemoDisplay
+              url={trans("supademos.googleSheets")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "graphql" && (
+            <SupaDemoDisplay
+              url={trans("supademos.graphqlQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "snowflake" && (
+            <SupaDemoDisplay
+              url={trans("supademos.snowflakeQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )} */}
         </QuerySectionWrapper>
       )}
     </QueryPropertyViewWrapper>
diff --git a/client/packages/lowcoder/src/comps/queries/sqlQuery/SQLQuery.tsx b/client/packages/lowcoder/src/comps/queries/sqlQuery/SQLQuery.tsx
index cb1234009..61919e30e 100644
--- a/client/packages/lowcoder/src/comps/queries/sqlQuery/SQLQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/sqlQuery/SQLQuery.tsx
@@ -22,6 +22,7 @@ import { trans } from "i18n";
 import { ColumnNameDropdown } from "./columnNameDropdown";
 import React, { useContext } from "react";
 import { QueryContext } from "util/context/QueryContext";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const AllowMultiModifyComp = withPropertyViewFn(BoolPureControl, (comp) =>
   comp.propertyView({
@@ -140,6 +141,7 @@ const CommandMap = {
           label={trans("sqlQuery.primaryKeyColumn")}
         />
         {children.records.getPropertyView()}
+
       </>
     ))
     .build(),
@@ -176,7 +178,7 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
       {children.mode.getView() === "SQL" ? (
         children.sql.propertyView({
           placement: "bottom",
-          placeholder: "SELECT * FROM users;",
+          placeholder: "SELECT * FROM users WHERE user_id = {{userId}}::uuid", 
           styleName: "medium",
           language: "sql",
           enableMetaCompletion: true,
@@ -212,10 +214,12 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
               });
             }}
           />
+          
           {children.command.getPropertyView()}
         </>
       )}
     </>
+
   );
 };
 
diff --git a/client/packages/lowcoder/src/comps/utils/supademoDisplay.tsx b/client/packages/lowcoder/src/comps/utils/supademoDisplay.tsx
new file mode 100644
index 000000000..1c1afb4d4
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/utils/supademoDisplay.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Modal, Button, Tooltip } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { trans } from 'i18n'; // Adjust this import according to your project's structure
+
+interface SupaDemoDisplayProps {
+  url: string;
+  modalWidth?: string;
+  modalTop?: string;
+  showText?: boolean;
+}
+
+const SupaDemoDisplay = ({ url, modalWidth = '75%', modalTop = '6%', showText = true }: SupaDemoDisplayProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Tooltip title={trans("editorTutorials.interactiveDemoToolTip")}>
+        <Button type="primary" shape="circle" icon={<InfoCircleOutlined />} style={{ paddingTop: "5px" }} onClick={handleOpen} />
+        { showText && <span style={{ marginLeft: 8 }} onClick={handleOpen}>{trans("editorTutorials.interactiveDemo")}</span> }
+      </Tooltip>
+      <Modal
+        title={trans("editorTutorials.interactiveDemo")}
+        open={isOpen}
+        onCancel={handleClose}
+        width={modalWidth}
+        style={{ top: modalTop }}
+        okButtonProps={{ style: { display: 'none' } }}
+        cancelButtonProps={{ style: { display: 'none' } }}
+        bodyStyle={{ padding: 0 }}
+      >
+        <div style={{ position: 'relative', boxSizing: 'content-box', maxHeight: '80vh', width: '100%', aspectRatio: '1.7712177121771218', padding: '40px 0' }}>
+          <iframe
+            src={url}
+            loading="lazy"
+            title="Temporary State Usage"
+            allow="clipboard-write"
+            frameBorder="0"
+            allowFullScreen
+            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+          ></iframe>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default SupaDemoDisplay;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index ffccf2aca..7b6da7f8e 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -759,7 +759,7 @@ export const en = {
     "filterRule": "Filter Rule",
     "updateList": "Update List",
     "updateListTooltip": "Values updated as they exist can be overridden by the same insertion list values",
-    "sqlMode": "SQL Mode",
+    "sqlMode": "SQL Mode", 
     "guiMode": "GUI Mode",
     "operation": "Operation",
     "insert": "Insert",
@@ -858,7 +858,7 @@ export const en = {
     "dashboards": "Dashboards & Reporting",
     "layout": "Layout & Navigation",
     "forms": "Data Collection & Forms",
-    "collaboration": "Meeting & Collaboration",
+    "collaboration": "Meeting & Collaboration", 
     "projectmanagement": "Project Management",
     "scheduling": "Calendar & Scheduling",
     "documents": "Document & File Management",
@@ -2438,7 +2438,7 @@ export const en = {
   },
   "temporaryState": {
     "value": "Init Value",
-    "valueTooltip": "The Initial Value Stored in the Temporary State Can Be Any Valid JSON Value.",
+    "valueTooltip": "The Initial Value Stored in the Temporary State Can Be a boolean, string, number or Any Valid JSON Value.",
     "docLink": "Read More About Temporary States...",
     "pathTypeError": "Path Must Be Either a String or an Array of Values",
     "unStructuredError": "Unstructured Data {prev} Can't Be Updated by {path}",
@@ -2943,7 +2943,23 @@ export const en = {
     "canvasContent": "Build your apps on the Canvas with a 'What You See Is What You Get' approach. Simply drag and drop components to design your layout, and use keyboard shortcuts for quick editing like delete, copy, and paste. Once a component is selected, you can fine-tune every detail—from styling and layout to data binding and logical behavior. Plus, enjoy the added benefit of responsive design, ensuring your apps look great on any device.",
     "queryData": "Query Data",
     "queryDataContent": "You can create Data Queries Here and Connect to Your MySQL, MongoDB, Redis, Airtable, and many Other Data Sources. After Configuring the Query, Click 'Run' to Obtain the Data and continue the Tutorial.",
-    "compProperties": "Component Properties"
+    "compProperties": "Component Properties",
+    "interactiveDemo": "Interactive Demo",
+    "interactiveDemoToolTip": "Click to Start an Interactive Demo of this Feature",
+  },
+  "supademos": {
+    "transformer" : "https://app.supademo.com/embed/clyohuj2r0sluy805bs0e8mru?embed_v=2",
+    "dataresponder" : "https://app.supademo.com/embed/clypwukfr19ury805vzrt2otg?embed_v=2",
+    "temporarystate" : "https://app.supademo.com/embed/clyikd4yd03wbphh054on5hh2?embed_v=2",
+    "dataquery2table" : "https://app.supademo.com/embed/clxri6p3d4ctht2oemjdxz12f?embed_v=2",
+    "restApiQuery": "https://app.supademo.com/embed/clxu32uj50d3012o2mnh4ulpw?embed_v=2",
+    "jsQuery": "",
+    "streamApiQuery": "",
+    "mongodbQuery": "",
+    "libraryQuery": "",
+    "googleSheets": "",
+    "graphqlQuery": "",
+    "snowflakeQuery": "",
   },
   "homeTutorials": {
     "createAppContent": "Welcome! Click 'App' and Start to Create Your First Application.",