diff --git a/README.md b/README.md
index 3fb7c91b..ff292cad 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ class Diff extends PureComponent {
 |newValue          |`string`       |`''`          |New value as string.                          |
 |splitView         |`boolean`      |`true`        |Switch between `unified` and `split` view.    |
 |disableWordDiff   |`boolean`      |`false`       |Show and hide word diff in a diff line.       |
+|useCharDiff       |`boolean`      |`true`        |Use char-based diff by default.               |
 |hideLineNumbers   |`boolean`      |`false`       |Show and hide line numbers.                   |
 |renderContent     |`function`     |`undefined`   |Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)   |
 |onLineNumberClick |`function`     |`undefined`   |Event handler for line number click. `(lineId: string) => void`          |
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
index 56ae650e..65284f7a 100644
--- a/examples/src/index.tsx
+++ b/examples/src/index.tsx
@@ -19,6 +19,7 @@ interface ExampleState {
   highlightLine?: string[];
   language?: string;
   enableSyntaxHighlighting?: boolean;
+  useCharDiff?: boolean;
 }
 
 const P = (window as any).Prism;
@@ -31,6 +32,7 @@ class Example extends React.Component<{}, ExampleState> {
       highlightLine: [],
       language: 'javascript',
       enableSyntaxHighlighting: true,
+      useCharDiff: true,
     };
   }
 
@@ -200,6 +202,33 @@ class Example extends React.Component<{}, ExampleState> {
             }
           />
         </div>
+        <div className="controls">
+          <span>Char / word diffs:</span>
+          <span>
+            <label>
+              <input
+                type="checkbox"
+                name="toggle-2"
+                id="toggle-2"
+                onChange={(e) => this.setState({ useCharDiff: e.target.checked })}
+                checked={this.state.useCharDiff}
+              />{' '}
+              Use char diff
+            </label>
+          </span>
+        </div>
+        <div className="diff-viewer">
+          <ReactDiff
+            highlightLines={this.state.highlightLine}
+            splitView={true}
+            useCharDiff={this.state.useCharDiff}
+            oldValue="This is a test"
+            newValue="That is a toast"
+            renderContent={
+              this.state.enableSyntaxHighlighting && this.syntaxHighlight
+            }
+          />
+        </div>
         <footer>
           Made with 💓 by{' '}
           <a href="https://praneshravi.in" target="_blank">
diff --git a/src/compute-lines.ts b/src/compute-lines.ts
index e6a32c7e..150cad07 100644
--- a/src/compute-lines.ts
+++ b/src/compute-lines.ts
@@ -64,9 +64,9 @@ const constructLines = (value: string): string[] => {
  * @param oldValue Old word in the line.
  * @param newValue New word in the line.
  */
-const computeWordDiff = (oldValue: string, newValue: string): WordDiffInformation => {
+const computeDiff = (oldValue: string, newValue: string, useCharDiff: boolean): WordDiffInformation => {
   const diffArray = diff
-    .diffChars(oldValue, newValue);
+    [useCharDiff ? 'diffChars' : 'diffWords'](oldValue, newValue);
   const wordDiff: WordDiffInformation = {
     left: [],
     right: [],
@@ -106,11 +106,13 @@ const computeWordDiff = (oldValue: string, newValue: string): WordDiffInformatio
  * @param oldString Old string to compare.
  * @param newString New string to compare with old string.
  * @param disableWordDiff Flag to enable/disable word diff.
+ * @param useCharDiff Flag to use.
  */
 const computeLineInformation = (
   oldString: string,
   newString: string,
   disableWordDiff: boolean = false,
+  useCharDiff: boolean = true,
 ): ComputedLineInformation => {
   const diffArray = diff.diffLines(
     oldString.trimRight(),
@@ -172,9 +174,9 @@ const computeLineInformation = (
             if (disableWordDiff) {
               right.value = rightValue;
             } else {
-              const wordDiff = computeWordDiff(line, rightValue as string);
-              right.value = wordDiff.right;
-              left.value = wordDiff.left;
+              const computedDiff = computeDiff(line, rightValue as string, useCharDiff);
+              right.value = computedDiff.right;
+              left.value = computedDiff.left;
             }
           }
         } else {
diff --git a/src/index.tsx b/src/index.tsx
index d7d25974..55bd2f08 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -52,6 +52,8 @@ export interface ReactDiffViewerProps {
   highlightLines?: string[];
   // Style overrides.
   styles?: ReactDiffViewerStylesOverride;
+  // Use char or word diff, true by default.
+  useCharDiff?: boolean;
 }
 
 export interface ReactDiffViewerState {
@@ -72,6 +74,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     hideLineNumbers: false,
     extraLinesSurroundingDiff: 3,
     showDiffOnly: true,
+    useCharDiff: true,
   };
 
   public static propTypes = {
@@ -425,6 +428,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
       oldValue,
       newValue,
       this.props.disableWordDiff,
+      this.props.useCharDiff,
     );
     const extraLines = this.props.extraLinesSurroundingDiff < 0
       ? 0
diff --git a/test/compute-lines-test.ts b/test/compute-lines-test.ts
index a14f280a..880e64fb 100644
--- a/test/compute-lines-test.ts
+++ b/test/compute-lines-test.ts
@@ -135,13 +135,11 @@ describe('Testing compute lines utils', (): void => {
       });
   });
 
-  it('Should identify word diff', (): void => {
-    const oldCode = `test
-    oldLine`;
-    const newCode = `test
-    newLine`;
+  it('Should use a char diff', (): void => {
+    const oldCode = `test\noldLine`;
+    const newCode = `test\nnewLine`;
 
-    expect(computeLineInformation(oldCode, newCode))
+    expect(computeLineInformation(oldCode, newCode, false, true))
       .toMatchObject({
         lineInformation: [
           {
@@ -161,10 +159,6 @@ describe('Testing compute lines utils', (): void => {
               lineNumber: 2,
               type: 1,
               value: [
-                {
-                  type: 0,
-                  value: '    ',
-                },
                 {
                   type: 1,
                   value: 'new',
@@ -179,10 +173,6 @@ describe('Testing compute lines utils', (): void => {
               lineNumber: 2,
               type: 2,
               value: [
-                {
-                  type: 0,
-                  value: '    ',
-                },
                 {
                   type: 2,
                   value: 'old',
@@ -198,4 +188,52 @@ describe('Testing compute lines utils', (): void => {
         diffLines: [1],
       });
   });
+
+  it('Should use a word diff', (): void => {
+    const oldCode = `test\noldLine`;
+    const newCode = `test\nnewLine`;
+
+    expect(computeLineInformation(oldCode, newCode, false, false))
+      .toMatchObject({
+        "diffLines": [
+          1,
+        ],
+        "lineInformation": [
+          {
+            "left": {
+              "lineNumber": 1,
+              "type": 0,
+              "value": "test",
+            },
+            "right": {
+              "lineNumber": 1,
+              "type": 0,
+              "value": "test",
+            },
+          },
+          {
+            "left": {
+              "lineNumber": 2,
+              "type": 2,
+              "value": [
+                {
+                  "type": 2,
+                  "value": "oldLine",
+                },
+              ],
+            },
+            "right": {
+              "lineNumber": 2,
+              "type": 1,
+              "value": [
+                {
+                  "type": 1,
+                  "value": "newLine",
+                },
+              ],
+            },
+          },
+        ],
+      });
+  });
 });