diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 25ad6f55..09868cfb 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -36,6 +36,7 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#markdown')
-
-ReactDOM.render(<MarkdownEditor />, mountNode);
\ No newline at end of file
+ReactDOM.render(
+  <MarkdownEditor />,
+  document.getElementById('markdown-example')
+);
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index f0fc29ec..a8c35bbd 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,6 +1,7 @@
 ---
 title: A Component Using External Plugins
 order: 3
+domid: markdown-example
 ---
 
 React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 9849a573..90c31b96 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -8,9 +8,7 @@ class HelloMessage extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#message')
-
 ReactDOM.render(
   <HelloMessage name="Taylor" />,
-  mountNode
+  document.getElementById('hello-example')
 );
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index ea2a1535..d791856d 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,6 +1,7 @@
 ---
 title: A Simple Component
 order: 0
+domid: hello-example
 ---
 
 React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index dba6de4f..25d5a914 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -27,6 +27,7 @@ class Timer extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#timer')
-
-ReactDOM.render(<Timer />, mountNode);
\ No newline at end of file
+ReactDOM.render(
+  <Timer />,
+  document.getElementById('timer-example')
+);
\ No newline at end of file
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index 1919226f..a68ab0a5 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,6 +1,7 @@
 ---
 title: A Stateful Component
 order: 1
+domid: timer-example
 ---
 
 In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 3f43373f..43f777dc 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -60,6 +60,7 @@ class TodoList extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#app')
-
-ReactDOM.render(<TodoApp />, mountNode);
+ReactDOM.render(
+  <TodoApp />,
+  document.getElementById('todos-example')
+);
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index f6370b0d..227d0621 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -1,6 +1,7 @@
 ---
 title: An Application
 order: 2
+domid: todos-example
 ---
 
 Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 9c1aab34..6e42fff7 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -27,8 +27,6 @@ class CodeEditor extends Component {
   }
 
   componentDidMount() {
-    // Initial render() will always be a no-op,
-    // Because the mountNode ref won't exist yet.
     this._render();
   }
 
@@ -45,7 +43,7 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const {children} = this.props;
+    const {children, containerNodeID} = this.props;
     const {
       compiledES6,
       code,
@@ -205,6 +203,7 @@ class CodeEditor extends Component {
                 <MetaTitle>Result</MetaTitle>
               </div>
               <div
+                id={containerNodeID}
                 css={{
                   padding: 10,
                   maxHeight: '340px !important',
@@ -233,7 +232,6 @@ class CodeEditor extends Component {
                     padding: 5,
                   },
                 }}
-                ref={this._setMountRef}
               />
             </div>
           )}
@@ -243,21 +241,16 @@ class CodeEditor extends Component {
   }
 
   _render() {
-    if (!this._mountNode) {
-      return;
-    }
-
     const {compiled} = this.state;
 
     try {
       // Example code requires React, ReactDOM, and Remarkable to be within scope.
       // It also requires a "mountNode" variable for ReactDOM.render()
       // eslint-disable-next-line no-new-func
-      new Function('React', 'ReactDOM', 'Remarkable', 'mountNode', compiled)(
+      new Function('React', 'ReactDOM', 'Remarkable', compiled)(
         React,
         ReactDOM,
         Remarkable,
-        this._mountNode,
       );
     } catch (error) {
       console.error(error);
@@ -269,10 +262,6 @@ class CodeEditor extends Component {
     }
   }
 
-  _setMountRef = ref => {
-    this._mountNode = ref;
-  };
-
   _updateState(code, showJSX = true) {
     try {
       let newState = {
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 31fe7e2c..bc5d6ed1 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -6,7 +6,7 @@ import CodeEditor from '../CodeEditor/CodeEditor';
 
 class CodeExample extends Component {
   render() {
-    const {children, code, id, loaded} = this.props;
+    const {children, code, id, containerNodeID, loaded} = this.props;
     return (
       <div
         id={id}
@@ -58,7 +58,11 @@ class CodeExample extends Component {
             {children}
           </div>
         )}
-        {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+        {loaded ? (
+          <CodeEditor code={code} containerNodeID={containerNodeID} />
+        ) : (
+          <h4>Loading code example...</h4>
+        )}
       </div>
     );
   }
diff --git a/src/pages/index.js b/src/pages/index.js
index ea091857..bc2d732f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -263,6 +263,7 @@ class Home extends Component {
                         key={index}
                         id={snippet.id}
                         code={snippet.code}
+                        containerNodeID={node.frontmatter.domid}
                         loaded={babelLoaded}>
                         <h3 css={headingStyles}>{node.frontmatter.title}</h3>
                         <div dangerouslySetInnerHTML={{__html: node.html}} />
@@ -368,6 +369,7 @@ export const pageQuery = graphql`
           }
           frontmatter {
             title
+            domid
           }
           html
         }