diff --git a/src/App.tsx b/src/App.tsx
index a8055e8d8..6fb450134 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { asyncLexer } from './lang/tokeniser'
 import { abstractSyntaxTree } from './lang/abstractSyntaxTree'
 import { _executor, ExtrudeGroup, SketchGroup } from './lang/executor'
 import CodeMirror from '@uiw/react-codemirror'
+import { linter, lintGutter, Diagnostic } from '@codemirror/lint'
 import { javascript } from '@codemirror/lang-javascript'
 import { ViewUpdate } from '@codemirror/view'
 import {
@@ -22,7 +23,7 @@ import { EngineCommandManager } from './lang/std/engineConnection'
 import { isOverlap } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
 import { isTauri } from './lib/isTauri'
-import { KCLError } from './lang/errors'
+import { KCLError, kclErrToDiagnostic } from './lang/errors'
 
 export function App() {
   const cam = useRef()
@@ -291,7 +292,14 @@ export function App() {
               <CodeMirror
                 className="h-full"
                 value={code}
-                extensions={[javascript({ jsx: true }), lineHighlightField]}
+                extensions={[
+                  javascript({ jsx: true }),
+                  lineHighlightField,
+                  lintGutter(),
+                  linter((_view) => {
+                    return kclErrToDiagnostic(useStore.getState().kclErrors)
+                  }),
+                ]}
                 onChange={onChange}
                 onUpdate={onUpdate}
                 theme={theme}
diff --git a/src/lang/errors.ts b/src/lang/errors.ts
index f1b629040..b1aafb873 100644
--- a/src/lang/errors.ts
+++ b/src/lang/errors.ts
@@ -1,3 +1,5 @@
+import { Diagnostic } from '@codemirror/lint'
+
 export class KCLError {
   kind: string | undefined
   sourceRanges: [number, number][]
@@ -55,3 +57,15 @@ export class KCLUndefinedValueError extends KCLError {
     Object.setPrototypeOf(this, KCLUndefinedValueError.prototype)
   }
 }
+
+/**
+ * Maps the KCL errors to an array of CodeMirror diagnostics.
+ * Currently the diagnostics are all errors, but in the future they could include lints.
+ * */
+export function kclErrToDiagnostic(errors: KCLError[]): Diagnostic[] {
+  return errors.flatMap((err) => {
+    return err.sourceRanges.map(([from, to]) => {
+      return { from, to, message: err.msg, severity: 'error' }
+    })
+  })
+}
diff --git a/src/useStore.ts b/src/useStore.ts
index b20ed58b1..47b44803a 100644
--- a/src/useStore.ts
+++ b/src/useStore.ts
@@ -20,7 +20,7 @@ import {
   SourceRangeMap,
   EngineCommandManager,
 } from './lang/std/engineConnection'
-import { KCLError } from './lang/errors'
+import { KCLError, KCLUndefinedValueError } from './lang/errors'
 
 export type Selection = {
   type: 'default' | 'line-end' | 'line-mid'