diff --git a/app/addons/components/components/codeeditor.js b/app/addons/components/components/codeeditor.js
index ca7a9e3a9..7e37a0c6f 100644
--- a/app/addons/components/components/codeeditor.js
+++ b/app/addons/components/components/codeeditor.js
@@ -11,13 +11,20 @@
 // the License.
 import React from "react";
 import FauxtonAPI from "../../../core/api";
-import ace from "brace";
-import "brace/ext/searchbox";
+import AceEditor from "react-ace";
+import ace from 'ace-builds';
+import "ace-builds/src-min-noconflict/ext-searchbox";
 import {StringEditModal} from './stringeditmodal';
+import 'ace-builds/css/theme/idle_fingers.css';
+import 'ace-builds/css/ace.css';
+// importing the webpack resolver enables dynamically loading modes, which is required for syntax checking
+import 'ace-builds/webpack-resolver';
 
-require('brace/mode/javascript');
-require('brace/mode/json');
-require('brace/theme/idle_fingers');
+require('ace-builds/src-noconflict/mode-javascript');
+require('ace-builds/src-noconflict/mode-json');
+require('ace-builds/src-noconflict/theme-idle_fingers');
+
+ace.config.set("useStrictCSP", true);
 
 export class CodeEditor extends React.Component {
   static defaultProps = {
@@ -88,17 +95,12 @@ export class CodeEditor extends React.Component {
       }
     );
 
-    // suppresses an Ace editor error
-    this.editor.$blockScrolling = Infinity;
-
     if (shouldUpdateCode) {
       this.setValue(props.defaultCode);
     }
 
-    this.editor.setShowPrintMargin(props.showPrintMargin);
     this.editor.autoScrollEditorIntoView = props.autoScrollEditorIntoView;
 
-    this.editor.setOption('highlightActiveLine', this.props.highlightActiveLine);
 
     if (this.props.setHeightToLineCount) {
       this.setHeightToLineCount();
@@ -109,16 +111,6 @@ export class CodeEditor extends React.Component {
     }
 
     this.addCommands();
-    this.editor.getSession().setMode('ace/mode/' + props.mode);
-    this.editor.setTheme('ace/theme/' + props.theme);
-    this.editor.setFontSize(props.fontSize);
-    this.editor.getSession().setTabSize(2);
-    this.editor.getSession().setUseSoftTabs(true);
-
-    if (this.props.autoFocus) {
-      this.editor.focus();
-    }
-    this.editor.setReadOnly(props.disabled);
   };
 
   addCommands = () => {
@@ -128,8 +120,6 @@ export class CodeEditor extends React.Component {
   };
 
   setupEvents = () => {
-    this.editor.on('blur', _.bind(this.onBlur, this));
-    this.editor.on('change', _.bind(this.onContentChange, this));
 
     if (this.props.stringEditModalEnabled) {
       this.editor.on('changeSelection', _.bind(this.showHideEditStringGutterIcon, this));
@@ -179,10 +169,6 @@ export class CodeEditor extends React.Component {
   componentDidMount() {
     this.setupAce(this.props, true);
     this.setupEvents();
-
-    if (this.props.autoFocus) {
-      this.editor.focus();
-    }
   }
 
   componentWillUnmount() {
@@ -357,10 +343,35 @@ export class CodeEditor extends React.Component {
     this.editor.getSelection().moveCursorUp();
   };
 
+  onAceLoad = (ace) => {
+    this.ace = ace;
+  };
+
   render() {
     return (
       <div>
-        <div ref={node => this.ace = node} className="js-editor" id={this.props.id}></div>
+        <AceEditor
+          name={this.props.id}
+          className="js-editor"
+          mode={this.props.mode}
+          theme={this.props.theme}
+          onLoad={_.bind(this.onAceLoad, this)}
+          onBlur={_.bind(this.onBlur, this)}
+          onChange={_.bind(this.onContentChange, this)}
+          editorProps={{
+            $blockScrolling: Infinity,
+            useSoftTabs: true
+          }}
+          readOnly={this.disabled}
+          showPrintMargin={this.props.showPrintMargin}
+          highlightActiveLine={this.props.highlightActiveLine}
+          width="100%"
+          height="100%"
+          tabSize={2}
+          fontSize={this.props.fontSize}
+          focus={this.props.autoFocus}
+          setOptions={{
+          }}/>
         <button ref={node => this.stringEditIcon = node}
           className="btn string-edit"
           title="Edit string"
diff --git a/app/addons/components/components/stringeditmodal.js b/app/addons/components/components/stringeditmodal.js
index df5877d06..d92dbc0cb 100644
--- a/app/addons/components/components/stringeditmodal.js
+++ b/app/addons/components/components/stringeditmodal.js
@@ -15,11 +15,11 @@ import PropTypes from 'prop-types';
 import React from "react";
 import ReactDOM from "react-dom";
 import {Modal} from "react-bootstrap";
-import ace from "brace";
+import ace from "ace-builds";
 import Helpers from "../../documents/helpers";
-require('brace/mode/javascript');
-require('brace/mode/json');
-require('brace/theme/idle_fingers');
+require('ace-builds/src-min-noconflict/mode-javascript');
+require('ace-builds/src-min-noconflict/mode-json');
+require('ace-builds/src-noconflict/theme-idle_fingers');
 
 // this appears when the cursor is over a string. It shows an icon in the gutter that opens the modal.
 export class StringEditModal extends React.Component {
diff --git a/app/addons/components/components/zenmodeoverlay.js b/app/addons/components/components/zenmodeoverlay.js
index dceb24ccd..3001fe690 100644
--- a/app/addons/components/components/zenmodeoverlay.js
+++ b/app/addons/components/components/zenmodeoverlay.js
@@ -15,7 +15,8 @@ import app from "../../../app";
 import {CodeEditor} from './codeeditor';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
-require('brace/theme/dawn');
+require('ace-builds/src-min-noconflict/theme-dawn');
+import 'ace-builds/css/theme/dawn.css';
 
 const themes = {
   dark: 'idle_fingers',
diff --git a/app/addons/documents/rev-browser/components/splitscreenarea.js b/app/addons/documents/rev-browser/components/splitscreenarea.js
index b848d66c3..c83526c84 100644
--- a/app/addons/documents/rev-browser/components/splitscreenarea.js
+++ b/app/addons/documents/rev-browser/components/splitscreenarea.js
@@ -12,16 +12,13 @@
 
 import React from 'react';
 import ReactDOM from "react-dom";
-import ace from "brace";
 
-require('brace/ext/static_highlight');
-const highlight = ace.acequire('ace/ext/static_highlight');
+const highlight  = require('ace-builds/src-min-noconflict/ext-static_highlight');
 
-require('brace/mode/json');
-const JavaScriptMode = ace.acequire('ace/mode/json').Mode;
+require('ace-builds/src-min-noconflict/mode-json');
+const JSONMode = require('ace-builds/src-min-noconflict/mode-json').Mode;
 
-require('brace/theme/idle_fingers');
-const theme = ace.acequire('ace/theme/idle_fingers');
+const theme = require('ace-builds/src-noconflict/theme-idle_fingers');
 
 export default class SplitScreenArea extends React.Component {
 
@@ -40,13 +37,13 @@ export default class SplitScreenArea extends React.Component {
   hightlightAfterRender () {
     const format = (input) => { return JSON.stringify(input, null, '  '); };
 
-    const jsmode = new JavaScriptMode();
+    const jsonMode = new JSONMode();
     const left = this.revLeftOurs;
     const right = this.revRightTheirs;
 
-    const leftRes = highlight.render(format(this.props.ours), jsmode, theme, 0, true);
+    const leftRes = highlight.render(format(this.props.ours), jsonMode, theme, 0, true);
     left.innerHTML = leftRes.html;
-    const rightRes = highlight.render(format(this.props.theirs), jsmode, theme, 0, true);
+    const rightRes = highlight.render(format(this.props.theirs), jsonMode, theme, 0, true);
     right.innerHTML = rightRes.html;
   }
 
diff --git a/jest-config.json b/jest-config.json
index b133b1ef8..c064380d4 100644
--- a/jest-config.json
+++ b/jest-config.json
@@ -7,6 +7,7 @@
 
   "moduleNameMapper": {
     "underscore": "lodash",
+    "ace-builds": "<rootDir>/node_modules/ace-builds",
 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|swf|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
diff --git a/package-lock.json b/package-lock.json
index d10512a79..04646216c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3620,6 +3620,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz",
+      "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ=="
+    },
     "acorn": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
@@ -4616,11 +4621,6 @@
       "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==",
       "dev": true
     },
-    "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",
@@ -11291,6 +11291,11 @@
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -11306,8 +11311,7 @@
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
-      "dev": true
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
     },
     "lodash.isplainobject": {
       "version": "4.0.6",
@@ -14026,6 +14030,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.5.0.tgz",
+      "integrity": "sha512-4l5FgwGh6K7A0yWVMQlPIXDItM4Q9zzXRqOae8KkCl6MkOob7sC1CzHxZdOGvV+QioKWbX2p5HcdOVUv6cAdSg==",
+      "requires": {
+        "ace-builds": "^1.4.13",
+        "diff-match-patch": "^1.0.5",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-bootstrap": {
       "version": "0.31.5",
       "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.31.5.tgz",
diff --git a/package.json b/package.json
index abd1550ea..fa2a86d02 100644
--- a/package.json
+++ b/package.json
@@ -63,13 +63,13 @@
   },
   "dependencies": {
     "@webcomponents/url": "^0.7.8",
+    "ace-builds": "^1.4.13",
     "acorn": "^6.4.2",
     "ajv": "^6.12.6",
     "async": "~0.2.6",
     "backbone": "^1.4.0",
     "base-64": "^1.0.0",
     "bluebird": "^3.7.2",
-    "brace": "^0.11.0",
     "classnames": "^2.2.6",
     "clean-css": "^4.2.4",
     "clipboard": "^2.0.8",
@@ -88,6 +88,7 @@
     "prop-types": "^15.8.1",
     "rc-slider": "^9.7.5",
     "react": "^16.14.0",
+    "react-ace": "^9.5.0",
     "react-bootstrap": "^0.31.3",
     "react-dom": "^16.14.0",
     "react-motion": "^0.5.0",