diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9793011ca4f..c5bc3419ba4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added icons to match Kibana's app directory [(#162)](https://github.com/elastic/eui/pull/162)
 - Convert icons from SVG to React component during the build and stop using
   sprites [(#160)](https://github.com/elastic/eui/pull/160)
+- Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/code_editor/code_editor_example.js b/src-docs/src/views/code_editor/code_editor_example.js
index 66a35f7a9d8..bf68115b17a 100644
--- a/src-docs/src/views/code_editor/code_editor_example.js
+++ b/src-docs/src/views/code_editor/code_editor_example.js
@@ -16,6 +16,10 @@ import CodeEditor from './code_editor';
 const codeEditorSource = require('!!raw-loader!./code_editor');
 const codeEditorHtml = renderToHtml(CodeEditor);
 
+import ReadOnly from './read_only';
+const readOnlySource = require('!!raw-loader!./read_only');
+const readOnlyrHtml = renderToHtml(ReadOnly);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -44,6 +48,20 @@ export default props => (
         <CodeEditor />
       }
     />
+
+    <GuideSection
+      title="Read-only"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: readOnlySource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: readOnlyrHtml,
+      }]}
+      demo={
+        <ReadOnly />
+      }
+    />
   </GuidePage>
 );
 
diff --git a/src-docs/src/views/code_editor/read_only.js b/src-docs/src/views/code_editor/read_only.js
new file mode 100644
index 00000000000..6a3cefcc5d6
--- /dev/null
+++ b/src-docs/src/views/code_editor/read_only.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import 'brace/mode/less';
+import 'brace/theme/github';
+
+import {
+  EuiCodeEditor,
+} from '../../../../src/components';
+
+export default class extends Component {
+  state = {
+    value: '<p>This code is read only</p>'
+  };
+
+  render() {
+    return (
+      <EuiCodeEditor
+        mode="less"
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        setOptions={{ fontSize: '14px' }}
+        isReadOnly
+      />
+    );
+  }
+}
diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
index 2fd2cf4f1b5..865da505adc 100644
--- a/src/components/code_editor/__snapshots__/code_editor.test.js.snap
+++ b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -1,27 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiCodeEditor hint element should be disabled when the ui ace box gains focus 1`] = `
+exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
 <div
-  class="euiCodeEditorKeyboardHint euiCodeEditorKeyboardHint-isInactive"
+  class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
   id="42"
   role="button"
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
 
-exports[`EuiCodeEditor hint element should be enabled when the ui ace box loses focus 1`] = `
+exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -30,19 +34,23 @@ exports[`EuiCodeEditor hint element should be enabled when the ui ace box loses
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
 
-exports[`EuiCodeEditor hint element should be tabable 1`] = `
+exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -51,14 +59,18 @@ exports[`EuiCodeEditor hint element should be tabable 1`] = `
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
@@ -75,12 +87,12 @@ exports[`EuiCodeEditor is rendered 1`] = `
     tabindex="0"
   >
     <p
-      class="euiText euiVerticalRhythmSmall"
+      class="euiText"
     >
       Press Enter to start editing.
     </p>
     <p
-      class="euiText euiVerticalRhythmSmall"
+      class="euiText"
     >
       When you’re done, press Escape to stop editing.
     </p>
@@ -175,3 +187,117 @@ exports[`EuiCodeEditor is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+>
+  <div
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="42"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start interacting with the code.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you’re done, press Escape to stop interacting with the code.
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+        style="display: none;"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/code_editor/_code_editor.scss b/src/components/code_editor/_code_editor.scss
index 4cf2f0fb6a5..b9955f58c29 100644
--- a/src/components/code_editor/_code_editor.scss
+++ b/src/components/code_editor/_code_editor.scss
@@ -1,5 +1,15 @@
 .euiCodeEditorWrapper {
   position: relative;
+
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  &.euiCodeEditorWrapper-isEditing {
+    .ace_hidden-cursors {
+      opacity: 1;
+    }
+  }
 }
 
 .euiCodeEditorKeyboardHint {
diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js
index 598958bc1d1..7541ff5dfdd 100644
--- a/src/components/code_editor/code_editor.js
+++ b/src/components/code_editor/code_editor.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import AceEditor from 'react-ace';
 
-import { EuiKeyboardAccessible } from '..';
 import { htmlIdGenerator, keyCodes } from '../../services';
 
 export class EuiCodeEditor extends Component {
 
   state = {
-    isHintActive: true
+    isHintActive: true,
+    isEditing: false,
   };
 
   idGenerator = htmlIdGenerator();
@@ -31,6 +31,15 @@ export class EuiCodeEditor extends Component {
     }
   }
 
+  onFocusAce = (...args) => {
+    this.setState({
+      isEditing: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(...args);
+    }
+  }
+
   onBlurAce = (...args) => {
     this.stopEditing();
     if (this.props.onBlur) {
@@ -38,13 +47,25 @@ export class EuiCodeEditor extends Component {
     }
   };
 
+  onKeyDownHint = (ev) => {
+    if (ev.keyCode === keyCodes.ENTER) {
+      ev.preventDefault();
+      this.startEditing();
+    }
+  };
+
   startEditing = () => {
-    this.setState({ isHintActive: false });
+    this.setState({
+      isHintActive: false,
+    });
     this.aceEditor.editor.textInput.focus();
   }
 
   stopEditing() {
-    this.setState({ isHintActive: true });
+    this.setState({
+      isHintActive: true,
+      isEditing: false,
+    });
   }
 
   render() {
@@ -52,41 +73,80 @@ export class EuiCodeEditor extends Component {
       width,
       height,
       onBlur, // eslint-disable-line no-unused-vars
+      isReadOnly,
+      setOptions,
+      cursorStart,
       ...rest
     } = this.props;
 
-    const classes = classNames('euiCodeEditorKeyboardHint', {
-      'euiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive
+    const classes = classNames('euiCodeEditorWrapper', {
+      'euiCodeEditorWrapper-isEditing': this.state.isEditing,
     });
 
+    const promptClasses = classNames('euiCodeEditorKeyboardHint', {
+      'euiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive,
+    });
+
+    let filteredCursorStart;
+
+    const options = { ...setOptions };
+
+    if (isReadOnly) {
+      // Put the cursor at the beginning of the editor, so that it doesn't look like
+      // a prompt to begin typing.
+      filteredCursorStart = -1;
+
+      Object.assign(options, {
+        readOnly: true,
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+      });
+    } else {
+      filteredCursorStart = cursorStart;
+    }
+
+    const activity = isReadOnly
+      ? 'interacting with the code'
+      : 'editing';
+
+
+    // Don't use EuiKeyboardAccessible here because it doesn't play nicely with onKeyDown.
+    const prompt = (
+      <div
+        className={promptClasses}
+        id={this.idGenerator('codeEditor')}
+        ref={(hint) => { this.editorHint = hint; }}
+        tabIndex="0"
+        role="button"
+        onClick={this.startEditing}
+        onKeyDown={this.onKeyDownHint}
+        data-test-subj="codeEditorHint"
+      >
+        <p className="euiText">
+          Press Enter to start {activity}.
+        </p>
+
+        <p className="euiText">
+          When you&rsquo;re done, press Escape to stop {activity}.
+        </p>
+      </div>
+    );
+
     return (
       <div
-        className="euiCodeEditorWrapper"
+        className={classes}
         style={{ width, height }}
       >
-        <EuiKeyboardAccessible>
-          <div
-            className={classes}
-            id={this.idGenerator('codeEditor')}
-            ref={(hint) => { this.editorHint = hint; }}
-            onClick={this.startEditing}
-            data-test-subj="codeEditorHint"
-          >
-            <p className="euiText euiVerticalRhythmSmall">
-              Press Enter to start editing.
-            </p>
-
-            <p className="euiText euiVerticalRhythmSmall">
-              When you&rsquo;re done, press Escape to stop editing.
-            </p>
-          </div>
-        </EuiKeyboardAccessible>
+        {prompt}
 
         <AceEditor
           ref={this.aceEditorRef}
           width={width}
           height={height}
+          onFocus={this.onFocusAce}
           onBlur={this.onBlurAce}
+          setOptions={options}
+          cursorStart={filteredCursorStart}
           {...rest}
         />
       </div>
@@ -98,4 +158,11 @@ EuiCodeEditor.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   onBlur: PropTypes.func,
+  isReadOnly: PropTypes.bool,
+  setOptions: PropTypes.object,
+  cursorStart: PropTypes.number,
+};
+
+EuiCodeEditor.defaultProps = {
+  setOptions: {},
 };
diff --git a/src/components/code_editor/code_editor.test.js b/src/components/code_editor/code_editor.test.js
index 513d43e6716..bbbe91367d2 100644
--- a/src/components/code_editor/code_editor.test.js
+++ b/src/components/code_editor/code_editor.test.js
@@ -15,53 +15,64 @@ jest.mock('../../services/accessibility/html_id_generator', () => ({
 }));
 
 describe('EuiCodeEditor', () => {
-  let element;
-
-  beforeEach(() => {
-    element = mount(<EuiCodeEditor/>);
-  });
-
   test('is rendered', () => {
-    const component = mount(<EuiCodeEditor {...requiredProps}/>);
+    const component = mount(<EuiCodeEditor {...requiredProps} />);
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
 
-  describe('hint element', () => {
-    test('should be tabable', () => {
-      const hint = findTestSubject(element, 'codeEditorHint');
-      expect(hint).toMatchSnapshot();
+  describe('props', () => {
+    describe('isReadOnly', () => {
+      test(`renders alternate hint text`, () => {
+        const component = mount(<EuiCodeEditor isReadOnly />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
     });
+  });
 
-    test('should be disabled when the ui ace box gains focus', () => {
-      const hint = findTestSubject(element, 'codeEditorHint', false);
-      hint.simulate('keyup', { keyCode: keyCodes.ENTER });
-      expect(findTestSubject(element, 'codeEditorHint')).toMatchSnapshot();
-    });
+  describe('behavior', () => {
+    let component;
 
-    test('should be enabled when the ui ace box loses focus', () => {
-      const hint = findTestSubject(element, 'codeEditorHint', false);
-      hint.simulate('keyup', { keyCode: keyCodes.ENTER });
-      element.instance().onBlurAce();
-      expect(findTestSubject(element, 'codeEditorHint')).toMatchSnapshot();
+    beforeEach(() => {
+      component = mount(<EuiCodeEditor/>);
     });
-  });
 
-  describe('interaction', () => {
-    test('bluring the ace textbox should call a passed onBlur prop', () => {
-      const blurSpy = sinon.spy();
-      const el = mount(<EuiCodeEditor onBlur={blurSpy}/>);
-      el.instance().onBlurAce();
-      expect(blurSpy.called).toBe(true);
+    describe('hint element', () => {
+      test('should be tabable', () => {
+        const hint = findTestSubject(component, 'codeEditorHint');
+        expect(hint).toMatchSnapshot();
+      });
+
+      test('should be disabled when the ui ace box gains focus', () => {
+        const hint = findTestSubject(component, 'codeEditorHint', false);
+        hint.simulate('keyup', { keyCode: keyCodes.ENTER });
+        expect(findTestSubject(component, 'codeEditorHint')).toMatchSnapshot();
+      });
+
+      test('should be enabled when the ui ace box loses focus', () => {
+        const hint = findTestSubject(component, 'codeEditorHint', false);
+        hint.simulate('keyup', { keyCode: keyCodes.ENTER });
+        component.instance().onBlurAce();
+        expect(findTestSubject(component, 'codeEditorHint')).toMatchSnapshot();
+      });
     });
 
-    test('pressing escape in ace textbox will enable overlay', () => {
-      element.instance().onKeydownAce({
-        preventDefault: () => {},
-        stopPropagation: () => {},
-        keyCode: keyCodes.ESCAPE,
+    describe('interaction', () => {
+      test('bluring the ace textbox should call a passed onBlur prop', () => {
+        const blurSpy = sinon.spy();
+        const el = mount(<EuiCodeEditor onBlur={blurSpy}/>);
+        el.instance().onBlurAce();
+        expect(blurSpy.called).toBe(true);
+      });
+
+      test('pressing escape in ace textbox will enable overlay', () => {
+        component.instance().onKeydownAce({
+          preventDefault: () => {},
+          stopPropagation: () => {},
+          keyCode: keyCodes.ESCAPE,
+        });
+        const hint = findTestSubject(component, 'codeEditorHint');
+        expect(hint).toBe(document.activeElement);
       });
-      const hint = findTestSubject(element, 'codeEditorHint');
-      expect(hint).toBe(document.activeElement);
     });
   });
 });