diff --git a/app/app.js b/app/app.js
index b47f6f4..35d850f 100644
--- a/app/app.js
+++ b/app/app.js
@@ -16,6 +16,7 @@ import withParams from './containers/withParams'
 import cache from './utils/cache'
 import { parseUrl } from './utils/utils'
 import fetcher from 'utils/fetcher'
+import DiffEditor from './components/DiffEditor'
 
 import 'app-classes.css'
 import 'app-tags.css'
@@ -56,6 +57,7 @@ class UserRoutes extends Component {
         <div>
           <div className='page'>
             <Switch>
+              <Route path='/:couch/:dbName/diff/:docId' component={withParams(DiffEditor)} />
               <Route path='/:couch/:dbName/:docId/editing' component={withParams(EditDocContainer)} />
               <Route exact path='/:couch/:dbName/query' component={withParams(QueryContainer)} />
               <Route exact path='/:couch/_node/couchdb@localhost/_config' component={withParams(DatabaseDocContainer)} />
diff --git a/app/components/DiffEditor.js b/app/components/DiffEditor.js
new file mode 100644
index 0000000..b756017
--- /dev/null
+++ b/app/components/DiffEditor.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+
+import { diff as DiffEditor } from 'react-ace'
+
+export default class extends Component {
+  render () {
+    const r1 = {
+      '_id': 'product:bcg:manufacturer:amgen:batchNo:037G5022',
+      '_rev': '3-f3545542389a1956ff15239c3188331a',
+      'type': 'batch',
+      'version': '1.0.0',
+      'createdAt': '2018-05-30T15:56:26.029Z',
+      'updatedAt': '2018-05-30T15:56:26.029Z',
+      'createdBy': 'VAN backend service',
+      'manufacturer': 'Amgen',
+      'productId': 'product:bcg',
+      'expiry': '2025-01-01T00:00:00.000Z'
+    }
+
+    const r2 = {
+      '_id': 'product:bcg:manufacturer:amgen:batchNo:037G5022',
+      '_rev': '3-f3545542389a1956ff15239c3188331a',
+      'type': 'batch',
+      'version': '1.5.0',
+      'createdAt': '2018-05-30T15:56:26.029Z',
+      'updatedAt': '2018-05-30T15:56:26.029Z',
+      'createdBy': 'VAN backend service',
+      'manufacturer': 'Amgen hygen',
+      'productId': 'product:bcg',
+      'expiry': '2025-01-01T00:00:00.000Z'
+    }
+
+    return <DiffEditor
+      value={[JSON.stringify(r1).toString(), JSON.stringify(r2).toString()]}
+      height='1000px'
+      width='1000px'
+      mode='text'
+    />
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 16e8b50..f23e371 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4057,6 +4057,7 @@
           "version": "0.0.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "inherits": "~2.0.0"
           }
@@ -4081,7 +4082,8 @@
         "buffer-shims": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "caseless": {
           "version": "0.12.0",
@@ -4098,12 +4100,14 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "combined-stream": {
           "version": "1.0.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "delayed-stream": "~1.0.0"
           }
@@ -4116,17 +4120,20 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "cryptiles": {
           "version": "2.0.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "boom": "2.x.x"
           }
@@ -4166,7 +4173,8 @@
         "delayed-stream": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "delegates": {
           "version": "1.0.0",
@@ -4198,7 +4206,8 @@
         "extsprintf": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "forever-agent": {
           "version": "0.6.1",
@@ -4321,6 +4330,7 @@
           "version": "3.1.3",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "boom": "2.x.x",
             "cryptiles": "2.x.x",
@@ -4368,6 +4378,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4381,7 +4392,8 @@
         "isarray": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "isstream": {
           "version": "0.1.2",
@@ -4454,12 +4466,14 @@
         "mime-db": {
           "version": "1.27.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mime-types": {
           "version": "2.1.15",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "mime-db": "~1.27.0"
           }
@@ -4535,7 +4549,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "oauth-sign": {
           "version": "0.8.2",
@@ -4593,7 +4608,8 @@
         "process-nextick-args": {
           "version": "1.0.7",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "punycode": {
           "version": "1.4.1",
@@ -4631,6 +4647,7 @@
           "version": "2.2.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "buffer-shims": "~1.0.0",
             "core-util-is": "~1.0.0",
@@ -4682,7 +4699,8 @@
         "safe-buffer": {
           "version": "5.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "semver": {
           "version": "5.3.0",
@@ -4706,6 +4724,7 @@
           "version": "1.0.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "hoek": "2.x.x"
           }
@@ -4739,6 +4758,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4749,6 +4769,7 @@
           "version": "1.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.0.1"
           }
@@ -4777,6 +4798,7 @@
           "version": "2.2.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "block-stream": "*",
             "fstream": "^1.0.2",
@@ -4832,7 +4854,8 @@
         "util-deprecate": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "uuid": {
           "version": "3.0.1",