diff --git a/docs/_css/react.scss b/docs/_css/react.scss
index c502b06b79..5e94c2fe08 100644
--- a/docs/_css/react.scss
+++ b/docs/_css/react.scss
@@ -459,7 +459,7 @@ section.black content {
   }
 
   .playgroundPreview {
-    padding: 14px;
+    padding: 0;
     width: 600px;
 
     pre {
diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js
index 818d3b4eb9..e03bde05bf 100644
--- a/docs/_js/live_editor.js
+++ b/docs/_js/live_editor.js
@@ -22,7 +22,8 @@ var CodeMirrorEditor = React.createClass({
       mode: 'javascript',
       lineNumbers: false,
       matchBrackets: true,
-      theme: 'solarized-light'
+      theme: 'solarized-light',
+      readOnly: this.props.readOnly
     });
     this.editor.on('change', this.onChange);
     this.onChange();
@@ -82,7 +83,7 @@ var ReactPlayground = React.createClass({
     } else if (this.state.mode === this.MODES.JS) {
       content =
         <div className="playgroundJS playgroundStage">
-            {this.getDesugaredCode()}
+          {this.getDesugaredCode()}
         </div>;
     }
 
@@ -111,13 +112,14 @@ var ReactPlayground = React.createClass({
     } catch (e) { }
 
     try {
+      var desugaredCode = this.getDesugaredCode();
       if (this.props.renderCode) {
         React.renderComponent(
-          <pre>{this.getDesugaredCode()}</pre>,
+          <CodeMirrorEditor codeText={desugaredCode} readOnly={true} />,
           mountNode
         );
       } else {
-        eval(this.getDesugaredCode());
+        eval(desugaredCode);
       }
     } catch (e) {
       React.renderComponent(