diff --git a/etc/plugin-config-ui-lib.api.md b/etc/plugin-config-ui-lib.api.md
index fe6250de..00d07c7b 100644
--- a/etc/plugin-config-ui-lib.api.md
+++ b/etc/plugin-config-ui-lib.api.md
@@ -9,14 +9,17 @@ import { BoxProps } from '@mui/material/Box';
 import { ButtonProps } from '@mui/material/Button';
 import { ChangeEventHandler } from 'react';
 import { Controller } from 'react-hook-form';
+import { EditorProps } from '@monaco-editor/react';
 import { FormMessagePayload } from '@cloudquery/plugin-config-ui-connector';
 import { FormProvider } from 'react-hook-form';
 import { ForwardRefExoticComponent } from 'react';
 import { ImgHTMLAttributes } from 'react';
+import { JSONSchema } from 'monaco-yaml';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LinkProps as LinkProps_2 } from '@mui/material/Link';
 import { ListItemProps } from '@mui/material/ListItem';
 import { ListProps } from '@mui/material/List';
+import type * as Monaco from 'monaco-editor';
 import { PluginUiMessageHandler } from '@cloudquery/plugin-config-ui-connector';
 import { PluginUiMessagePayload } from '@cloudquery/plugin-config-ui-connector';
 import { default as React_2 } from 'react';
diff --git a/package-lock.json b/package-lock.json
index dee3d747..cce2c4ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cloudquery/plugin-config-ui-lib",
-      "version": "6.0.2",
+      "version": "7.0.0",
       "license": "MPL-2.0",
       "dependencies": {
         "@babel/runtime": "^7.26.7",
@@ -21,7 +21,7 @@
         "react-virtuoso": "^4.12.5"
       },
       "bin": {
-        "create-app": "dist/scripts/generate-cloud-config-ui.mjs"
+        "create-app": "dist/scripts/generate-cloud-config-ui.js"
       },
       "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -35,6 +35,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.4",
         "@microsoft/api-extractor": "^7.49.2",
+        "@monaco-editor/react": "^4.7.0",
         "@mui/icons-material": "^6.0.0",
         "@mui/lab": "^6.0.0-beta.9",
         "@mui/material": "^6.0.0",
@@ -74,6 +75,8 @@
         "eslint-plugin-unicorn": "^56.0.1",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "monaco-editor": "^0.52.2",
+        "monaco-yaml": "^5.3.1",
         "prettier": "^3.4.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -86,6 +89,7 @@
         "source-map-explorer": "^2.5.3",
         "storybook": "^8.5.3",
         "typescript": "^5.7.3",
+        "vite-plugin-monaco-editor": "^1.1.0",
         "yup": "^1.6.1"
       },
       "peerDependencies": {
@@ -93,12 +97,15 @@
         "@emotion/cache": "^11.11.4",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.4",
+        "@monaco-editor/react": "^4.7.0",
         "@mui/icons-material": "^6.0.0",
         "@mui/lab": "^6.0.0-beta.9",
         "@mui/material": "^6.0.0",
         "@mui/system": "^6.0.0",
         "@mui/x-date-pickers": "^7.6.2",
         "@playwright/test": "^1.47.2",
+        "monaco-editor": "^0.52.2",
+        "monaco-yaml": "^5.3.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "yup": "^1.4.0"
@@ -181,6 +188,16 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.26.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
@@ -228,6 +245,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-create-class-features-plugin": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
@@ -250,6 +277,16 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz",
@@ -268,6 +305,16 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-define-polyfill-provider": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
@@ -1904,6 +1951,16 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/preset-flow": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.25.9.tgz",
@@ -3954,6 +4011,31 @@
         "resolve": "~1.22.2"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.69",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.69.tgz",
@@ -5336,19 +5418,6 @@
         }
       }
     },
-    "node_modules/@storybook/core/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@storybook/csf": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz",
@@ -6235,19 +6304,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@typescript-eslint/utils": {
       "version": "8.23.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.23.0.tgz",
@@ -6935,6 +6991,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/babel-plugin-istanbul/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/babel-plugin-jest-hoist": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
@@ -6982,6 +7048,16 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs3": {
       "version": "0.10.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
@@ -8637,6 +8713,16 @@
         "node": "*"
       }
     },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-import/node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -8834,6 +8920,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-sort-destructure-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-sort-destructure-keys/-/eslint-plugin-sort-destructure-keys-2.0.0.tgz",
@@ -8915,19 +9011,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-unicorn/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -10297,19 +10380,6 @@
         "semver": "^7.6.3"
       }
     },
-    "node_modules/is-bun-module/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -10763,19 +10833,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -11715,19 +11772,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/jest-snapshot/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -12020,6 +12064,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -12222,19 +12273,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -12404,6 +12442,90 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/monaco-languageserver-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.4.0.tgz",
+      "integrity": "sha512-QQ3BZiU5LYkJElGncSNb5AKoJ/LCs6YBMCJMAz9EA7v+JaOdn3kx2cXpPTcZfKA5AEsR0vc97sAw+5mdNhVBmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "monaco-types": "^0.1.0",
+        "vscode-languageserver-protocol": "^3.0.0",
+        "vscode-uri": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-marker-data-provider": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.4.tgz",
+      "integrity": "sha512-4DsPgsAqpTyUDs3humXRBPUJoihTv+L6v9aupQWD80X2YXaCXUd11mWYeSCYHuPgdUmjFaNWCEOjQ6ewf/QA1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "monaco-types": "^0.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz",
+      "integrity": "sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-worker-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz",
+      "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">=0.30.0"
+      }
+    },
+    "node_modules/monaco-yaml": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.3.1.tgz",
+      "integrity": "sha512-1MN8i1Tnc8d8RugQGqv5jp+Ce2xtNhrnbm0ZZbe5ceExj9C2PkKZfHJhY9kbdUS4G7xSVwKlVdMTmLlStepOtw==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "dependencies": {
+        "jsonc-parser": "^3.0.0",
+        "monaco-languageserver-types": "^0.4.0",
+        "monaco-marker-data-provider": "^1.0.0",
+        "monaco-types": "^0.1.0",
+        "monaco-worker-manager": "^2.0.0",
+        "path-browserify": "^1.0.0",
+        "prettier": "^3.0.0",
+        "vscode-languageserver-textdocument": "^1.0.0",
+        "vscode-languageserver-types": "^3.0.0",
+        "vscode-uri": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.36"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -12830,6 +12952,13 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -13589,9 +13718,9 @@
       }
     },
     "node_modules/recast": {
-      "version": "0.23.9",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
-      "integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==",
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14229,13 +14358,16 @@
       }
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/serialize-javascript": {
@@ -14664,6 +14796,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/storybook": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.5.3.tgz",
@@ -15744,6 +15883,58 @@
         }
       }
     },
+    "node_modules/vite-plugin-monaco-editor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
+      "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">=0.33.0"
+      }
+    },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -16102,8 +16293,6 @@
       "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
       "dev": true,
       "license": "ISC",
-      "optional": true,
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/package.json b/package.json
index d356cb2a..283f8e6c 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
   "description": "Plugin configuration UI library for CloudQuery Cloud App",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "create-app": "./dist/scripts/generate-cloud-config-ui.mjs"
+    "create-app": "./dist/scripts/generate-cloud-config-ui.js"
   },
   "exports": {
     ".": {
@@ -26,8 +26,10 @@
       "require": "./dist/e2e-utils/index.cjs.js"
     },
     "./scripts/*": {
-      "require": "./dist/scripts/*"
+      "import": "./dist/scripts/*"
     },
+    "./configs/tsconfig.app.json": "./dist/configs/tsconfig.app.json",
+    "./configs/vite.config.app.js": "./dist/configs/vite.config.app.js",
     "./.eslintrc.js": "./.eslintrc.js",
     "./.prettierrc.js": "./.prettierrc.js"
   },
@@ -92,12 +94,15 @@
     "@emotion/cache": "^11.11.4",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.4",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/lab": "^6.0.0-beta.9",
     "@mui/material": "^6.0.0",
     "@mui/system": "^6.0.0",
     "@mui/x-date-pickers": "^7.6.2",
     "@playwright/test": "^1.47.2",
+    "monaco-editor": "^0.52.2",
+    "monaco-yaml": "^5.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "yup": "^1.4.0"
@@ -114,6 +119,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.4",
     "@microsoft/api-extractor": "^7.49.2",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/lab": "^6.0.0-beta.9",
     "@mui/material": "^6.0.0",
@@ -153,6 +159,8 @@
     "eslint-plugin-unicorn": "^56.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "monaco-editor": "^0.52.2",
+    "monaco-yaml": "^5.3.1",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -165,6 +173,7 @@
     "source-map-explorer": "^2.5.3",
     "storybook": "^8.5.3",
     "typescript": "^5.7.3",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "yup": "^1.6.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 23c6433e..59ad2c1b 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -39,6 +39,13 @@ export default [
           comments: /webpackIgnore:/,
         },
       }),
+      copy({
+        targets: [
+          { src: 'src/scripts', dest: 'dist' },
+          { src: 'src/template', dest: 'dist' },
+          { src: 'src/configs', dest: 'dist' },
+        ]
+      })
     ],
   },
   {
@@ -77,12 +84,6 @@ export default [
           comments: /webpackIgnore:/,
         },
       }),
-      copy({
-        targets: [
-          { src: 'src/scripts', dest: 'dist' },
-          { src: 'src/template', dest: 'dist' }
-        ]
-      })
     ],
   },
   {
diff --git a/src/components/display/formFooter/index.tsx b/src/components/display/formFooter/index.tsx
index 17c37a56..30508acc 100644
--- a/src/components/display/formFooter/index.tsx
+++ b/src/components/display/formFooter/index.tsx
@@ -1,5 +1,4 @@
 import { PluginUiMessagePayload } from '@cloudquery/plugin-config-ui-connector';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 
@@ -120,7 +119,7 @@ export function FormFooter({
           <Button disabled={isBusy} onClick={onCancel} size="medium">
             Cancel
           </Button>
-          <LoadingButton
+          <Button
             loading={isBusy}
             size="medium"
             variant="contained"
@@ -128,7 +127,7 @@ export function FormFooter({
             disabled={submitDisabled}
           >
             {submitLabel || 'Test connection and save'}
-          </LoadingButton>
+          </Button>
         </Stack>
       </Stack>
       {(isTestingConnection || testConnectionError || submitPayload) && (
diff --git a/src/components/form/configUIForm.tsx b/src/components/form/configUIForm.tsx
index b77fe037..a3dec5a4 100644
--- a/src/components/form/configUIForm.tsx
+++ b/src/components/form/configUIForm.tsx
@@ -181,18 +181,28 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
 
   const theme = useMemo(() => {
     const themeOptions = createThemeOptions();
-    if (container) {
-      themeOptions.components = {
-        ...themeOptions.components,
-        MuiMenu: {
-          ...themeOptions.components?.MuiMenu,
-          defaultProps: {
-            ...themeOptions.components?.MuiMenu?.defaultProps,
-            container: container as any,
+    themeOptions.components = {
+      ...themeOptions.components,
+      MuiMenu: {
+        ...themeOptions.components?.MuiMenu,
+        defaultProps: {
+          ...themeOptions.components?.MuiMenu?.defaultProps,
+          ...(container ? { container: container as any } : {}),
+        },
+      },
+      MuiInputLabel: {
+        ...themeOptions.components?.MuiInputLabel,
+        styleOverrides: {
+          ...themeOptions.components?.MuiInputLabel?.styleOverrides,
+          root: {
+            ...(typeof themeOptions.components?.MuiInputLabel?.styleOverrides?.root === 'object'
+              ? themeOptions.components?.MuiInputLabel?.styleOverrides?.root
+              : {}),
+            top: '-4px',
           },
         },
-      };
-    }
+      },
+    };
 
     return createTheme(themeOptions);
   }, [container]);
@@ -212,6 +222,8 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
               sx={{
                 flex: '1 1 0',
                 minWidth: 0,
+                position: 'relative',
+                zIndex: 2,
               }}
             >
               <form autoComplete="off" noValidate={true} onSubmit={onSubmit}>
@@ -228,7 +240,11 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
                           step === index && (
                             <Sections key={index}>
                               {children.map((section, index) => (
-                                <ComponentsRenderer section={section} key={index} />
+                                <ComponentsRenderer
+                                  section={section}
+                                  key={index}
+                                  container={container}
+                                />
                               ))}
                             </Sections>
                           )
@@ -260,7 +276,14 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
                 </Stack>
               </form>
             </Box>
-            <Box sx={{ width: { xs: 360, xl: 500 }, minWidth: 360, position: 'sticky', top: 10 }}>
+            <Box
+              sx={{
+                width: { xs: 360, lg: 500, xl: '40%' },
+                minWidth: 360,
+                position: 'sticky',
+                top: 10,
+              }}
+            >
               <GuideComponent />
             </Box>
           </Stack>
diff --git a/src/components/form/controls/controlCodeField.tsx b/src/components/form/controls/controlCodeField.tsx
new file mode 100644
index 00000000..1d5a9913
--- /dev/null
+++ b/src/components/form/controls/controlCodeField.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import React, { forwardRef, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Editor, EditorProps, loader, OnMount } from '@monaco-editor/react';
+import { Box, CircularProgress, FormControl, FormHelperText, FormLabel } from '@mui/material';
+import Stack from '@mui/material/Stack';
+
+import * as monaco from 'monaco-editor';
+import { configureMonacoYaml, JSONSchema } from 'monaco-yaml';
+import { Controller } from 'react-hook-form';
+
+import type * as Monaco from 'monaco-editor';
+
+type MonacoType = typeof Monaco;
+type MonacoEditor = Monaco.editor.IStandaloneCodeEditor;
+
+export interface ControlCodeFieldProps extends Omit<EditorProps, 'value' | 'onChange' | 'onMount'> {
+  name: string;
+  label?: string;
+  helperText?: ReactNode;
+  editorRef?: React.MutableRefObject<MonacoEditor | null>;
+  onMount?: (editor: MonacoEditor, monaco: MonacoType) => Promise<void> | void;
+  yamlSchema?: JSONSchema;
+  container?: HTMLElement | ShadowRoot;
+}
+
+export const ControlCodeField = forwardRef<MonacoEditor, ControlCodeFieldProps>(
+  ({ onMount, options = {}, yamlSchema, container, name, label, helperText, ...props }, ref) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [initialized, setInitialized] = useState(false);
+    const disposeRef = useRef<() => void>();
+
+    useEffect(() => {
+      loader.config({ monaco });
+
+      setInitialized(true);
+    }, []);
+
+    const handleEditorMount: OnMount = useCallback(
+      async (editor, monaco) => {
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(editor);
+          } else {
+            ref.current = editor;
+          }
+        }
+
+        monaco.editor.defineTheme('custom-theme', {
+          base: 'vs-dark',
+          colors: {
+            'editor.background': '#15202E',
+            'editor.foreground': '#FFFFFF',
+          },
+          inherit: true,
+          rules: [],
+        });
+        monaco.editor.setTheme('custom-theme');
+
+        if (props.language === 'yaml' && yamlSchema) {
+          const { dispose } = configureMonacoYaml(monaco, {
+            schemas: [
+              {
+                fileMatch: ['*'],
+                schema: yamlSchema,
+                uri: 'inmemory://my-schema.json',
+              },
+            ],
+            validate: false,
+          });
+          disposeRef.current = dispose;
+        }
+
+        if (onMount) {
+          await onMount(editor, monaco);
+        }
+
+        setIsLoading(false);
+      },
+      [onMount, props.language, yamlSchema, ref],
+    );
+
+    useEffect(() => {
+      return () => {
+        disposeRef.current?.();
+      };
+    }, []);
+
+    const Loader = () => (
+      <Stack width="100%" alignItems="center" justifyContent="center" padding={2}>
+        <CircularProgress />
+      </Stack>
+    );
+
+    if (!initialized) {
+      return <Loader />;
+    }
+
+    return (
+      <FormControl
+        sx={{
+          height: '300px',
+          minHeight: 0,
+          border: '1px solid',
+          borderColor: 'neutral.300',
+          borderRadius: 1,
+          paddingY: 1,
+          paddingX: 1.5,
+          bgcolor: '#15202E',
+        }}
+      >
+        {!!label && <FormLabel sx={{ mb: 1 }}>{label}</FormLabel>}
+        <Controller
+          name={name}
+          render={({ field, fieldState }) => (
+            <>
+              {!!helperText && (
+                <FormHelperText sx={{ mb: 1.5 }}>
+                  {!!fieldState.error?.message && (
+                    <Box color="error.main">{fieldState.error?.message}</Box>
+                  )}
+                  {helperText}
+                </FormHelperText>
+              )}
+              <Stack
+                height="100%"
+                minHeight={0}
+                sx={{
+                  position: 'relative',
+                  visibility: isLoading ? 'hidden' : 'visible',
+                }}
+              >
+                {isLoading && <Loader />}
+                <Editor
+                  {...props}
+                  loading={<Loader />}
+                  onChange={(value) => field.onChange(value ?? '')}
+                  onMount={handleEditorMount}
+                  options={{
+                    automaticLayout: true,
+                    minimap: {
+                      enabled: false,
+                    },
+                    quickSuggestions: true,
+                    suggestOnTriggerCharacters: true,
+                    lineNumbers: 'off',
+                    folding: false,
+                    lineDecorationsWidth: 0,
+                    lineNumbersMinChars: 0,
+                    glyphMargin: false,
+                    scrollbar: {
+                      alwaysConsumeMouseWheel: false,
+                    },
+                    overflowWidgetsDomNode: container as HTMLElement,
+                    ...options,
+                  }}
+                  value={field.value}
+                />
+              </Stack>
+            </>
+          )}
+        />
+      </FormControl>
+    );
+  },
+);
+
+ControlCodeField.displayName = 'ControlCodeField';
diff --git a/src/components/form/controls/controlDateField.tsx b/src/components/form/controls/controlDateField.tsx
index cb874e09..ec68b5c8 100644
--- a/src/components/form/controls/controlDateField.tsx
+++ b/src/components/form/controls/controlDateField.tsx
@@ -40,6 +40,7 @@ export function ControlDateField({
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <DateField
             disableFuture={true}
+            size="small"
             disabled={disabled}
             clearable={clearable}
             label={label}
diff --git a/src/components/form/controls/controlDateTimeField.tsx b/src/components/form/controls/controlDateTimeField.tsx
index 7c7bb94b..e67c793b 100644
--- a/src/components/form/controls/controlDateTimeField.tsx
+++ b/src/components/form/controls/controlDateTimeField.tsx
@@ -43,6 +43,7 @@ export function ControlDateTimeField({
             disableFuture={true}
             disabled={disabled}
             clearable={clearable}
+            size="small"
             label={label}
             slotProps={{
               textField: {
diff --git a/src/components/form/controls/controlNumberField.tsx b/src/components/form/controls/controlNumberField.tsx
index 13c91dbd..6f5d5e6a 100644
--- a/src/components/form/controls/controlNumberField.tsx
+++ b/src/components/form/controls/controlNumberField.tsx
@@ -33,6 +33,7 @@ export function ControlNumberField({
         <TextField
           error={!!fieldState.error}
           fullWidth={true}
+          size="small"
           helperText={getFieldHelperText(fieldState.error?.message, helperText)}
           label={label}
           {...field}
@@ -41,11 +42,11 @@ export function ControlNumberField({
           onWheel={(e) => e.target instanceof HTMLElement && e.target.blur()}
           sx={{
             'input::-webkit-inner-spin-button': {
-              '-webkit-appearance': 'none',
+              WebkitAppearance: 'none',
               margin: 0,
             },
             input: {
-              '-moz-appearance': 'textfield',
+              MozAppearance: 'textfield',
             },
           }}
         />
diff --git a/src/components/form/controls/controlOAuthField.tsx b/src/components/form/controls/controlOAuthField.tsx
index f23cf3e2..312cb6a8 100644
--- a/src/components/form/controls/controlOAuthField.tsx
+++ b/src/components/form/controls/controlOAuthField.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import CheckIcon from '@mui/icons-material/Check';
-import LoadingButton from '@mui/lab/LoadingButton';
 
 import Button from '@mui/material/Button';
 
@@ -95,7 +94,7 @@ export function ControlOAuthField({
           alignItems: 'center',
         }}
       >
-        <LoadingButton
+        <Button
           size="large"
           variant="contained"
           onClick={handleAuthenticate}
@@ -107,7 +106,7 @@ export function ControlOAuthField({
           {connectorIdValue && !isLoading
             ? `${config.label} connected successfully`
             : 'Authenticate'}
-        </LoadingButton>
+        </Button>
         {isLoading && (
           <Button color="inherit" onClick={cancelAuthentication}>
             Cancel authentication
diff --git a/src/components/form/controls/controlSecretField.tsx b/src/components/form/controls/controlSecretField.tsx
index f7065c58..c26f323b 100644
--- a/src/components/form/controls/controlSecretField.tsx
+++ b/src/components/form/controls/controlSecretField.tsx
@@ -39,6 +39,7 @@ export function ControlSecretField({
           label={label}
           defaultValues={formState.defaultValues}
           setValue={setValue}
+          size="small"
           getValues={getValues}
           helperText={getFieldHelperText(fieldState.error?.message, helperText)}
           error={!!fieldState.error}
diff --git a/src/components/form/controls/controlSelectField.tsx b/src/components/form/controls/controlSelectField.tsx
index 045a132b..f63120d8 100644
--- a/src/components/form/controls/controlSelectField.tsx
+++ b/src/components/form/controls/controlSelectField.tsx
@@ -42,6 +42,7 @@ export function ControlSelectField({
           helperText={getFieldHelperText(fieldState.error?.message, helperText)}
           label={label}
           select={true}
+          size="small"
           {...field}
           slotProps={{
             select: {
diff --git a/src/components/form/controls/controlTextField.tsx b/src/components/form/controls/controlTextField.tsx
index 9e61c834..733931af 100644
--- a/src/components/form/controls/controlTextField.tsx
+++ b/src/components/form/controls/controlTextField.tsx
@@ -52,6 +52,7 @@ export function ControlTextField({
           fullWidth={true}
           helperText={getFieldHelperText(fieldState.error?.message, helperText)}
           label={label}
+          size="small"
           {...field}
           {...textFieldProps}
         />
diff --git a/src/components/form/renderer/index.tsx b/src/components/form/renderer/index.tsx
index 9b5edf86..7b0e7f64 100644
--- a/src/components/form/renderer/index.tsx
+++ b/src/components/form/renderer/index.tsx
@@ -5,6 +5,7 @@ import Skeleton from '@mui/material/Skeleton';
 import {
   IterableStepComponent,
   LayoutBooleanField,
+  LayoutCodeField,
   LayoutCollapsibleSection,
   LayoutCollapsibleSubSection,
   LayoutComponent,
@@ -88,37 +89,48 @@ const ControlDateField = React.lazy(() =>
     default: module.ControlDateField,
   })),
 );
+const ControlCodeField = React.lazy(() =>
+  import('../controls/controlCodeField').then((module) => ({
+    default: module.ControlCodeField,
+  })),
+);
 
 export function ComponentsRenderer({
   section,
   parentKey,
+  container,
 }: {
   section:
     | (IterableStepComponent | ReactNode | React.FC<any>)
     | (IterableStepComponent | ReactNode | React.FC<any>)[];
   parentKey?: string;
+  container?: HTMLElement | ShadowRoot;
 }): ReactNode[] | ReactNode {
   return Array.isArray(section) ? (
     <>
       {section.map((component: any, index: number) => {
         const key = parentKey ? `${parentKey}-${index}` : `${index}`;
 
-        return <ComponentsRenderer key={key} section={component} parentKey={key} />;
+        return (
+          <ComponentsRenderer key={key} section={component} container={container} parentKey={key} />
+        );
       })}
     </>
   ) : (
     <ConditionalRenderingWrapper shouldRender={(section as RenderSection).shouldRender}>
-      <ComponentRenderer component={section} />
+      <ComponentRenderer component={section} container={container} />
     </ConditionalRenderingWrapper>
   );
 }
 
 function ComponentRenderer({
   component,
+  container,
 }: {
   component:
     | (IterableStepComponent | ReactNode | React.FC<any>)
     | (IterableStepComponent | ReactNode | React.FC<any>)[];
+  container?: HTMLElement | ShadowRoot;
 }): ReactNode[] | ReactNode {
   if (typeof (component as IterableStepComponent)?.component === 'string') {
     switch ((component as IterableStepComponent).component) {
@@ -145,7 +157,7 @@ function ComponentRenderer({
         const { children, ...props } = component as LayoutSubSection;
 
         return (
-          <SubSection {...props}>
+          <SubSection {...props} isSubSection={true}>
             <ComponentsRenderer section={children} />
           </SubSection>
         );
@@ -244,6 +256,13 @@ function ComponentRenderer({
           </Suspense>
         );
       }
+      case 'control-code-field': {
+        return (
+          <Suspense fallback={<Skeleton variant="rounded" width="100%" height={50} />}>
+            <ControlCodeField {...(component as LayoutCodeField)} container={container} />
+          </Suspense>
+        );
+      }
       default: {
         throw new Error(
           `${(component as LayoutComponent).component} does not exist in the Renderer.`,
diff --git a/src/components/form/renderer/types.ts b/src/components/form/renderer/types.ts
index f16be26e..762460f6 100644
--- a/src/components/form/renderer/types.ts
+++ b/src/components/form/renderer/types.ts
@@ -5,6 +5,7 @@ import * as yup from 'yup';
 import { type ConditionalRenderingProps } from '../../controls/conditionalRenderingWrapper';
 
 import { type ControlBooleanFieldProps } from '../controls/controlBooleanField';
+import { type ControlCodeFieldProps } from '../controls/controlCodeField';
 import { type ControlDateFieldProps } from '../controls/controlDateField';
 import { type ControlDateTimeFieldProps } from '../controls/controlDateTimeField';
 import { type ControlExclusiveToggleFieldProps } from '../controls/controlExclusiveToggleField';
@@ -51,7 +52,8 @@ export type LayoutComponent =
   | LayoutSelectField
   | LayoutMultiSelectField
   | LayoutExclusiveToggle
-  | LayoutServicesSelector;
+  | LayoutServicesSelector
+  | LayoutCodeField;
 
 export type ReservedLayoutComponent = LayoutTableSelector | LayoutOAuth;
 
@@ -97,6 +99,10 @@ export interface LayoutExclusiveToggle extends ComponentAbstract, ControlExclusi
   component: 'control-exclusive-toggle';
 }
 
+export interface LayoutCodeField extends ComponentAbstract, ControlCodeFieldProps {
+  component: 'control-code-field';
+}
+
 export interface LayoutServicesSelector
   extends ComponentAbstract,
     ControlServicesSelectorFieldProps {
diff --git a/src/components/form/sections/subSection.tsx b/src/components/form/sections/subSection.tsx
index 328c5e11..8e2a05de 100644
--- a/src/components/form/sections/subSection.tsx
+++ b/src/components/form/sections/subSection.tsx
@@ -10,12 +10,13 @@ export interface SubSectionProps {
   children: React.ReactNode;
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
+  isSubSection?: boolean;
 }
 
 /**
  * @public
  */
-export function SubSection({ children, title, subtitle }: SubSectionProps) {
+export function SubSection({ children, title, subtitle, isSubSection }: SubSectionProps) {
   return (
     <Stack
       sx={{
@@ -28,7 +29,7 @@ export function SubSection({ children, title, subtitle }: SubSectionProps) {
             gap: 1,
           }}
         >
-          {title && <Typography variant="h6">{title}</Typography>}
+          {title && <Typography variant={isSubSection ? 'h6' : 'h5'}>{title}</Typography>}
           {subtitle && (
             <Typography variant="body2" color="textSecondary">
               {subtitle}
diff --git a/src/components/inputs/formFieldReset.tsx b/src/components/inputs/formFieldReset.tsx
index b93db3eb..fb95165f 100644
--- a/src/components/inputs/formFieldReset.tsx
+++ b/src/components/inputs/formFieldReset.tsx
@@ -43,14 +43,14 @@ export function FormFieldReset({
 
   if (isResetted) {
     return (
-      <Button onClick={onCancel} sx={{ width: 80, ...sx }} variant="outlined">
+      <Button size="small" onClick={onCancel} sx={{ width: 80, ...sx }} variant="outlined">
         Cancel
       </Button>
     );
   }
 
   return (
-    <Button onClick={handleReset} sx={{ width: 80, ...sx }} variant="outlined">
+    <Button size="small" onClick={handleReset} sx={{ width: 80, ...sx }} variant="outlined">
       Reset
     </Button>
   );
diff --git a/src/components/inputs/multiAutocomplete.tsx b/src/components/inputs/multiAutocomplete.tsx
index d010c39d..78d510b2 100644
--- a/src/components/inputs/multiAutocomplete.tsx
+++ b/src/components/inputs/multiAutocomplete.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Autocomplete from '@mui/material/Autocomplete';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import TextField from '@mui/material/TextField';
 
 import { getFieldHelperText } from '../../utils/getFieldHelperText';
@@ -73,6 +74,12 @@ export const MultiAutocomplete = React.forwardRef<HTMLDivElement, MultiAutocompl
           <TextField
             {...params}
             {...fieldProps}
+            sx={{
+              [`& .${inputBaseClasses.root}`]: {
+                minHeight: '52px',
+              },
+            }}
+            size="small"
             error={!!error}
             fullWidth={true}
             helperText={helperText}
diff --git a/src/components/inputs/secretInput/index.tsx b/src/components/inputs/secretInput/index.tsx
index 84348062..011319fb 100644
--- a/src/components/inputs/secretInput/index.tsx
+++ b/src/components/inputs/secretInput/index.tsx
@@ -92,6 +92,7 @@ export const SecretInput = React.forwardRef<HTMLDivElement, SecretInputProps>(
           {...textFieldProps}
           ref={ref}
           name={name}
+          size="small"
         />
         {isSecret && (
           <FormFieldReset
@@ -99,7 +100,7 @@ export const SecretInput = React.forwardRef<HTMLDivElement, SecretInputProps>(
             inputSelectorToFocus={`input[name="${name}"]`}
             onCancel={() => handelCancelReset()}
             onReset={() => handleReset()}
-            sx={{ minHeight: 55 }}
+            sx={{ minHeight: 48 }}
           />
         )}
       </Stack>
diff --git a/src/components/inputs/tableSelector/filters.tsx b/src/components/inputs/tableSelector/filters.tsx
index ee1bf6b4..af24543e 100644
--- a/src/components/inputs/tableSelector/filters.tsx
+++ b/src/components/inputs/tableSelector/filters.tsx
@@ -40,6 +40,7 @@ export function TableSelectorFilters({
         placeholder="Search tables"
         value={searchValue}
         disabled={disabled}
+        size="small"
       />
       <Box>
         <Button
diff --git a/src/template/tsconfig.json b/src/configs/tsconfig.app.json
similarity index 78%
rename from src/template/tsconfig.json
rename to src/configs/tsconfig.app.json
index 2234b275..df255ba6 100644
--- a/src/template/tsconfig.json
+++ b/src/configs/tsconfig.app.json
@@ -9,13 +9,12 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
     "types": ["node"]
-  },
-  "include": ["src", "playwright.config.ts", "e2e-tests"]
+  }
 }
diff --git a/src/configs/vite.config.app.js b/src/configs/vite.config.app.js
new file mode 100644
index 00000000..bc6451b9
--- /dev/null
+++ b/src/configs/vite.config.app.js
@@ -0,0 +1,75 @@
+import 'dotenv/config';
+
+import react from '@vitejs/plugin-react-swc';
+import { minify as htmlMinify } from 'html-minifier-terser';
+
+import monacoEditorVitePlugin from 'vite-plugin-monaco-editor';
+
+const monacoEditorPlugin = monacoEditorVitePlugin.default;
+
+const envVariables = {};
+
+for (const key of Object.keys(process.env)) {
+  if (key.startsWith('REACT_APP') && process.env[key] !== undefined) {
+    envVariables[key] = process.env[key];
+  }
+}
+
+export default {
+  base: './',
+  build: {
+    commonjsOptions: {
+      sourceMap: true,
+    },
+    outDir: 'build',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'monaco-editor': ['monaco-editor'],
+          'monaco-yaml': ['monaco-yaml'],
+        },
+      },
+    },
+    sourcemap: true,
+  },
+  define: {
+    'process.env': JSON.stringify(envVariables),
+  },
+  optimizeDeps: {
+    include: ['monaco-editor', 'monaco-yaml'],
+  },
+  plugins: [
+    react(),
+    monacoEditorPlugin({
+      customWorkers: [
+        {
+          entry: 'monaco-yaml/yaml.worker',
+          label: 'yaml',
+        },
+      ],
+      languageWorkers: ['editorWorkerService'],
+    }),
+    {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        if (process.env.NODE_ENV === 'production') {
+          return htmlMinify(html, {
+            collapseWhitespace: true,
+            minifyCSS: true,
+            minifyJS: true,
+            minifyURLs: true,
+            removeComments: true,
+            removeRedundantAttributes: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+          });
+        }
+
+        return html;
+      },
+    },
+  ],
+  server: {
+    port: 3001,
+  },
+};
diff --git a/src/scripts/gen_tables.js b/src/scripts/gen_tables.js
index 7ad35d81..3f26cf37 100644
--- a/src/scripts/gen_tables.js
+++ b/src/scripts/gen_tables.js
@@ -1,9 +1,10 @@
-const fs = require('node:fs');
-const commandExistsSync = require('command-exists').sync;
+import fs from 'fs';
+import commandExistsSync from 'command-exists';
+import { execSync } from 'child_process';
 
 const generateTables = () => {
   if (commandExistsSync('cloudquery')) {
-    require('node:child_process').execSync(
+    execSync(
       `cd ..
 dirname="$(basename $(pwd))"
 cloudquery tables --output-dir data test/config.yml
@@ -20,7 +21,7 @@ mv data/$dirname/__tables.json cloud-config-ui/src/data/__tables.json`,
   }
 };
 
-module.exports = (force = false) => {
+export default (force = false) => {
   // In production, or when forced, re-generate tables every time
   if (process.env.NODE_ENV === 'production' || force) {
     return generateTables();
diff --git a/src/scripts/generate-cloud-config-ui.mjs b/src/scripts/generate-cloud-config-ui.js
similarity index 93%
rename from src/scripts/generate-cloud-config-ui.mjs
rename to src/scripts/generate-cloud-config-ui.js
index b784d553..7b7cc598 100644
--- a/src/scripts/generate-cloud-config-ui.mjs
+++ b/src/scripts/generate-cloud-config-ui.js
@@ -194,11 +194,25 @@ async function main() {
       payload,
     );
 
+    // Copy and compile index.html
+    createAndCompileTemplate(
+      path.join(templateDir, 'index.html.hbs'),
+      path.join(outputDir, 'index.html'),
+      payload,
+    );
+
     // Copy template/public folder
     const publicSrcDir = path.join(templateDir, 'public');
     const publicDestDir = path.join(outputDir, 'public');
     fs.cpSync(publicSrcDir, publicDestDir, { recursive: true });
 
+    // Copy and compile public/manifest.json
+    createAndCompileTemplate(
+      path.join(templateDir, 'public', 'manifest.json.hbs'),
+      path.join(outputDir, 'public', 'manifest.json'),
+      payload,
+    );
+
     // Copy logo
     if (pluginLogoPath) {
       let logoSrcPath = pluginLogoPath;
@@ -250,11 +264,6 @@ async function main() {
     const indexDestPath = path.join(outputDir, 'src', 'index.tsx');
     fs.copyFileSync(indexSrcPath, indexDestPath);
 
-    // Copy src/react-app-env.d.ts
-    const reactAppEnvSrcPath = path.join(templateDir, 'src', 'react-app-env.d.ts');
-    const reactAppEnvDestPath = path.join(outputDir, 'src', 'react-app-env.d.ts');
-    fs.copyFileSync(reactAppEnvSrcPath, reactAppEnvDestPath);
-
     // Copy and compile .env
     createAndCompileTemplate(
       path.join(templateDir, '.env.example.hbs'),
@@ -263,9 +272,9 @@ async function main() {
     );
     fs.copyFileSync(path.join(outputDir, '.env.example'), path.join(outputDir, '.env'));
 
-    // Copy .eslintrc.js
-    const eslintSrcPath = path.join(templateDir, '.eslintrc.js');
-    const eslintDestPath = path.join(outputDir, '.eslintrc.js');
+    // Copy .eslintrc.cjs
+    const eslintSrcPath = path.join(templateDir, '.eslintrc.cjs');
+    const eslintDestPath = path.join(outputDir, '.eslintrc.cjs');
     fs.copyFileSync(eslintSrcPath, eslintDestPath);
 
     // Copy .gitignore
@@ -278,9 +287,9 @@ async function main() {
     const nvmrcDestPath = path.join(outputDir, '.nvmrc');
     fs.copyFileSync(nvmrcSrcPath, nvmrcDestPath);
 
-    // Copy .prettierrc.js
-    const prettierrcSrcPath = path.join(templateDir, '.prettierrc.js');
-    const prettierrcDestPath = path.join(outputDir, '.prettierrc.js');
+    // Copy .prettierrc.cjs
+    const prettierrcSrcPath = path.join(templateDir, '.prettierrc.cjs');
+    const prettierrcDestPath = path.join(outputDir, '.prettierrc.cjs');
     fs.copyFileSync(prettierrcSrcPath, prettierrcDestPath);
 
     // Copy and compile package.json
@@ -303,9 +312,14 @@ async function main() {
     );
 
     // Copy tsconfig.json
-    const tsconfigSrcPath = path.join(templateDir, 'tsconfig.json');
+    const tsconfigSrcPath = path.join(templateDir, 'tsconfig.json.hbs');
     const tsconfigDestPath = path.join(outputDir, 'tsconfig.json');
     fs.copyFileSync(tsconfigSrcPath, tsconfigDestPath);
+
+    // Copy vite.config.js
+    const viteConfigSrcPath = path.join(templateDir, 'vite.config.js');
+    const viteConfigDestPath = path.join(outputDir, 'vite.config.js');
+    fs.copyFileSync(viteConfigSrcPath, viteConfigDestPath);
   } catch (error) {
     if (fs.existsSync(outputDir)) {
       fs.rmdirSync(outputDir, { recursive: true });
diff --git a/src/scripts/set_environment.js b/src/scripts/set_environment.js
index dd18b4ad..90dbb8f5 100644
--- a/src/scripts/set_environment.js
+++ b/src/scripts/set_environment.js
@@ -1,7 +1,7 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
-module.exports = () => {
+export default () => {
   const envFilePath = path.join(process.cwd(), 'src', '.env.json');
   const exampleEnvFilePath = path.join(process.cwd(), 'src', '.env.example.json');
 
diff --git a/src/stories/component-stories/CodeField.stories.tsx b/src/stories/component-stories/CodeField.stories.tsx
new file mode 100644
index 00000000..072d8c8e
--- /dev/null
+++ b/src/stories/component-stories/CodeField.stories.tsx
@@ -0,0 +1,35 @@
+import { ControlCodeField } from '../../components/form/controls/controlCodeField.js';
+import { LayoutCodeField } from '../../components/form/renderer/types.js';
+import { ComponentWrapper } from '../wrappers/component.js';
+
+import type { Meta } from '@storybook/react';
+
+const meta = {
+  title: 'Components/CodeField',
+  component: ControlCodeField,
+  parameters: {
+    layout: 'centered',
+  },
+
+  argTypes: {
+    component: {
+      control: 'select',
+      options: ['control-code-field'],
+    },
+  },
+  args: {
+    component: 'control-code-field',
+    name: 'option',
+    label: 'Code Field',
+    helperText: 'This is a helper text',
+  },
+} satisfies Meta<LayoutCodeField>;
+
+export default meta;
+
+export const Primary = {
+  render: (args) => (
+    <ComponentWrapper args={args} yupBase="string().default(initialValues?.spec?.yaml  || '')" />
+  ),
+  args: {},
+};
diff --git a/src/template/.eslintrc.js b/src/template/.eslintrc.cjs
similarity index 100%
rename from src/template/.eslintrc.js
rename to src/template/.eslintrc.cjs
diff --git a/src/template/.prettierrc.js b/src/template/.prettierrc.cjs
similarity index 100%
rename from src/template/.prettierrc.js
rename to src/template/.prettierrc.cjs
diff --git a/src/template/index.html.hbs b/src/template/index.html.hbs
new file mode 100644
index 00000000..c5d25205
--- /dev/null
+++ b/src/template/index.html.hbs
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="{{pluginName}} Source Plugin UI" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>{{pluginName}} Source Plugin UI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/src/template/package.json.hbs b/src/template/package.json.hbs
index 11fa60d8..67214433 100644
--- a/src/template/package.json.hbs
+++ b/src/template/package.json.hbs
@@ -2,42 +2,64 @@
   "name": "{{pluginName}}-{{pluginKind}}-cloud-config-ui",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "homepage": "./",
   "dependencies": {
+    "@cloudquery/plugin-config-ui-connector": "^1.0.0",
     "@cloudquery/plugin-config-ui-lib": "^{{cloudQueryPluginConfigUiLibVersion}}",
-    "typescript": "^4.9.5"
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@mui/icons-material": "^6.4.7",
+    "@mui/lab": "^6.0.0-beta.30",
+    "@mui/material": "^6.4.7",
+    "@mui/system": "^6.4.7",
+    "@mui/x-date-pickers": "^7.27.3",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "^0.52.2",
+    "monaco-yaml": "^5.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.2",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@playwright/test": "^1.45.3",
-    "@types/node": "^16.18.104",
+    "@playwright/test": "^1.51.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.13.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "command-exists": "^1.2.9",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.4.7",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "eslint-plugin-unicorn": "^55.0.0",
+    "html-minifier-terser": "^7.2.0",
     "http-server": "^14.1.1",
     "minimist": "^1.2.8",
-    "prettier": "^3.3.3",
-    "react-scripts": "^5.0.1",
+    "prettier": "^3.5.3",
     "source-map-explorer": "^2.5.3",
-    "yaml": "^2.5.0"
+    "vite": "^6.2.1",
+    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "scripts": {
-    "start": "node scripts/initialize.js && PORT=3001 react-scripts start",
-    "build": "node scripts/initialize.js -f && react-scripts build",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "start": "node scripts/initialize.js && vite",
+    "build": "node scripts/initialize.js -f && vite build",
+    "vercel-build": "vite build",
+    "preview": "vite preview",
+    "analyze": "source-map-explorer 'dist/assets/*.js'",
     "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
     "lint:fix": "eslint src --ext .ts,.tsx --max-warnings 0 --fix",
     "test:e2e": "playwright test",
diff --git a/src/template/public/index.html b/src/template/public/index.html
deleted file mode 100644
index 390b0a47..00000000
--- a/src/template/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
-  </head>
-  <body style="min-height: 0; display: block; flex: unset">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/src/template/public/manifest.json b/src/template/public/manifest.json.hbs
similarity index 83%
rename from src/template/public/manifest.json
rename to src/template/public/manifest.json.hbs
index 080d6c77..3382ef59 100644
--- a/src/template/public/manifest.json
+++ b/src/template/public/manifest.json.hbs
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "{{pluginName}}",
+  "name": "{{pluginName}} CloudQuery plugin UI",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/src/template/scripts/initialize.js.hbs b/src/template/scripts/initialize.js.hbs
index 26357bfb..712f28bf 100644
--- a/src/template/scripts/initialize.js.hbs
+++ b/src/template/scripts/initialize.js.hbs
@@ -1,10 +1,12 @@
-const argv = require('minimist')(process.argv.slice(2));
+import minimist from 'minimist';
 
-const setEnvironment = require('@cloudquery/plugin-config-ui-lib/scripts/set_environment.js');
+import setEnvironment from '@cloudquery/plugin-config-ui-lib/scripts/set_environment.js';
 {{#if createTablesSelector}}
-const generateTables = require('@cloudquery/plugin-config-ui-lib/scripts/gen_tables.js');
+import generateTables from '@cloudquery/plugin-config-ui-lib/scripts/gen_tables.js';
 {{/if}}
 
+const argv = minimist(process.argv.slice(2));
+
 setEnvironment();
 {{#if createTablesSelector}}
 generateTables(argv.f);
diff --git a/src/template/src/App.tsx.hbs b/src/template/src/App.tsx.hbs
index e91eab9f..cf48ac31 100644
--- a/src/template/src/App.tsx.hbs
+++ b/src/template/src/App.tsx.hbs
@@ -11,7 +11,7 @@ import { prepareSubmitValues } from './utils/prepareSubmitValues';
 const getTablesData = () => import('./data/__tables.json');
 {{/if}}
 
-function App() {
+function App({ container }: { container?: HTMLElement }) {
   const { initialValues, initialized, teamName, context } = useFormInit(
     pluginUiMessageHandler,
     true,
@@ -31,7 +31,7 @@ function App() {
         pluginUiMessageHandler={pluginUiMessageHandler}
         initialValues={initialValues}
       >
-        {initialized && <ConfigUIForm prepareSubmitValues={prepareSubmitValues} />}
+        {initialized && <ConfigUIForm container={container} prepareSubmitValues={prepareSubmitValues} />}
       </PluginContextProvider>
     </DevWrapper>
   );
diff --git a/src/template/src/index.tsx b/src/template/src/index.tsx
index 5a1b6768..ca589d56 100644
--- a/src/template/src/index.tsx
+++ b/src/template/src/index.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 
+import { getAppRootElements } from '@cloudquery/plugin-config-ui-lib';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
 
-const root = ReactDOM.createRoot(document.querySelector('#root') as HTMLElement);
+const { rootElement, shadowRootContainer } = getAppRootElements();
+
+const root = ReactDOM.createRoot(rootElement);
+
 root.render(
   <React.StrictMode>
-    <App />
+    <App container={shadowRootContainer} />
   </React.StrictMode>,
 );
diff --git a/src/template/src/react-app-env.d.ts b/src/template/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5f..00000000
--- a/src/template/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/src/template/tsconfig.json.hbs b/src/template/tsconfig.json.hbs
new file mode 100644
index 00000000..88926233
--- /dev/null
+++ b/src/template/tsconfig.json.hbs
@@ -0,0 +1,4 @@
+{
+  "extends": "@cloudquery/plugin-config-ui-lib/configs/tsconfig.app.json",
+  "include": ["src", "playwright.config.ts", "e2e-tests"]
+}
diff --git a/src/template/vite.config.js b/src/template/vite.config.js
new file mode 100644
index 00000000..22c36206
--- /dev/null
+++ b/src/template/vite.config.js
@@ -0,0 +1,6 @@
+import 'dotenv/config';
+
+import { defineConfig } from 'vite';
+import viteConfig from '@cloudquery/plugin-config-ui-lib/configs/vite.config.app.js';
+
+export default defineConfig(viteConfig);
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
new file mode 100644
index 00000000..a93031ac
--- /dev/null
+++ b/src/typings/index.d.ts
@@ -0,0 +1,6 @@
+declare module '*?worker' {
+  const workerConstructor: {
+    new (options?: { name?: string }): Worker;
+  };
+  export default workerConstructor;
+}
diff --git a/src/utils/getAppRootElements.ts b/src/utils/getAppRootElements.ts
index b96571c2..46132c86 100644
--- a/src/utils/getAppRootElements.ts
+++ b/src/utils/getAppRootElements.ts
@@ -25,6 +25,33 @@ export function getAppRootElements({
 
     shadowRootContainer = document.createElement('div');
     shadowRoot.append(shadowRootContainer);
+
+    // eslint-disable-next-line unicorn/prefer-spread
+    const styleElements = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'));
+
+    for (const styleElement of styleElements) {
+      shadowRoot.prepend(styleElement);
+    }
+
+    // Observe head for new style elements and copy them to shadow root
+    const headObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        // eslint-disable-next-line unicorn/prefer-spread
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (
+            node instanceof HTMLElement &&
+            (node.tagName === 'STYLE' ||
+              (node.tagName === 'LINK' && node.getAttribute('rel') === 'stylesheet'))
+          ) {
+            shadowRoot.prepend(node);
+          }
+        }
+      }
+    });
+
+    headObserver.observe(document.head, {
+      childList: true,
+    });
   }
 
   return {
diff --git a/tsconfig.json b/tsconfig.json
index 37762379..0dd79236 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,6 @@
     "noImplicitAny": false,
     "types": ["jest", "node"]
   },
-  "include": ["src"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
   "exclude": ["node_modules", "src/template"]
 }