diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js
new file mode 100644
index 00000000..7118c059
--- /dev/null
+++ b/browser/components/MarkdownSplitEditor.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import styles from './MarkdownSplitEditor.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+class MarkdownSplitEditor extends React.Component {
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='editor'>
+          <p>editor</p>
+        </div>
+        <div styleName='preview'>
+          <p>preview</p>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default CSSModules(MarkdownSplitEditor, styles)
diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
new file mode 100644
index 00000000..c439bed9
--- /dev/null
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -0,0 +1,9 @@
+.root
+  width 100%
+  height 100%
+  font-size 30px
+  display flex
+  .editor
+    width 50%
+  .preview
+    width 50%
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index baaf63f9..39db6c3c 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import MarkdownSplitEditor from 'browser/components/MarkdownSplitEditor'
 import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
@@ -272,6 +273,24 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  renderEditor () {
+    const { config, ignorePreviewPointerEvents } = this.props
+    const { note } = this.state
+    if (this.state.editorType === 'SPLIT') {
+      return <MarkdownSplitEditor />
+    } else {
+      return <MarkdownEditor
+        ref='content'
+        styleName='body-noteEditor'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={(e) => this.handleChange(e)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    }
+  }
+
   render () {
     const { data, config, location } = this.props
     const { note, editorType } = this.state
@@ -400,15 +419,7 @@ class MarkdownNoteDetail extends React.Component {
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
-          <MarkdownEditor
-            ref='content'
-            styleName='body-noteEditor'
-            config={config}
-            value={this.state.note.content}
-            storageKey={this.state.note.storage}
-            onChange={(e) => this.handleChange(e)}
-            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
-          />
+          {this.renderEditor()}
         </div>
 
         <StatusBar