diff --git a/packages/rolldown/package.json b/packages/rolldown/package.json
index 00f2f631..cff45a44 100644
--- a/packages/rolldown/package.json
+++ b/packages/rolldown/package.json
@@ -62,7 +62,6 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
-    "@types/codemirror": "catalog:types",
     "@types/diff": "catalog:types",
     "@types/split2": "catalog:types",
     "@types/splitpanes": "catalog:types",
@@ -72,8 +71,6 @@
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
     "@vueuse/router": "catalog:frontend",
-    "codemirror": "catalog:frontend",
-    "codemirror-theme-vars": "catalog:frontend",
     "comlink": "catalog:frontend",
     "d3": "catalog:frontend",
     "d3-hierarchy": "catalog:frontend",
@@ -81,6 +78,7 @@
     "floating-vue": "catalog:frontend",
     "fuse.js": "catalog:frontend",
     "idb-keyval": "catalog:frontend",
+    "modern-monaco": "catalog:frontend",
     "nanovis": "catalog:frontend",
     "splitpanes": "catalog:frontend",
     "stream-json": "catalog:inlined",
diff --git a/packages/rolldown/src/app/components/code/DiffEditor.vue b/packages/rolldown/src/app/components/code/DiffEditor.vue
index 57418462..2c7d3cde 100644
--- a/packages/rolldown/src/app/components/code/DiffEditor.vue
+++ b/packages/rolldown/src/app/components/code/DiffEditor.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
-import type CodeMirror from 'codemirror'
+import type * as Monaco from 'modern-monaco/editor-core'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
 import { Pane, Splitpanes } from 'splitpanes'
-import { computed, nextTick, onMounted, toRefs, useTemplateRef, watchEffect } from 'vue'
-import { guessCodemirrorMode, syncEditorScrolls, syncScrollListeners, useCodeMirror } from '~/composables/codemirror'
+import { computed, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
+import {
+  applyMonacoTheme,
+  createReadOnlyMonacoEditor,
+  getMonaco,
+  getMonacoWordWrap,
+  guessMonacoLanguage,
+  setModelLanguageIfNeeded,
+  setupMonacoScrollSync,
+  syncMonacoEditorScrolls,
+} from '~/composables/monaco'
 import { settings } from '~/state/settings'
 import { calculateDiffWithWorker } from '~/worker/diff'
 
@@ -13,115 +23,200 @@ const props = defineProps<{
   diff: boolean
 }>()
 
-const { from, to } = toRefs(props)
-
 const fromEl = useTemplateRef('fromEl')
 const toEl = useTemplateRef('toEl')
 
-let cm1: CodeMirror.Editor
-let cm2: CodeMirror.Editor
-
-onMounted(() => {
-  cm1 = useCodeMirror(
-    fromEl,
-    from,
-    {
-      mode: 'javascript',
-      readOnly: true,
-      lineNumbers: true,
-    },
-  )
-
-  cm2 = useCodeMirror(
-    toEl,
-    to,
-    {
-      mode: 'javascript',
-      readOnly: true,
-      lineNumbers: true,
-    },
-  )
-
-  syncScrollListeners(cm1, cm2)
-
-  watchEffect(() => {
-    cm1.setOption('lineWrapping', settings.value.codeviewerLineWrap)
-    cm2.setOption('lineWrapping', settings.value.codeviewerLineWrap)
-  })
+let monaco: typeof Monaco | null = null
+let fromEditor: Monaco.editor.IStandaloneCodeEditor | null = null
+let toEditor: Monaco.editor.IStandaloneCodeEditor | null = null
+let fromModel: Monaco.editor.ITextModel | null = null
+let toModel: Monaco.editor.ITextModel | null = null
+let fromDecorations: Monaco.editor.IEditorDecorationsCollection | null = null
+let toDecorations: Monaco.editor.IEditorDecorationsCollection | null = null
+let disposeScrollSync: (() => void) | null = null
+let diffVersion = 0
 
-  watchEffect(async () => {
-    cm1.getWrapperElement().style.display = props.oneColumn ? 'none' : ''
-    if (!props.oneColumn) {
-      await nextTick()
-      // Force sync to current scroll
-      cm1.refresh()
-      syncEditorScrolls(cm2, cm1)
-    }
-  })
+function setModelValue(model: Monaco.editor.ITextModel, value: string) {
+  if (model.getValue() !== value)
+    model.setValue(value)
+}
 
-  watchEffect(async () => {
-    const l = from.value
-    const r = to.value
-    const diffEnabled = props.diff
+function applyDiffDecorations(changes: Array<[number, string]>) {
+  if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
+    return
 
-    cm1.setOption('mode', guessCodemirrorMode(l))
-    cm2.setOption('mode', guessCodemirrorMode(r))
+  const fromEntries: Monaco.editor.IModelDeltaDecoration[] = []
+  const toEntries: Monaco.editor.IModelDeltaDecoration[] = []
 
-    await nextTick()
+  const addedLines = new Set<number>()
+  const removedLines = new Set<number>()
 
-    cm1.startOperation()
-    cm2.startOperation()
-
-    // clean up marks
-    cm1.getAllMarks().forEach(i => i.clear())
-    cm2.getAllMarks().forEach(i => i.clear())
-    for (let i = 0; i < cm1.lineCount() + 2; i++)
-      cm1.removeLineClass(i, 'background', 'diff-removed')
-    for (let i = 0; i < cm2.lineCount() + 2; i++)
-      cm2.removeLineClass(i, 'background', 'diff-added')
-
-    if (diffEnabled && from.value) {
-      const changes = await calculateDiffWithWorker(l, r)
-
-      const addedLines = new Set()
-      const removedLines = new Set()
-
-      let indexL = 0
-      let indexR = 0
-      changes.forEach(([type, change]) => {
-        if (type === 1) {
-          const start = cm2.posFromIndex(indexR)
-          indexR += change.length
-          const end = cm2.posFromIndex(indexR)
-          cm2.markText(start, end, { className: 'diff-added-inline' })
-          for (let i = start.line; i <= end.line; i++) addedLines.add(i)
-        }
-        else if (type === -1) {
-          const start = cm1.posFromIndex(indexL)
-          indexL += change.length
-          const end = cm1.posFromIndex(indexL)
-          cm1.markText(start, end, { className: 'diff-removed-inline' })
-          for (let i = start.line; i <= end.line; i++) removedLines.add(i)
-        }
-        else {
-          indexL += change.length
-          indexR += change.length
-        }
-      })
-
-      Array.from(removedLines).forEach(i =>
-        cm1.addLineClass(i, 'background', 'diff-removed'),
-      )
-      Array.from(addedLines).forEach(i =>
-        cm2.addLineClass(i, 'background', 'diff-added'),
-      )
+  let fromIndex = 0
+  let toIndex = 0
+
+  for (const [type, change] of changes) {
+    if (type === 1) {
+      const start = toModel.getPositionAt(toIndex)
+      toIndex += change.length
+      const end = toModel.getPositionAt(toIndex)
+
+      if (start.lineNumber !== end.lineNumber || start.column !== end.column) {
+        toEntries.push({
+          range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+          options: {
+            inlineClassName: 'diff-added-inline',
+          },
+        })
+      }
+
+      for (let i = start.lineNumber; i <= end.lineNumber; i++)
+        addedLines.add(i)
+    }
+    else if (type === -1) {
+      const start = fromModel.getPositionAt(fromIndex)
+      fromIndex += change.length
+      const end = fromModel.getPositionAt(fromIndex)
+
+      if (start.lineNumber !== end.lineNumber || start.column !== end.column) {
+        fromEntries.push({
+          range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+          options: {
+            inlineClassName: 'diff-removed-inline',
+          },
+        })
+      }
+
+      for (let i = start.lineNumber; i <= end.lineNumber; i++)
+        removedLines.add(i)
+    }
+    else {
+      fromIndex += change.length
+      toIndex += change.length
     }
+  }
 
-    cm1.endOperation()
-    cm2.endOperation()
+  for (const line of removedLines) {
+    fromEntries.push({
+      range: new monaco.Range(line, 1, line, 1),
+      options: {
+        className: 'diff-removed',
+        isWholeLine: true,
+      },
+    })
+  }
+
+  for (const line of addedLines) {
+    toEntries.push({
+      range: new monaco.Range(line, 1, line, 1),
+      options: {
+        className: 'diff-added',
+        isWholeLine: true,
+      },
+    })
+  }
+
+  fromDecorations.set(fromEntries)
+  toDecorations.set(toEntries)
+}
+
+onMounted(async () => {
+  if (!fromEl.value || !toEl.value)
+    return
+
+  monaco = await getMonaco()
+
+  fromEditor = createReadOnlyMonacoEditor(monaco, fromEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
   })
+  toEditor = createReadOnlyMonacoEditor(monaco, toEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
+  })
+
+  fromModel = monaco.editor.createModel(props.from, guessMonacoLanguage(props.from))
+  toModel = monaco.editor.createModel(props.to, guessMonacoLanguage(props.to))
+
+  fromEditor.setModel(fromModel)
+  toEditor.setModel(toModel)
+
+  fromDecorations = fromEditor.createDecorationsCollection()
+  toDecorations = toEditor.createDecorationsCollection()
+
+  disposeScrollSync = setupMonacoScrollSync(fromEditor, toEditor)
+
+  applyMonacoTheme(monaco)
+
+  if (!props.oneColumn)
+    syncMonacoEditorScrolls(toEditor, fromEditor)
+
+  await updateDiffDecorations(props.from, props.to, props.diff)
+})
+
+watch(
+  () => settings.value.codeviewerLineWrap,
+  (enabled) => {
+    const wordWrap = getMonacoWordWrap(enabled)
+    fromEditor?.updateOptions({ wordWrap })
+    toEditor?.updateOptions({ wordWrap })
+  },
+  { immediate: true },
+)
+
+watch(isDark, () => {
+  if (monaco)
+    applyMonacoTheme(monaco)
 })
 
+watch(
+  () => props.oneColumn,
+  async (oneColumn) => {
+    if (!fromEditor || !toEditor)
+      return
+
+    fromEl.value!.style.display = oneColumn ? 'none' : ''
+
+    await nextTick()
+
+    fromEditor.layout()
+    toEditor.layout()
+
+    if (!oneColumn)
+      syncMonacoEditorScrolls(toEditor, fromEditor)
+  },
+  { immediate: true },
+)
+
+async function updateDiffDecorations(from: string, to: string, diffEnabled: boolean) {
+  if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
+    return
+
+  const currentVersion = ++diffVersion
+
+  setModelValue(fromModel, from)
+  setModelValue(toModel, to)
+
+  setModelLanguageIfNeeded(monaco, fromModel, guessMonacoLanguage(from))
+  setModelLanguageIfNeeded(monaco, toModel, guessMonacoLanguage(to))
+
+  fromDecorations.set([])
+  toDecorations.set([])
+
+  if (!diffEnabled || !from || from === to)
+    return
+
+  const changes = await calculateDiffWithWorker(from, to)
+  if (currentVersion !== diffVersion)
+    return
+
+  applyDiffDecorations(changes)
+}
+
+watch(
+  () => [props.from, props.to, props.diff] as const,
+  ([from, to, diffEnabled]) => {
+    updateDiffDecorations(from, to, diffEnabled)
+  },
+)
+
 const leftPanelSize = computed(() => {
   return props.oneColumn
     ? 0
@@ -129,13 +224,22 @@ const leftPanelSize = computed(() => {
 })
 
 function onUpdate(size: number) {
-  // Refresh sizes
-  cm1?.refresh()
-  cm2?.refresh()
+  fromEditor?.layout()
+  toEditor?.layout()
+
   if (props.oneColumn)
     return
+
   settings.value.codeviewerDiffPanelSize = size
 }
+
+onBeforeUnmount(() => {
+  disposeScrollSync?.()
+  fromEditor?.dispose()
+  toEditor?.dispose()
+  fromModel?.dispose()
+  toModel?.dispose()
+})
 </script>
 
 <template>
diff --git a/packages/rolldown/src/app/components/code/Viewer.vue b/packages/rolldown/src/app/components/code/Viewer.vue
index cdd96ec7..46a51811 100644
--- a/packages/rolldown/src/app/components/code/Viewer.vue
+++ b/packages/rolldown/src/app/components/code/Viewer.vue
@@ -1,36 +1,84 @@
 <script setup lang="ts">
-import type CodeMirror from 'codemirror'
-import { onMounted, toRefs, useTemplateRef, watchEffect } from 'vue'
-import { useCodeMirror } from '~/composables/codemirror'
+import type * as Monaco from 'modern-monaco/editor-core'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
+import { applyMonacoTheme, createReadOnlyMonacoEditor, getMonaco, getMonacoWordWrap } from '~/composables/monaco'
 import { settings } from '~/state/settings'
 
 const props = defineProps<{
   code: string
-}
->()
+}>()
 
-const { code } = toRefs(props)
+const codeEl = useTemplateRef('codeEl')
+let monaco: typeof Monaco | null = null
+let editor: Monaco.editor.IStandaloneCodeEditor | null = null
+let model: Monaco.editor.ITextModel | null = null
+let contentSizeDisposable: Monaco.IDisposable | null = null
 
-let cm: CodeMirror.Editor
+function updateEditorHeight() {
+  if (!editor || !codeEl.value)
+    return
 
-const codeEl = useTemplateRef('codeEl')
+  const contentHeight = Math.max(editor.getContentHeight(), 80)
+  codeEl.value.style.height = `${contentHeight}px`
+  editor.layout()
+}
 
-onMounted(() => {
-  cm = useCodeMirror(
-    codeEl,
-    code,
-    {
-      mode: 'javascript',
-      readOnly: true,
-      lineNumbers: true,
+onMounted(async () => {
+  if (!codeEl.value)
+    return
+
+  monaco = await getMonaco()
+
+  model = monaco.editor.createModel(props.code, 'javascript')
+  editor = createReadOnlyMonacoEditor(monaco, codeEl.value, {
+    scrollbar: {
+      vertical: 'hidden',
+      verticalScrollbarSize: 0,
     },
-  )
-  watchEffect(() => {
-    cm.setOption('lineWrapping', settings.value.codeviewerLineWrap)
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
   })
+
+  editor.setModel(model)
+  contentSizeDisposable = editor.onDidContentSizeChange(updateEditorHeight)
+  applyMonacoTheme(monaco)
+  updateEditorHeight()
+})
+
+watch(
+  () => props.code,
+  (value) => {
+    if (!editor || !model || value === model.getValue())
+      return
+    model.setValue(value)
+    editor.setScrollTop(0)
+    editor.setScrollLeft(0)
+    updateEditorHeight()
+  },
+)
+
+watch(
+  () => settings.value.codeviewerLineWrap,
+  (enabled) => {
+    editor?.updateOptions({
+      wordWrap: getMonacoWordWrap(enabled),
+    })
+  },
+  { immediate: true },
+)
+
+watch(isDark, () => {
+  if (monaco)
+    applyMonacoTheme(monaco)
+})
+
+onBeforeUnmount(() => {
+  contentSizeDisposable?.dispose()
+  editor?.dispose()
+  model?.dispose()
 })
 </script>
 
 <template>
-  <div ref="codeEl" />
+  <div ref="codeEl" class="code-viewer" />
 </template>
diff --git a/packages/rolldown/src/app/composables/codemirror.ts b/packages/rolldown/src/app/composables/codemirror.ts
deleted file mode 100644
index 6e29b61d..00000000
--- a/packages/rolldown/src/app/composables/codemirror.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { Ref, WritableComputedRef } from 'vue'
-import CodeMirror from 'codemirror'
-import { watch } from 'vue'
-
-import 'codemirror/addon/dialog/dialog'
-import 'codemirror/addon/dialog/dialog.css'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/addon/search/jump-to-line'
-import 'codemirror/addon/search/search'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/handlebars/handlebars'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/pug/pug'
-import 'codemirror/mode/sass/sass'
-import 'codemirror/mode/vue/vue'
-import 'codemirror/mode/xml/xml'
-
-export function useCodeMirror(
-  container: Ref<HTMLDivElement | null | undefined>,
-  input: Ref<string> | WritableComputedRef<string>,
-  options: CodeMirror.EditorConfiguration = {},
-) {
-  const cm = CodeMirror(container.value!, {
-    theme: 'vars',
-    value: input.value,
-    ...options,
-  })
-
-  let skip = false
-
-  cm.on('change', () => {
-    if (skip) {
-      skip = false
-      return
-    }
-    input.value = cm.getValue()
-  })
-
-  watch(
-    input,
-    (v) => {
-      if (v !== cm.getValue()) {
-        skip = true
-        const selections = cm.listSelections()
-        cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Number.POSITIVE_INFINITY))
-        cm.setSelections(selections)
-        cm.scrollTo(0, 0)
-      }
-    },
-    { immediate: true },
-  )
-
-  return cm
-}
-
-export function syncEditorScrolls(primary: CodeMirror.Editor, target: CodeMirror.Editor) {
-  const pInfo = primary.getScrollInfo()
-  const tInfo = target.getScrollInfo()
-
-  // Map scroll range
-  let x = ((tInfo.width - tInfo.clientWidth) / (pInfo.width - pInfo.clientWidth)) * pInfo.left
-  let y = ((tInfo.height - tInfo.clientHeight) / (pInfo.height - pInfo.clientHeight)) * pInfo.top
-  x = Number.isNaN(x) ? 0 : x
-  y = Number.isNaN(y) ? 0 : y
-  target.scrollTo(x, y)
-}
-
-export function syncScrollListeners(
-  cm1: CodeMirror.Editor,
-  cm2: CodeMirror.Editor,
-) {
-  let activeCm = 1
-
-  cm1.getWrapperElement().addEventListener('mouseenter', () => {
-    activeCm = 1
-  })
-  cm2.getWrapperElement().addEventListener('mouseenter', () => {
-    activeCm = 2
-  })
-
-  cm1.on('scroll', (editor) => {
-    if (activeCm === 1)
-      syncEditorScrolls(editor, cm2)
-  })
-  // Scroll cursor into view no matter which view is active
-  cm1.on('scrollCursorIntoView', editor => syncEditorScrolls(editor, cm2))
-
-  cm2.on('scroll', (editor) => {
-    if (activeCm === 2)
-      syncEditorScrolls(editor, cm1)
-  })
-  cm2.on('scrollCursorIntoView', editor => syncEditorScrolls(editor, cm1))
-}
-
-export function guessCodemirrorMode(code: string) {
-  if (code.trimStart().startsWith('<'))
-    return 'htmlmixed'
-  if (code.match(/^import\s/))
-    return 'javascript'
-  if (code.match(/^[.#].+\{/))
-    return 'css'
-  return 'javascript'
-}
diff --git a/packages/rolldown/src/app/composables/monaco.ts b/packages/rolldown/src/app/composables/monaco.ts
new file mode 100644
index 00000000..39196688
--- /dev/null
+++ b/packages/rolldown/src/app/composables/monaco.ts
@@ -0,0 +1,194 @@
+import type { TextmateTheme } from 'modern-monaco'
+import type * as Monaco from 'modern-monaco/editor-core'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { init } from 'modern-monaco'
+
+const lightTheme: TextmateTheme = {
+  type: 'light',
+  name: 'rolldown-light',
+  colors: {
+    'editor.background': '#00000000',
+    'editor.foreground': '#8e8f8b',
+    'editor.selectionBackground': '#44444410',
+    'editorLineNumber.foreground': '#8e8f8b80',
+    'editorLineNumber.activeForeground': '#8e8f8b',
+    'editorGutter.background': '#00000000',
+    'editor.lineHighlightBackground': '#00000000',
+  },
+  tokenColors: [
+    { scope: 'comment', settings: { foreground: '#a0ada0' } },
+    { scope: 'string', settings: { foreground: '#b56959' } },
+    { scope: ['constant.numeric', 'number'], settings: { foreground: '#296aa3' } },
+    { scope: ['keyword', 'storage'], settings: { foreground: '#1c6b48' } },
+    { scope: ['entity.name.function', 'support.function'], settings: { foreground: '#6c7834' } },
+    { scope: ['entity.name.class', 'entity.name.type'], settings: { foreground: '#2993a3' } },
+    { scope: ['variable', 'identifier'], settings: { foreground: '#ad944c' } },
+    { scope: ['variable.other.property', 'meta.property-name'], settings: { foreground: '#b58451' } },
+  ],
+}
+
+const darkTheme: TextmateTheme = {
+  type: 'dark',
+  name: 'rolldown-dark',
+  colors: {
+    'editor.background': '#00000000',
+    'editor.foreground': '#858585',
+    'editor.selectionBackground': '#44444450',
+    'editorLineNumber.foreground': '#88888880',
+    'editorLineNumber.activeForeground': '#888888',
+    'editorGutter.background': '#00000000',
+    'editor.lineHighlightBackground': '#00000000',
+  },
+  tokenColors: [
+    { scope: 'comment', settings: { foreground: '#758575' } },
+    { scope: 'string', settings: { foreground: '#d48372' } },
+    { scope: ['constant.numeric', 'number'], settings: { foreground: '#6394bf' } },
+    { scope: ['keyword', 'storage'], settings: { foreground: '#4d9375' } },
+    { scope: ['entity.name.function', 'support.function'], settings: { foreground: '#a1b567' } },
+    { scope: ['entity.name.class', 'entity.name.type'], settings: { foreground: '#54b1bf' } },
+    { scope: ['variable', 'identifier'], settings: { foreground: '#c2b36e' } },
+    { scope: ['variable.other.property', 'meta.property-name'], settings: { foreground: '#dd8e6e' } },
+  ],
+}
+
+const lightThemeId = lightTheme.name
+const darkThemeId = darkTheme.name
+
+function getThemeId() {
+  return isDark.value ? darkThemeId : lightThemeId
+}
+
+let monacoPromise: Promise<typeof Monaco> | null = null
+
+export async function getMonaco() {
+  monacoPromise ??= init({
+    defaultTheme: isDark.value ? darkTheme : lightTheme,
+    themes: [lightTheme, darkTheme],
+  })
+  return monacoPromise
+}
+
+export function applyMonacoTheme(monaco: typeof Monaco) {
+  monaco.editor.setTheme(getThemeId())
+}
+
+export function getMonacoWordWrap(enabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] {
+  return enabled ? 'on' : 'off'
+}
+
+const readonlyEditorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true,
+  fontFamily: '\'Input Mono\', \'FiraCode\', monospace',
+  fontSize: 13,
+  lineNumbers: 'on',
+  minimap: { enabled: false },
+  readOnly: true,
+  renderLineHighlight: 'none',
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+    horizontal: 'auto',
+    horizontalScrollbarSize: 6,
+    useShadows: false,
+    vertical: 'auto',
+    verticalScrollbarSize: 6,
+  },
+}
+
+export function createReadOnlyMonacoEditor(
+  monaco: typeof Monaco,
+  container: HTMLElement,
+  options: Monaco.editor.IStandaloneEditorConstructionOptions = {},
+) {
+  const scrollbar = {
+    ...readonlyEditorOptions.scrollbar,
+    ...options.scrollbar,
+  }
+  return monaco.editor.create(container, {
+    ...readonlyEditorOptions,
+    ...options,
+    scrollbar,
+  })
+}
+
+export function setModelLanguageIfNeeded(
+  monaco: typeof Monaco,
+  model: Monaco.editor.ITextModel,
+  language: string,
+) {
+  if (model.getLanguageId() !== language)
+    monaco.editor.setModelLanguage(model, language)
+}
+
+export function guessMonacoLanguage(code: string) {
+  if (code.trimStart().startsWith('<'))
+    return 'html'
+  if (code.match(/^import\s/))
+    return 'javascript'
+  if (code.match(/^[.#].+\{/))
+    return 'css'
+  return 'javascript'
+}
+
+function mapScroll(primaryPos: number, primaryMax: number, targetMax: number) {
+  if (primaryMax <= 0 || targetMax <= 0)
+    return 0
+  return (targetMax / primaryMax) * primaryPos
+}
+
+export function syncMonacoEditorScrolls(
+  primary: Monaco.editor.IStandaloneCodeEditor,
+  target: Monaco.editor.IStandaloneCodeEditor,
+) {
+  const pMaxX = Math.max(primary.getScrollWidth() - primary.getLayoutInfo().width, 0)
+  const pMaxY = Math.max(primary.getScrollHeight() - primary.getLayoutInfo().height, 0)
+  const tMaxX = Math.max(target.getScrollWidth() - target.getLayoutInfo().width, 0)
+  const tMaxY = Math.max(target.getScrollHeight() - target.getLayoutInfo().height, 0)
+
+  const scrollLeft = mapScroll(primary.getScrollLeft(), pMaxX, tMaxX)
+  const scrollTop = mapScroll(primary.getScrollTop(), pMaxY, tMaxY)
+
+  target.setScrollPosition({
+    scrollLeft: Number.isFinite(scrollLeft) ? scrollLeft : 0,
+    scrollTop: Number.isFinite(scrollTop) ? scrollTop : 0,
+  })
+}
+
+export function setupMonacoScrollSync(
+  editor1: Monaco.editor.IStandaloneCodeEditor,
+  editor2: Monaco.editor.IStandaloneCodeEditor,
+) {
+  let activeEditor = 1
+
+  const node1 = editor1.getDomNode()
+  const node2 = editor2.getDomNode()
+
+  const onMouseEnter1 = () => {
+    activeEditor = 1
+  }
+  const onMouseEnter2 = () => {
+    activeEditor = 2
+  }
+
+  node1?.addEventListener('mouseenter', onMouseEnter1)
+  node2?.addEventListener('mouseenter', onMouseEnter2)
+
+  const disposables: Monaco.IDisposable[] = [
+    editor1.onDidScrollChange(() => {
+      if (activeEditor === 1)
+        syncMonacoEditorScrolls(editor1, editor2)
+    }),
+    editor2.onDidScrollChange(() => {
+      if (activeEditor === 2)
+        syncMonacoEditorScrolls(editor2, editor1)
+    }),
+    editor1.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor1, editor2)),
+    editor2.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor2, editor1)),
+  ]
+
+  return () => {
+    node1?.removeEventListener('mouseenter', onMouseEnter1)
+    node2?.removeEventListener('mouseenter', onMouseEnter2)
+    disposables.forEach(d => d.dispose())
+  }
+}
diff --git a/packages/rolldown/src/app/styles/cm.css b/packages/rolldown/src/app/styles/cm.css
index fd15adcb..09c337f3 100644
--- a/packages/rolldown/src/app/styles/cm.css
+++ b/packages/rolldown/src/app/styles/cm.css
@@ -1,68 +1,23 @@
-@import 'codemirror-theme-vars/base.css';
-
 :root {
   --cm-font-family: 'Input Mono', 'FiraCode', monospace;
 }
 
-html:not(.dark) {
-  --cm-foreground: #8e8f8b;
-  --cm-background: #0000;
-  --cm-comment: #a0ada0;
-  --cm-string: #b56959;
-  --cm-literal: #2f8a89;
-  --cm-number: #296aa3;
-  --cm-keyword: #1c6b48;
-  --cm-function: #6c7834;
-  --cm-boolean: #1c6b48;
-  --cm-constant: #a65e2b;
-  --cm-deleted: #a14f55;
-  --cm-variable: #ad944c;
-  --cm-class: #2993a3;
-  --cm-builtin: #ab5959;
-  --cm-property: #b58451;
-  --cm-namespace: #b05a78;
-  --cm-punctuation: #8e8f8b;
-  --cm-decorator: #bd8f8f;
-  --cm-regex: #ab5e3f;
-  --cm-json-property: #698c96;
-  --cm-selection-background: #44444410;
-  --cm-line-number-gutter: #fafafa;
-}
-
-html.dark {
-  --cm-foreground: #858585;
-  --cm-background: #0000;
-  --cm-comment: #758575;
-  --cm-string: #d48372;
-  --cm-literal: #429988;
-  --cm-keyword: #4d9375;
-  --cm-boolean: #1c6b48;
-  --cm-number: #6394bf;
-  --cm-variable: #c2b36e;
-  --cm-function: #a1b567;
-  --cm-deleted: #a14f55;
-  --cm-class: #54b1bf;
-  --cm-builtin: #e0a569;
-  --cm-property: #dd8e6e;
-  --cm-namespace: #db889a;
-  --cm-punctuation: #858585;
-  --cm-decorator: #bd8f8f;
-  --cm-regex: #ab5e3f;
-  --cm-json-property: #6b8b9e;
-  --cm-line-number: #888888;
-  --cm-line-highlight-background: #444444;
-  --cm-selection-background: #44444450;
-  --cm-line-number-gutter: #1a1a1a;
+.code-viewer {
+  min-height: 80px;
 }
 
-
-.CodeMirror {
-  height: inherit !important;
-  width: 100% !important;
+.monaco-editor,
+.monaco-editor .margin,
+.monaco-editor .view-lines,
+.monaco-editor .view-line,
+.monaco-editor .line-numbers {
   font-family: var(--cm-font-family) !important;
   font-size: 13px !important;
 }
 
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: var(--cm-background) !important;
+.monaco-editor,
+.monaco-editor .monaco-editor-background,
+.monaco-editor .overflow-guard,
+.monaco-editor .margin {
+  background-color: transparent !important;
 }
diff --git a/packages/rolldown/src/app/styles/global.css b/packages/rolldown/src/app/styles/global.css
index e4199740..977ff5dd 100644
--- a/packages/rolldown/src/app/styles/global.css
+++ b/packages/rolldown/src/app/styles/global.css
@@ -4,6 +4,13 @@ html, body , #__nuxt{
   padding: 0;
 }
 
+:root {
+  --app-scrollbar-size: 6px;
+  --app-scrollbar-radius: 1px;
+  --app-scrollbar-thumb: #8884;
+  --app-scrollbar-thumb-hover: #8885;
+}
+
 .bg-dots {
   background-image: url('/dot-grid-light.png');
   background-size: 50px;
@@ -91,11 +98,11 @@ summary::-webkit-details-marker {
 
 /* For Scrollbar */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: var(--app-scrollbar-size);
 } 
 
 ::-webkit-scrollbar:horizontal {
-  height: 6px;
+  height: var(--app-scrollbar-size);
 }
 
 ::-webkit-scrollbar-corner {
@@ -103,16 +110,31 @@ summary::-webkit-details-marker {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #8884;
+  background-color: var(--app-scrollbar-thumb);
   transition: background 0.2s ease;
-  border-radius: 1px; 
+  border-radius: var(--app-scrollbar-radius);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #8885;
+  background-color: var(--app-scrollbar-thumb-hover);
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 1px;
+  border-radius: var(--app-scrollbar-radius);
   background: transparent;
 }
+
+.monaco-scrollable-element > .scrollbar {
+  background: transparent !important;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider {
+  background-color: var(--app-scrollbar-thumb) !important;
+  border-radius: var(--app-scrollbar-radius) !important;
+  transition: background 0.2s ease;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider.active,
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+  background-color: var(--app-scrollbar-thumb-hover) !important;
+}
diff --git a/packages/rolldown/src/nuxt.config.ts b/packages/rolldown/src/nuxt.config.ts
index b36977ef..83183781 100644
--- a/packages/rolldown/src/nuxt.config.ts
+++ b/packages/rolldown/src/nuxt.config.ts
@@ -104,20 +104,7 @@ export default defineNuxtConfig({
         'd3-hierarchy',
         'd3-shape',
         'fuse.js',
-        'codemirror',
-        'codemirror/addon/dialog/dialog',
-        'codemirror/addon/display/placeholder',
-        'codemirror/addon/search/jump-to-line',
-        'codemirror/addon/search/search',
-        'codemirror/mode/css/css',
-        'codemirror/mode/handlebars/handlebars',
-        'codemirror/mode/htmlmixed/htmlmixed',
-        'codemirror/mode/javascript/javascript',
-        'codemirror/mode/markdown/markdown',
-        'codemirror/mode/pug/pug',
-        'codemirror/mode/sass/sass',
-        'codemirror/mode/vue/vue',
-        'codemirror/mode/xml/xml',
+        'modern-monaco',
         'comlink',
         'floating-vue',
         'splitpanes',
diff --git a/packages/rolldown/src/uno.config.ts b/packages/rolldown/src/uno.config.ts
index 55ffe560..a7b6e787 100644
--- a/packages/rolldown/src/uno.config.ts
+++ b/packages/rolldown/src/uno.config.ts
@@ -5,7 +5,6 @@ import { defineConfig } from 'unocss'
 
 export default defineConfig({
   presets: [
-
     presetDevToolsUI({
       webFonts: {
         processors: createLocalFontProcessor({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9ba38be..fb76347d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,12 +196,6 @@ catalogs:
     '@xterm/xterm':
       specifier: ^6.0.0
       version: 6.0.0
-    codemirror:
-      specifier: ^5.65.21
-      version: 5.65.21
-    codemirror-theme-vars:
-      specifier: ^0.1.2
-      version: 0.1.2
     comlink:
       specifier: ^4.4.2
       version: 4.4.2
@@ -229,6 +223,9 @@ catalogs:
     idb-keyval:
       specifier: ^6.2.2
       version: 6.2.2
+    modern-monaco:
+      specifier: ^0.4.0
+      version: 0.4.0
     my-ua-parser:
       specifier: ^2.0.4
       version: 2.0.4
@@ -321,9 +318,6 @@ catalogs:
     '@types/chrome':
       specifier: ^0.1.37
       version: 0.1.37
-    '@types/codemirror':
-      specifier: ^5.60.17
-      version: 5.60.17
     '@types/connect':
       specifier: ^3.4.38
       version: 3.4.38
@@ -734,9 +728,6 @@ importers:
         specifier: catalog:deps
         version: 8.19.0
     devDependencies:
-      '@types/codemirror':
-        specifier: catalog:types
-        version: 5.60.17
       '@types/diff':
         specifier: catalog:types
         version: 8.0.0
@@ -764,12 +755,6 @@ importers:
       '@vueuse/router':
         specifier: catalog:frontend
         version: 14.2.1(vue-router@5.0.3(@vue/compiler-sfc@3.5.29)(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
-      codemirror:
-        specifier: catalog:frontend
-        version: 5.65.21
-      codemirror-theme-vars:
-        specifier: catalog:frontend
-        version: 0.1.2
       comlink:
         specifier: catalog:frontend
         version: 4.4.2
@@ -791,6 +776,9 @@ importers:
       idb-keyval:
         specifier: catalog:frontend
         version: 6.2.2
+      modern-monaco:
+        specifier: catalog:frontend
+        version: 0.4.0(typescript@5.9.3)
       nanovis:
         specifier: catalog:frontend
         version: 1.0.0
@@ -2917,9 +2905,6 @@ packages:
   '@types/chrome@0.1.37':
     resolution: {integrity: sha512-IJE4ceuDO7lrEuua7Pow47zwNcI8E6qqkowRP7aFPaZ0lrjxh6y836OPqqkIZeTX64FTogbw+4RNH0+QrweCTQ==}
 
-  '@types/codemirror@5.60.17':
-    resolution: {integrity: sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==}
-
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -3092,9 +3077,6 @@ packages:
   '@types/stream-json@1.7.8':
     resolution: {integrity: sha512-MU1OB1eFLcYWd1LjwKXrxdoPtXSRzRmAnnxs4Js/ayB5O/NvHraWwuOaqMWIebpYwM6khFlsJOHEhI9xK/ab4Q==}
 
-  '@types/tern@0.23.9':
-    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
-
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -4005,12 +3987,6 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
-  codemirror-theme-vars@0.1.2:
-    resolution: {integrity: sha512-WTau8X2q58b0SOAY9DO+iQVw8JKVEgyQIqArp2D732tcc+pobbMta3bnVMdQdmgwuvNrOFFr6HoxPRoQOgooFA==}
-
-  codemirror@5.65.21:
-    resolution: {integrity: sha512-6teYk0bA0nR3QP0ihGMoxuKzpl5W80FpnHpBJpgy66NK3cZv5b/d/HY8PnRvfSsCG1MTfr92u2WUl+wT0E40mQ==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -5815,6 +5791,11 @@ packages:
   mocked-exports@0.1.1:
     resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
 
+  modern-monaco@0.4.0:
+    resolution: {integrity: sha512-yAdBtGkSG4CzBfvBIhW4tSQMhLCc3GKIGAWchEqiyDl7lAcwD8DjmF6h0co/ZV1VQ1c3nP58zhMnapazlzZqUw==}
+    peerDependencies:
+      typescript: '>= 5.0.0'
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -9731,10 +9712,6 @@ snapshots:
       '@types/filesystem': 0.0.36
       '@types/har-format': 1.2.16
 
-  '@types/codemirror@5.60.17':
-    dependencies:
-      '@types/tern': 0.23.9
-
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 25.0.3
@@ -9936,10 +9913,6 @@ snapshots:
       '@types/node': 25.0.3
       '@types/stream-chain': 2.1.0
 
-  '@types/tern@0.23.9':
-    dependencies:
-      '@types/estree': 1.0.8
-
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -11087,10 +11060,6 @@ snapshots:
 
   cluster-key-slot@1.1.2: {}
 
-  codemirror-theme-vars@0.1.2: {}
-
-  codemirror@5.65.21: {}
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -13089,6 +13058,10 @@ snapshots:
 
   mocked-exports@0.1.1: {}
 
+  modern-monaco@0.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8c7f759e..53e40088 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -88,8 +88,6 @@ catalogs:
     '@vueuse/router': ^14.2.1
     '@xterm/addon-fit': ^0.11.0
     '@xterm/xterm': ^6.0.0
-    codemirror: ^5.65.21
-    codemirror-theme-vars: ^0.1.2
     comlink: ^4.4.2
     d3: ^7.9.0
     d3-hierarchy: ^3.1.2
@@ -99,6 +97,7 @@ catalogs:
     floating-vue: ^5.2.2
     fuse.js: ^7.1.0
     idb-keyval: ^6.2.2
+    modern-monaco: ^0.4.0
     my-ua-parser: ^2.0.4
     nanovis: ^1.0.0
     splitpanes: ^4.0.4
@@ -137,7 +136,6 @@ catalogs:
     yaml: ^2.8.2
   types:
     '@types/chrome': ^0.1.37
-    '@types/codemirror': ^5.60.17
     '@types/connect': ^3.4.38
     '@types/d3': ^7.4.3
     '@types/d3-hierarchy': ^3.1.7