diff --git a/docs/Diff.md b/docs/Diff.md
new file mode 100644
index 00000000..246a83b2
--- /dev/null
+++ b/docs/Diff.md
@@ -0,0 +1,56 @@
+# Diff Editor
+
+The diff editor is contained in a Split editor and will highlight differences between the two editor boxes.
+
+## Demo
+
+## Example Code
+
+```import React, { Component } from 'react';
+ import { render } from 'react-dom';
+ import DiffEditor from '../src/diff.js';
+
+ import 'brace/mode/jsx';
+
+ render(
+
+ );
+ ```
+
+ ## Available Props
+
+ |Prop|Default|Type|Description|
+ |-----|------|----|-----------|
+ |cursorStart| 1| Number| the location of the cursor
+ |editorProps| | Object | properties to apply directly to the Ace editor instance|
+ |enableBasicAutocompletion| false| Boolean | Enable basic autocompletion|
+ |enableLiveAutocompletion| false| Boolean | Enable live autocompletion|
+ |focus|false|Boolean|Whether to focus|
+ |fontSize| 12| Number |pixel value for font-size|
+ |height| '500px'| String |CSS value for height|
+ |highlightActiveLine| true| Boolean| highlight active line|
+ |maxLines| | Number |Maximum number of lines to be displayed|
+ |minLines| | Number |Minimum number of lines to be displayed|
+ |mode|''|String|The language to be used for the editor (Java, Javascript, Ruby, etc.)|
+ |name|'brace-editor'|string|Unique ID to be used for the split editor|
+ |onLoad| | Function | called on editor load. The first argument is the instance of the editor |
+ |onScroll| | Function | triggered by editor `scroll` event|
+ |onPaste| | Function | Triggered by editor `paste` event, and passes text as argument|
+ |orientation|'beside'|String|The orientation of splits either 'beside' or 'below'|
+ |readOnly| false| Boolean| make the editor read only |
+ |scrollMargin|[0, 0, 0, 0]|Array of Numbers|Sets the scroll margins|
+ |setOptions| | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance|
+ |showGutter| true| Boolean | show gutter |
+ |showPrintMargin| true| Boolean| show print margin |
+ |style| | Object | camelCased properties |
+ |tabSize|4|Number|Number of spaces to include as tab|
+ |theme|'github'|String|Theme to use|
+ |value|['','']|Array of Strings|Index 0: Value of first editor. Index 1: Value of second editor|
+ |width| '500px'| String |CSS value for width|
+ |wrapEnabled|true|Boolean|Whether lines wrap on the editor
+
diff --git a/example/diff.css b/example/diff.css
new file mode 100644
index 00000000..6f6a3fff
--- /dev/null
+++ b/example/diff.css
@@ -0,0 +1,5 @@
+.codeMarker {
+ background: #FFF677;
+ position:absolute;
+ z-index:20
+}
diff --git a/example/diff.html b/example/diff.html
new file mode 100644
index 00000000..21f8dfbc
--- /dev/null
+++ b/example/diff.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Diff Editor
+
+
+
+
+
+
React-Ace: Diff Example
+
+
+
+
+
+
diff --git a/example/diff.js b/example/diff.js
new file mode 100644
index 00000000..74647274
--- /dev/null
+++ b/example/diff.js
@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import DiffEditor from '../src/diff.js';
+
+import 'brace/mode/jsx';
+import 'brace/ext/searchbox';
+
+const defaultValue = [
+ `// Use this tool to display differences in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.`,
+ `// Use this too to show difference in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.
+// The diff highlighting style can be altered in CSS.
+`
+];
+
+const languages = [
+ 'javascript',
+ 'java',
+ 'python',
+ 'xml',
+ 'ruby',
+ 'sass',
+ 'markdown',
+ 'mysql',
+ 'json',
+ 'html',
+ 'handlebars',
+ 'golang',
+ 'csharp',
+ 'elixir',
+ 'typescript',
+ 'css'
+];
+
+languages.forEach((lang) => {
+ require(`brace/mode/${lang}`)
+ require(`brace/snippets/${lang}`)
+})
+
+class App extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: defaultValue,
+ fontSize: 14,
+ markers: {},
+ mode: 'javascript',
+ };
+ this.onChange = this.onChange.bind(this);
+ this.setMode = this.setMode.bind(this);
+ }
+
+ onChange(newValue) {
+ this.setState({
+ value: newValue
+ });
+ }
+
+ setMode(e) {
+ this.setState({
+ mode: e.target.value
+ });
+ }
+
+ render() {
+ return (
+