diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js
index a3596322..73dce536 100644
--- a/client/modules/IDE/components/EditorAccessibility.js
+++ b/client/modules/IDE/components/EditorAccessibility.js
@@ -29,8 +29,6 @@ class EditorAccessibility extends React.Component {
         <p> Current line
           <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> {this.props.lineNo} </span>
         </p>
-        <div id="canvas-sub">
-        </div>
       </div>
     );
   }
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 4d589ab4..ac6794fc 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -51,8 +51,7 @@ const hijackConsoleScript = `<script>
       return false;
     };
   });
-</script>
-<div id="canvas-sub"> </div>`;
+</script>`;
 
 class PreviewFrame extends React.Component {
 
@@ -128,7 +127,8 @@ class PreviewFrame extends React.Component {
       htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
     });
 
-    if (this.props.textOutput||this.props.isTextOutputPlaying) {
+    if (this.props.textOutput || this.props.isTextOutputPlaying) {
+      console.log(htmlFile);
       const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
       const headRegex = new RegExp('head', 'i');
       let htmlHeadContents = htmlHead[0].split(headRegex)[1];
diff --git a/client/modules/IDE/components/TextOutput.js b/client/modules/IDE/components/TextOutput.js
new file mode 100644
index 00000000..de816a1e
--- /dev/null
+++ b/client/modules/IDE/components/TextOutput.js
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+
+class TextOutput extends React.Component {
+  componentDidMount() {
+
+  }
+  render() {
+    return (
+      <div className="textoutput" id="canvas-sub" tabIndex="0" role="region">
+        <section id="textOutput-content">
+        </section>
+        <div tabIndex="0" role="region" id="textOutput-content-summary">
+        </div>
+        <div tabIndex="0" role="region" id="textOutput-content-details">
+        </div>
+        <table id="textOutput-content-table">
+        </table>
+      </div>
+    );
+  }
+}
+
+// TextOutput.propTypes = {
+//   lintMessages: PropTypes.array.isRequired,
+//   lineNo: PropTypes.string.isRequired,
+// };
+
+export default TextOutput;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index a87ecb8c..7f2a35ce 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -3,6 +3,7 @@ import Editor from '../components/Editor';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
 import Toolbar from '../components/Toolbar';
+import TextOutput from '../components/TextOutput';
 import Preferences from '../components/Preferences';
 import NewFileModal from '../components/NewFileModal';
 import Nav from '../../../components/Nav';
@@ -193,6 +194,14 @@ class IDEView extends React.Component {
               <div>
                 <div className="preview-frame-overlay" ref="overlay">
                 </div>
+                {(() => {
+                  if (this.props.preferences.textOutput || this.props.ide.isTextOutputPlaying) {
+                    return (
+                      <TextOutput />
+                    );
+                  }
+                  return '';
+                })()}
                 <PreviewFrame
                   htmlFile={this.props.htmlFile}
                   jsFiles={this.props.jsFiles}
diff --git a/static/intercept-p5.js b/static/intercept-p5.js
index eed538d7..47fcdb7b 100644
--- a/static/intercept-p5.js
+++ b/static/intercept-p5.js
@@ -1,4 +1,4 @@
-var shadowDOMElement;
+var textOutputElement;
 var canvasLocation ='';
 
 funcNames = refData["classitems"].map(function(x){
@@ -18,29 +18,28 @@ funcNames = funcNames.filter(function(x) {
 
 
 funcNames.forEach(function(x){
+  let document = parent.document;
   var originalFunc = p5.prototype[x.name];
   p5.prototype[x.name] = function(){
     orgArg = arguments;
-    if(!shadowDOMElement){
-      Interceptor.createShadowDOMElement();
-    }
+
     if(frameCount == 0) { //for setup
-      Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('shadowDOM-content-details'),false);
-      Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary'));
-      var table = document.getElementById('shadowDOM-content-details');
+      Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('textOutput-content-details'),false);
+      Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
+      var table = document.getElementById('textOutput-content-details');
       table.innerHTML = '';
       Interceptor.populateTable(table,Interceptor.setupObject);
     }
 
     else if(frameCount%100 == 0 ) {
-      Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('shadowDOM-content-details'),true);
-      Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary'));
+      Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('textOutput-content-details'),true);
+      Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
       Interceptor.isCleared = false;
     }
     //reset some of the variables
     else if(frameCount%100 == 1 ) {
       if(!Interceptor.isCleared){
-        var table = document.getElementById('shadowDOM-content-details');
+        var table = document.getElementById('textOutput-content-details');
         table.innerHTML = '';
         Interceptor.populateTable(table,Interceptor.setupObject);
         Interceptor.populateTable(table,Interceptor.drawObject);
@@ -50,18 +49,3 @@ funcNames.forEach(function(x){
     return originalFunc.apply(this,arguments);
   }
 });
-
-/*** PSUEDO CODE
-
-* Run @fc = 0
-* make a list of all the objects/shapes that are present - make a list of the objects using data.json
-* check if the same ones are present in fc=1 ??
-* and update the content
-
-*Caveats
-- if there is already a circle, we can actually update the values on the same one if there is the SAME number of circles.
--else we can update the SAME ones and add the rest
-
-links
-- Color converter -   http://chir.ag/projects/ntc/
-***/
diff --git a/static/interceptor-functions.js b/static/interceptor-functions.js
index 16cd2a3b..0ed7a6a6 100644
--- a/static/interceptor-functions.js
+++ b/static/interceptor-functions.js
@@ -65,40 +65,6 @@ var Interceptor = {
     objectTypeCount : {}
   },
   isCleared : false,
-  createShadowDOMElement : function() {
-
-    // var c = document.getElementsByTagName('canvas')[0];
-    var c = document.getElementById('canvas-sub');
-    c.setAttribute("tabIndex","0");
-    c.setAttribute("role","region");
-
-    var section = document.createElement('section');
-    section.id = "shadowDOM-content";
-    section.className = "shadowDOM-content";
-    c.appendChild(section);
-
-    var summary = document.createElement('div');
-    summary.setAttribute("tabIndex","0");
-    summary.setAttribute("role","region");
-    summary.id = "shadowDOM-content-summary";
-    summary.className = "shadowDOM-content-summary";
-    section.appendChild(summary);
-
-    var details = document.createElement('div');
-    details.setAttribute("tabIndex","0");
-    details.setAttribute("role","region");
-    details.id = "shadowDOM-content-details";
-    details.className = "shadowDOM-content-details";
-    section.appendChild(details);
-
-    var contentTable = document.createElement('table');
-    contentTable.id="shadowDOM-content-table";
-    contentTable.className ="shadowDOM-content-table";
-    contentTable.setAttribute('summary','details of object in the canvas');
-
-    details.appendChild(contentTable);
-    shadowDOMElement = document.getElementById('shadowDOM-content');
-  },
   getColorName : function(arguments) {
     if(arguments.length==3) {
       //assuming that we are doing RGB - convert RGB values to a name