diff --git a/package-lock.json b/package-lock.json
index 51dcb23eb..c2e707427 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
 				"async": "^3.2.5",
 				"bits-ui": "^0.19.7",
 				"codemirror": "^6.0.1",
+				"codemirror-lang-hcl": "^0.0.0-beta.2",
 				"crc-32": "^1.2.2",
 				"dayjs": "^1.11.10",
 				"dompurify": "^3.1.6",
@@ -4266,6 +4267,17 @@
 				"@codemirror/view": "^6.0.0"
 			}
 		},
+		"node_modules/codemirror-lang-hcl": {
+			"version": "0.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/codemirror-lang-hcl/-/codemirror-lang-hcl-0.0.0-beta.2.tgz",
+			"integrity": "sha512-R3ew7Z2EYTdHTMXsWKBW9zxnLoLPYO+CrAa3dPZjXLrIR96Q3GR4cwJKF7zkSsujsnWgwRQZonyWpXYXfhQYuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
 		"node_modules/coincident": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/coincident/-/coincident-1.2.3.tgz",
diff --git a/package.json b/package.json
index 220f5c691..de5f864fd 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
 	"type": "module",
 	"dependencies": {
 		"@codemirror/lang-javascript": "^6.2.2",
+		"codemirror-lang-hcl": "^0.0.0-beta.2",
 		"@codemirror/lang-python": "^6.1.6",
 		"@codemirror/language-data": "^6.5.1",
 		"@codemirror/theme-one-dark": "^6.1.2",
diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index b521978f4..b9ecfb239 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/src/lib/components/common/CodeEditor.svelte
@@ -6,7 +6,7 @@
 	import { acceptCompletion } from '@codemirror/autocomplete';
 	import { indentWithTab } from '@codemirror/commands';
 
-	import { indentUnit } from '@codemirror/language';
+	import { indentUnit, LanguageDescription } from '@codemirror/language';
 	import { languages } from '@codemirror/language-data';
 
 	import { oneDark } from '@codemirror/theme-one-dark';
@@ -47,6 +47,15 @@
 	let editorTheme = new Compartment();
 	let editorLanguage = new Compartment();
 
+	languages.push(
+		LanguageDescription.of({
+			name: 'HCL',
+			extensions: ['hcl', 'tf'],
+			load() {
+				return import('codemirror-lang-hcl').then((m) => m.hcl());
+			}
+		})
+	);
 	const getLang = async () => {
 		const language = languages.find((l) => l.alias.includes(lang));
 		return await language?.load();