diff --git a/packages/components/package.json b/packages/components/package.json
index af4a60c91..e7a7161bf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -63,6 +63,10 @@
   },
   "dependencies": {
     "@codemirror/commands": "^6.1.2",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.1.3",
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.3.0",
     "@codemirror/legacy-modes": "^6.2.0",
     "@codemirror/state": "^6.1.2",
diff --git a/packages/components/src/components/codemirror/Codemirror.story.vue b/packages/components/src/components/codemirror/Codemirror.story.vue
index a1f079e64..7ef227fda 100644
--- a/packages/components/src/components/codemirror/Codemirror.story.vue
+++ b/packages/components/src/components/codemirror/Codemirror.story.vue
@@ -10,7 +10,7 @@ function initState() {
 <template>
   <Story :init-state="initState" title="Codemirror">
     <template #default="{ state }">
-      <VCodemirror v-model="state.value" height="500px" language="yaml" />
+      <VCodemirror v-model="state.value" height="500px" language="html" />
     </template>
   </Story>
 </template>
diff --git a/packages/components/src/components/codemirror/Codemirror.vue b/packages/components/src/components/codemirror/Codemirror.vue
index f9540670d..6907ebf6c 100644
--- a/packages/components/src/components/codemirror/Codemirror.vue
+++ b/packages/components/src/components/codemirror/Codemirror.vue
@@ -4,18 +4,29 @@ import type { EditorStateConfig } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { basicSetup } from "codemirror";
-import { StreamLanguage } from "@codemirror/language";
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
 import { yaml } from "@codemirror/legacy-modes/mode/yaml";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";
 
-const languages = {
+const presetLanguages = {
   yaml: StreamLanguage.define(yaml),
+  html: html(),
+  javascript: javascript({
+    jsx: true,
+    typescript: true,
+  }),
+  css: css(),
+  json: json(),
 };
 
 const props = withDefaults(
   defineProps<{
     modelValue?: string;
     height?: string;
-    language?: "yaml";
+    language: keyof typeof presetLanguages | LanguageSupport;
     extensions?: EditorStateConfig["extensions"];
   }>(),
   {
@@ -42,11 +53,16 @@ const cmState = shallowRef<EditorState>();
 const cmView = shallowRef<EditorView>();
 
 const createCmEditor = () => {
+  const language =
+    typeof props.language === "string"
+      ? presetLanguages[props.language]
+      : props.language;
+
   let extensions = [
     basicSetup,
     EditorView.lineWrapping,
     customTheme,
-    languages[props.language],
+    language,
     EditorView.updateListener.of((viewUpdate) => {
       if (viewUpdate.docChanged) {
         const doc = viewUpdate.state.doc.toString();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28df37f02..3d5fbbadf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -200,6 +200,10 @@ importers:
   packages/components:
     specifiers:
       '@codemirror/commands': ^6.1.2
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.1.3
+      '@codemirror/lang-javascript': ^6.1.1
+      '@codemirror/lang-json': ^6.0.1
       '@codemirror/language': ^6.3.0
       '@codemirror/legacy-modes': ^6.2.0
       '@codemirror/state': ^6.1.2
@@ -212,6 +216,10 @@ importers:
       vite-plugin-dts: ^1.6.6
     dependencies:
       '@codemirror/commands': 6.1.2
+      '@codemirror/lang-css': 6.0.1_@codemirror+view@6.4.0
+      '@codemirror/lang-html': 6.1.3
+      '@codemirror/lang-javascript': 6.1.1
+      '@codemirror/lang-json': 6.0.1
       '@codemirror/language': 6.3.0
       '@codemirror/legacy-modes': 6.2.0
       '@codemirror/state': 6.1.2
@@ -1660,12 +1668,47 @@ packages:
       '@codemirror/view': 6.4.0
       '@lezer/common': 1.0.1
 
-  /@codemirror/lang-json/6.0.0:
-    resolution: {integrity: sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==}
+  /@codemirror/lang-css/6.0.1_@codemirror+view@6.4.0:
+    resolution: {integrity: sha512-rlLq1Dt0WJl+2epLQeAsfqIsx3lGu4HStHCJu95nGGuz2P2fNugbU3dQYafr2VRjM4eMC9HviI6jvS98CNtG5w==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/language': 6.3.0
+      '@codemirror/state': 6.1.2
+      '@lezer/css': 1.0.1
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/lang-html/6.1.3:
+    resolution: {integrity: sha512-LmtIElopGK6bBfddAyjBitS6hz8nFr/PVUtvqmfomXlHB4m+Op2d5eGk/X9/CSby6Y8NqXXkGa3yDd9lfJ6Qlg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/lang-css': 6.0.1_@codemirror+view@6.4.0
+      '@codemirror/lang-javascript': 6.1.1
+      '@codemirror/language': 6.3.0
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.4.0
+      '@lezer/common': 1.0.1
+      '@lezer/html': 1.0.1
+    dev: false
+
+  /@codemirror/lang-javascript/6.1.1:
+    resolution: {integrity: sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/language': 6.3.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.4.0
+      '@lezer/common': 1.0.1
+      '@lezer/javascript': 1.0.2
+    dev: false
+
+  /@codemirror/lang-json/6.0.1:
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
     dependencies:
       '@codemirror/language': 6.3.0
       '@lezer/json': 1.0.0
-    dev: true
 
   /@codemirror/language/6.3.0:
     resolution: {integrity: sha512-6jOE5DEt6sKD46SXhn3xPbBehn+l48ACcA6Uxs2k+E2YNH9XGF5WdGMTYr2DlggfK4h0QZBK6zEb5S7lkTriWA==}
@@ -1991,7 +2034,7 @@ packages:
     resolution: {integrity: sha512-DwSHDRcAoGpgAyTcjcwPfL+yybY3q5HJITDL8Y6MWkG1blQMKcwukZhEv9WDGp6QxABrZzsSKuamKJdXRLpE5w==}
     dependencies:
       '@codemirror/commands': 6.1.2
-      '@codemirror/lang-json': 6.0.0
+      '@codemirror/lang-json': 6.0.1
       '@codemirror/language': 6.3.0
       '@codemirror/lint': 6.0.0
       '@codemirror/state': 6.1.2
@@ -2347,17 +2390,38 @@ packages:
   /@lezer/common/1.0.1:
     resolution: {integrity: sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw==}
 
+  /@lezer/css/1.0.1:
+    resolution: {integrity: sha512-kLGsbzXdp1ntzO2jDwFf+2w76EBlLiD4FKofx7tgkdqeFRoslFiMS2qqbNtAauXw8ihZ4cE5YpxSpfsKXSs5Sg==}
+    dependencies:
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
   /@lezer/highlight/1.1.1:
     resolution: {integrity: sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==}
     dependencies:
       '@lezer/common': 1.0.1
 
+  /@lezer/html/1.0.1:
+    resolution: {integrity: sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==}
+    dependencies:
+      '@lezer/common': 1.0.1
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
+  /@lezer/javascript/1.0.2:
+    resolution: {integrity: sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==}
+    dependencies:
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
   /@lezer/json/1.0.0:
     resolution: {integrity: sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==}
     dependencies:
       '@lezer/highlight': 1.1.1
       '@lezer/lr': 1.2.3
-    dev: true
 
   /@lezer/lr/1.2.3:
     resolution: {integrity: sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==}