diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index a724b68f..81b6ad0b 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -3,12 +3,13 @@
 </template>
 
 <script setup lang="ts">
+import type { ModeSpec, ModeSpecOptions } from 'codemirror'
 import { ref, onMounted, watchEffect, inject } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
 export interface Props {
-  mode?: string
+  mode?: string | ModeSpec<ModeSpecOptions>
   value?: string
   readonly?: boolean
 }
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index a68994fd..8c3ea7d0 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
-import CodeMirror from '../codemirror/CodeMirror.vue'
+import CodeMirror, { type Props } from '../codemirror/CodeMirror.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { computed, inject } from 'vue'
@@ -8,17 +8,35 @@ import { Store } from '../store'
 
 const store = inject('store') as Store
 
+const modes: Record<string, Props['mode']> = {
+  css: 'css',
+  html: 'htmlmixed',
+  js: {
+    name: 'javascript',
+  },
+  json: {
+    name: 'javascript',
+    json: true,
+  },
+  ts: {
+    name: 'javascript',
+    typescript: true,
+  },
+  vue: 'htmlmixed',
+}
+
 const onChange = debounce((code: string) => {
   store.state.activeFile.code = code
 }, 250)
 
 const activeMode = computed(() => {
   const { filename } = store.state.activeFile
-  return filename.endsWith('.vue') || filename.endsWith('.html')
-    ? 'htmlmixed'
-    : filename.endsWith('.css')
-    ? 'css'
-    : 'javascript'
+
+  const mode = modes[filename.split('.').pop()!]
+
+  return filename.lastIndexOf('.') !== -1 && mode
+    ? mode
+    : modes.js
 })
 </script>