diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 28e1a2098..9c1aab34e 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -35,8 +35,12 @@ class CodeEditor extends Component {
   componentDidUpdate(prevProps, prevState) {
     if (prevState.compiled !== this.state.compiled) {
       this._render();
-    } else if (this.props.code !== prevProps.code) {
-      this.setState(this._updateState(this.props.code));
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.code !== nextProps.code) {
+      this.setState(this._updateState(nextProps.code));
     }
   }
 
@@ -67,179 +71,174 @@ class CodeEditor extends Component {
     }
 
     return (
-      <div css={{flex: 1}}>
-        <LiveProvider
-          code={showJSX ? code : compiledES6}
-          mountStylesheet={false}>
+      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
+        <div
+          css={{
+            [media.greaterThan('medium')]: {
+              display: 'flex',
+              alignItems: 'stretch',
+              flexDirection: 'row',
+            },
+
+            [media.lessThan('small')]: {
+              display: 'block',
+            },
+          }}>
           <div
             css={{
-              [media.greaterThan('medium')]: {
-                flex: '0 0 67%',
-                display: 'flex',
-                alignItems: 'stretch',
-                flexDirection: 'row',
-              },
+              flex: '0 0 70%',
+              overflow: 'hidden',
+              borderRadius: '10px 0 0 10px',
 
-              [media.lessThan('small')]: {
-                display: 'block',
+              [media.lessThan('medium')]: {
+                borderRadius: '10px 10px 0 0',
               },
             }}>
             <div
               css={{
-                flex: '0 0 70%',
+                padding: '0px 10px',
+                background: colors.darker,
+                color: colors.white,
+              }}>
+              <MetaTitle onDark={true}>
+                Live JSX Editor
+                <label
+                  css={{
+                    fontSize: 14,
+                    float: 'right',
+                    cursor: 'pointer',
+                  }}>
+                  <input
+                    checked={this.state.showJSX}
+                    onChange={event =>
+                      this.setState({showJSX: event.target.checked})
+                    }
+                    type="checkbox"
+                  />{' '}
+                  JSX?
+                </label>
+              </MetaTitle>
+            </div>
+            <div
+              css={{
+                height: '100%',
+                width: '100%',
+                borderRadius: '0',
+                maxHeight: '340px !important',
+                marginTop: '0 !important',
+                marginLeft: '0 !important',
+                paddingLeft: '0 !important',
+                marginRight: '0 !important',
+                paddingRight: '0 !important',
+                marginBottom: '0 !important',
+                paddingBottom: '20px !important',
+                [media.lessThan('medium')]: {
+                  marginBottom: '0 !important',
+                },
+
+                '& pre.prism-code[contenteditable]': {
+                  outline: 0,
+                  overflow: 'auto',
+                  marginRight: '0 !important',
+                  marginBottom: '0 !important',
+                },
+              }}
+              className="gatsby-highlight">
+              <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
+            </div>
+          </div>
+          {error && (
+            <div
+              css={{
+                flex: '0 0 30%',
                 overflow: 'hidden',
-                borderRadius: '10px 0 0 10px',
+                border: `1px solid ${colors.error}`,
+                borderRadius: '0 10px 10px 0',
+                fontSize: 12,
+                lineHeight: 1.5,
 
                 [media.lessThan('medium')]: {
-                  borderRadius: '10px 10px 0 0',
+                  borderRadius: '0 0 10px 10px',
                 },
               }}>
               <div
                 css={{
                   padding: '0px 10px',
-                  background: colors.darker,
+                  background: colors.error,
                   color: colors.white,
                 }}>
-                <MetaTitle onDark={true}>
-                  Live JSX Editor
-                  <label
-                    css={{
-                      fontSize: 14,
-                      float: 'right',
-                      cursor: 'pointer',
-                    }}>
-                    <input
-                      checked={this.state.showJSX}
-                      onChange={event =>
-                        this.setState({showJSX: event.target.checked})
-                      }
-                      type="checkbox"
-                    />{' '}
-                    JSX?
-                  </label>
-                </MetaTitle>
-              </div>
-              <div
-                css={{
-                  height: '100%',
-                  width: '100%',
-                  borderRadius: '0',
-                  maxHeight: '340px !important',
-                  marginTop: '0 !important',
-                  marginLeft: '0 !important',
-                  paddingLeft: '0 !important',
-                  marginRight: '0 !important',
-                  paddingRight: '0 !important',
-                  marginBottom: '0 !important',
-                  paddingBottom: '20px !important',
-                  [media.lessThan('medium')]: {
-                    marginBottom: '0 !important',
-                  },
-
-                  '& pre.prism-code[contenteditable]': {
-                    outline: 0,
-                    overflow: 'auto',
-                    marginRight: '0 !important',
-                    marginBottom: '0 !important',
-                  },
-                }}
-                className="gatsby-highlight">
-                <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
-              </div>
-            </div>
-            {error && (
-              <div
-                css={{
-                  flex: '0 0 30%',
-                  overflow: 'hidden',
-                  border: `1px solid ${colors.error}`,
-                  borderRadius: '0 10px 10px 0',
-                  fontSize: 12,
-                  lineHeight: 1.5,
-
-                  [media.lessThan('medium')]: {
-                    borderRadius: '0 0 10px 10px',
-                  },
-                }}>
-                <div
-                  css={{
-                    padding: '0px 10px',
-                    background: colors.error,
+                <MetaTitle
+                  cssProps={{
                     color: colors.white,
                   }}>
-                  <MetaTitle
-                    cssProps={{
-                      color: colors.white,
-                    }}>
-                    Error
-                  </MetaTitle>
-                </div>
-                <pre
-                  css={{
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-word',
-                    color: colors.error,
-                    padding: 10,
-                  }}>
-                  {errorMessage}
-                </pre>
+                  Error
+                </MetaTitle>
               </div>
-            )}
-            {!error && (
+              <pre
+                css={{
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  color: colors.error,
+                  padding: 10,
+                }}>
+                {errorMessage}
+              </pre>
+            </div>
+          )}
+          {!error && (
+            <div
+              css={{
+                flex: '0 0 30%',
+                overflow: 'hidden',
+                border: `1px solid ${colors.divider}`,
+                borderRadius: '0 10px 10px 0',
+
+                [media.lessThan('medium')]: {
+                  borderRadius: '0 0 10px 10px',
+                },
+              }}>
               <div
                 css={{
-                  flex: '0 0 30%',
-                  overflow: 'hidden',
-                  border: `1px solid ${colors.divider}`,
-                  borderRadius: '0 10px 10px 0',
-
-                  [media.lessThan('medium')]: {
-                    borderRadius: '0 0 10px 10px',
-                  },
+                  padding: '0 10px',
+                  backgroundColor: colors.divider,
                 }}>
-                <div
-                  css={{
-                    padding: '0 10px',
-                    backgroundColor: colors.divider,
-                  }}>
-                  <MetaTitle>Result</MetaTitle>
-                </div>
-                <div
-                  css={{
-                    padding: 10,
-                    maxHeight: '340px !important',
-                    overflow: 'auto',
-
-                    '& input': {
-                      width: '100%',
-                      display: 'block',
-                      border: '1px solid #ccc', // TODO
-                      padding: 5,
-                    },
-
-                    '& button': {
-                      marginTop: 10,
-                      padding: '5px 10px',
-                    },
-
-                    '& label': {
-                      display: 'block',
-                      marginTop: 10,
-                    },
-
-                    '& textarea': {
-                      width: '100%',
-                      height: 60,
-                      padding: 5,
-                    },
-                  }}
-                  ref={this._setMountRef}
-                />
+                <MetaTitle>Result</MetaTitle>
               </div>
-            )}
-          </div>
-        </LiveProvider>
-      </div>
+              <div
+                css={{
+                  padding: 10,
+                  maxHeight: '340px !important',
+                  overflow: 'auto',
+
+                  '& input': {
+                    width: '100%',
+                    display: 'block',
+                    border: '1px solid #ccc', // TODO
+                    padding: 5,
+                  },
+
+                  '& button': {
+                    marginTop: 10,
+                    padding: '5px 10px',
+                  },
+
+                  '& label': {
+                    display: 'block',
+                    marginTop: 10,
+                  },
+
+                  '& textarea': {
+                    width: '100%',
+                    height: 60,
+                    padding: 5,
+                  },
+                }}
+                ref={this._setMountRef}
+              />
+            </div>
+          )}
+        </div>
+      </LiveProvider>
     );
   }
 
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 2ee9fb977..31fe7e2c6 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -6,15 +6,21 @@ import CodeEditor from '../CodeEditor/CodeEditor';
 
 class CodeExample extends Component {
   render() {
-    const {children, code, loaded} = this.props;
+    const {children, code, id, loaded} = this.props;
     return (
       <div
+        id={id}
         css={{
           marginTop: 40,
 
           '&:first-child': {
             marginTop: 0,
           },
+
+          '& .react-live': {
+            width: '100%',
+          },
+
           [media.greaterThan('xlarge')]: {
             display: 'flex',
             flexDirection: 'row',
@@ -29,7 +35,6 @@ class CodeExample extends Component {
           <div
             css={{
               flex: '0 0 33%',
-
               [media.lessThan('xlarge')]: {
                 marginBottom: 20,
               },
diff --git a/src/pages/index.js b/src/pages/index.js
index 1b697cec8..786e37336 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -44,7 +44,7 @@ class Home extends Component {
     const {codeExamples, examples, marketing} = data;
 
     const code = codeExamples.edges.reduce((lookup, {node}) => {
-      lookup[node.mdAbsolutePath] = node.code;
+      lookup[node.mdAbsolutePath] = node;
       return lookup;
     }, {});
 
@@ -257,15 +257,19 @@ class Home extends Component {
               />
               <section css={sectionStyles}>
                 <div id="examples">
-                  {examples.edges.map(({node}, index) => (
-                    <CodeExample
-                      key={index}
-                      code={code[node.fileAbsolutePath]}
-                      loaded={babelLoaded}>
-                      <h3 css={headingStyles}>{node.frontmatter.title}</h3>
-                      <div dangerouslySetInnerHTML={{__html: node.html}} />
-                    </CodeExample>
-                  ))}
+                  {examples.edges.map(({node}, index) => {
+                    const snippet = code[node.fileAbsolutePath];
+                    return (
+                      <CodeExample
+                        key={index}
+                        id={snippet.id}
+                        code={snippet.code}
+                        loaded={babelLoaded}>
+                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>
+                        <div dangerouslySetInnerHTML={{__html: node.html}} />
+                      </CodeExample>
+                    );
+                  })}
                 </div>
               </section>
             </div>