diff --git a/package-lock.json b/package-lock.json
index d7a18bf..29761c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "bootstrap": "^4.5.3",
-        "brace": "^0.11.1",
         "react": "^16.0.0",
-        "react-ace": "^7.0.5",
+        "react-ace": "^10.1.0",
         "react-dom": "^16.0.0",
         "react-fontawesome": "^1.7.1",
         "react-icons": "^4.1.0",
@@ -4402,6 +4401,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.31.1.tgz",
+      "integrity": "sha512-3DnE5bZF6Ji+l4F5acoLk+rV7mxrUt1C4r61Xy9owp5rVM4lj5NL8GJfoX6Jnnbhx6kKV7Vdpb+Tco+0ORTvhg=="
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -5326,11 +5330,6 @@
         "popper.js": "^1.16.1"
       }
     },
-    "node_modules/brace": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
-      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14242,19 +14241,19 @@
       }
     },
     "node_modules/react-ace": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.5.tgz",
-      "integrity": "sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz",
+      "integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==",
       "dependencies": {
-        "brace": "^0.11.1",
-        "diff-match-patch": "^1.0.4",
+        "ace-builds": "^1.4.14",
+        "diff-match-patch": "^1.0.5",
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.5.0",
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0",
-        "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0"
+        "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-app-polyfill": {
@@ -20779,6 +20778,11 @@
         "negotiator": "0.6.3"
       }
     },
+    "ace-builds": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.31.1.tgz",
+      "integrity": "sha512-3DnE5bZF6Ji+l4F5acoLk+rV7mxrUt1C4r61Xy9owp5rVM4lj5NL8GJfoX6Jnnbhx6kKV7Vdpb+Tco+0ORTvhg=="
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -21476,11 +21480,6 @@
       "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
       "requires": {}
     },
-    "brace": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
-      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -27714,12 +27713,12 @@
       }
     },
     "react-ace": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.5.tgz",
-      "integrity": "sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz",
+      "integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==",
       "requires": {
-        "brace": "^0.11.1",
-        "diff-match-patch": "^1.0.4",
+        "ace-builds": "^1.4.14",
+        "diff-match-patch": "^1.0.5",
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.5.0",
         "prop-types": "^15.7.2"
diff --git a/package.json b/package.json
index 0cc3204..681ca92 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,8 @@
   "homepage": "https://flix.dev/",
   "dependencies": {
     "bootstrap": "^4.5.3",
-    "brace": "^0.11.1",
     "react": "^16.0.0",
-    "react-ace": "^7.0.5",
+    "react-ace": "^10.1.0",
     "react-dom": "^16.0.0",
     "react-fontawesome": "^1.7.1",
     "react-icons": "^4.1.0",
diff --git a/src/util/Editor.js b/src/util/Editor.js
index fd8816a..c7f0ec7 100644
--- a/src/util/Editor.js
+++ b/src/util/Editor.js
@@ -1,16 +1,10 @@
 import React, {Component} from 'react';
 import AceEditor from 'react-ace'
-import 'brace/mode/scala'
 
-import FlixMode from './FlixMode'
-import 'brace/theme/chrome';
+import 'ace-builds/src-noconflict/mode-flix'
+import 'ace-builds/src-noconflict/theme-chrome'
 
 class Editor extends Component {
-    componentDidMount() {
-        let customMode = new FlixMode();
-        this.refs.aceEditor.editor.getSession().setMode(customMode);
-    }
-
     onChange(input) {
         this.props.notifyTextChanged(input)
     };
@@ -18,7 +12,7 @@ class Editor extends Component {
     render() {
         return (
             <AceEditor width="100%"
-                mode='text'
+                mode='flix'
                 theme='chrome'
                 ref="aceEditor"
                 showGutter={false}
diff --git a/src/util/FlixMode.js b/src/util/FlixMode.js
deleted file mode 100644
index 7d0ec39..0000000
--- a/src/util/FlixMode.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import 'brace/mode/java';
-
-export class CustomHighlightRules extends window.ace.acequire("ace/mode/text_highlight_rules").TextHighlightRules {
-    constructor() {
-        super();
-
-        var keywords = (
-            "namespace|def|case|enum|opaque|type|alias|rel|lat|use|null|ref|deref|if|else|let|let*|new|as|get|set|import|match|match?|select|spawn|???|solve|project|fold|query|instance|class|with|from|into|static"
-        );
-
-        var builtinConstants = (
-            "true|false|Nil"
-        );
-
-        var builtinFunctions = (
-            "avg"
-        );
-
-        var dataTypes = (
-            "Unit|Bool|Char|Float32|Float64|Int|Int8|Int16|Int32|Int64|BigInt|String|Array|Channel|Ref|true|false|not|and|or|Pure|Impure"
-        );
-
-        var keywordMapper = this.createKeywordMapper({
-            "support.function": builtinFunctions,
-            "keyword": keywords,
-            "constant.language": builtinConstants,
-            "storage.type": dataTypes
-        }, "identifier", true);
-
-        this.$rules = {
-            "start" : [ {
-                token : "comment",
-                regex : "\\/\\/.*$"
-            },  {
-                token : "comment",
-                start : "/\\*",
-                end : "\\*/"
-            }, {
-                token : "string",           // " string
-                regex : '".*?"'
-            }, {
-                token : "string",           // ' string
-                regex : "'.*?'"
-            }, {
-                token : "string",           // ` string (apache drill)
-                regex : "`.*?`"
-            }, {
-                token : "constant.numeric", // float
-                regex : "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
-            }, {
-                token : keywordMapper,
-                regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
-            }, {
-                token : "keyword.operator",
-                regex : "\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="
-            }, {
-                token : "paren.lparen",
-                regex : "[\\(]"
-            }, {
-                token : "paren.rparen",
-                regex : "[\\)]"
-            }, {
-                token : "text",
-                regex : "\\s+"
-            } ]
-        };
-        this.normalizeRules();
-    }
-}
-
-export default class FlixMode extends window.ace.acequire('ace/mode/java').Mode {
-    constructor() {
-        super();
-        this.HighlightRules = CustomHighlightRules;
-    }
-}
-
diff --git a/src/util/InlineEditor.js b/src/util/InlineEditor.js
index c067512..62bdc18 100644
--- a/src/util/InlineEditor.js
+++ b/src/util/InlineEditor.js
@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import AceEditor from 'react-ace'
-import 'brace/mode/scala'
 
-import FlixMode from './FlixMode'
-import 'brace/theme/chrome';
+import 'ace-builds/src-noconflict/mode-flix'
+import 'ace-builds/src-noconflict/theme-chrome'
 
 class InlineEditor extends Component {
     constructor(props) {
@@ -17,18 +16,13 @@ class InlineEditor extends Component {
         }
     }
 
-    componentDidMount() {
-        const customMode = new FlixMode();
-        this.refs.aceEditor.editor.getSession().setMode(customMode);
-    }
-
     render() {
         return (
             <div className="inline-editor-frame">
                 <div className="inline-editor-code">
                     <AceEditor
                         style={{"background": "inherit", "width": "95%"}}
-                        mode='text'
+                        mode='flix'
                         theme='chrome'
                         ref="aceEditor"
                         readOnly={true}