diff --git a/package-lock.json b/package-lock.json
index 5020cfd..bbb8d1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2238,9 +2238,9 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
     "codemirror": {
-      "version": "5.31.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.31.0.tgz",
-      "integrity": "sha512-LKbMZKoAz7pMmWuSEl253G6yyloSulj1kXfvYv+3n3I8wMiI7QwnCHwKM3Zw5S9ItNV28Layq0/ihQXWmn9T9w=="
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.32.0.tgz",
+      "integrity": "sha512-95OxAlYiigW0g4n4ixFdavG07clJGILp3MvHh2pKR3FvyrTuHHvqtKSVbrV3/Jz6o0YqGvyCDLDTbH4h6ciaSw=="
     },
     "color": {
       "version": "2.0.1",
@@ -2629,16 +2629,6 @@
         "sha.js": "2.4.9"
       }
     },
-    "create-react-class": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz",
-      "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=",
-      "requires": {
-        "fbjs": "0.8.16",
-        "loose-envify": "1.3.1",
-        "object-assign": "4.1.1"
-      }
-    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -6719,11 +6709,6 @@
         "lodash._isiterateecall": "3.0.9"
       }
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
     "lodash.deburr": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-3.2.0.tgz",
@@ -9291,18 +9276,10 @@
         "prop-types": "15.6.0"
       }
     },
-    "react-codemirror": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-codemirror/-/react-codemirror-1.0.0.tgz",
-      "integrity": "sha1-kUZ7U7H12A2Rai/QtMetuFqQAbo=",
-      "requires": {
-        "classnames": "2.2.5",
-        "codemirror": "5.31.0",
-        "create-react-class": "15.6.2",
-        "lodash.debounce": "4.0.8",
-        "lodash.isequal": "4.5.0",
-        "prop-types": "15.6.0"
-      }
+    "react-codemirror2": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-3.0.7.tgz",
+      "integrity": "sha512-l0iUmKZxKmMAtr9x/6lcHgAMmUZIVufRd0YdTKIe6Y/4Fv4z+0nvaInPituRep/hpeG5WUoEVaZoIV7qEltfDg=="
     },
     "react-collapse": {
       "version": "4.0.3",
diff --git a/package.json b/package.json
index 06204f0..54efe69 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
     "@mapbox/mapbox-gl-style-spec": "^10.0.1",
     "classnames": "^2.2.5",
-    "codemirror": "^5.31.0",
+    "codemirror": "^5.32.0",
     "color": "^2.0.0",
     "file-saver": "^1.3.3",
     "github-api": "^3.0.0",
@@ -42,7 +42,7 @@
     "react": "16.0.0",
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-autocomplete": "^1.7.2",
-    "react-codemirror": "^1.0.0",
+    "react-codemirror2": "^3.0.7",
     "react-collapse": "^4.0.3",
     "react-color": "^2.13.8",
     "react-copy-to-clipboard": "^5.0.1",
diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 69b5d38..e4d3f10 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import CodeMirror from 'react-codemirror'
+import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -81,7 +81,7 @@ class JSONEditor extends React.Component {
 
     return <CodeMirror
       value={this.state.code}
-      onChange={this.onCodeUpdate.bind(this)}
+      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
       onFocusChange={focused => focused ? true : this.resetValue()}
       options={codeMirrorOptions}
     />