diff --git a/package.json b/package.json
index 2800cfdbc..f900af133 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "normalize.css": "^7.0.0",
     "prismjs": "1.6.0",
     "react-emotion": "^8.0.8",
-    "react-live": "^1.8.0-2",
+    "react-live": "^1.11.0",
     "react-redux": "^5.0.5",
     "react-transition-group": "1.2.1",
     "react-typography": "^0.16.5",
diff --git a/src/components/__snapshots__/code-pane.test.js.snap b/src/components/__snapshots__/code-pane.test.js.snap
index f1f7afc3d..12c78473f 100644
--- a/src/components/__snapshots__/code-pane.test.js.snap
+++ b/src/components/__snapshots__/code-pane.test.js.snap
@@ -106,6 +106,8 @@ exports[`<CodePane /> should render correctly. 1`] = `
                 }
               }
               onClick={undefined}
+              onCompositionEnd={undefined}
+              onCompositionStart={undefined}
               onKeyDown={undefined}
               onKeyUp={undefined}
               spellCheck="false"
diff --git a/src/components/__snapshots__/component-playground.test.js.snap b/src/components/__snapshots__/component-playground.test.js.snap
index 92f2b5142..6bf5124e5 100644
--- a/src/components/__snapshots__/component-playground.test.js.snap
+++ b/src/components/__snapshots__/component-playground.test.js.snap
@@ -3,7 +3,6 @@
 exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 <div
   class="react-live css-o32omv"
-  scope="[object Object]"
 >
   <div
     class="css-qtztkt"
@@ -200,13 +199,7 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
         >
           const
         </span>
-         
-        <span
-          class="token function-variable function"
-        >
-          HelloWorld
-        </span>
-         
+         HelloWorld 
         <span
           class="token operator"
         >
@@ -238,7 +231,12 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
         <span
           class="token operator"
         >
-          =&gt;
+          =
+        </span>
+        <span
+          class="token operator"
+        >
+          &gt;
         </span>
          
         <span
@@ -541,7 +539,6 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 <div
   class="react-live css-o32omv"
-  scope="[object Object]"
 >
   <div
     class="css-qtztkt"
@@ -738,13 +735,7 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
         >
           const
         </span>
-         
-        <span
-          class="token function-variable function"
-        >
-          HelloWorld
-        </span>
-         
+         HelloWorld 
         <span
           class="token operator"
         >
@@ -776,7 +767,12 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
         <span
           class="token operator"
         >
-          =&gt;
+          =
+        </span>
+        <span
+          class="token operator"
+        >
+          &gt;
         </span>
          
         <span
@@ -1079,7 +1075,6 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 exports[`<ComponentPlayground /> Should render with a custom background color 1`] = `
 <div
   class="react-live css-o32omv"
-  scope="[object Object]"
 >
   <div
     class="css-qtztkt"
@@ -1276,13 +1271,7 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
         >
           const
         </span>
-         
-        <span
-          class="token function-variable function"
-        >
-          HelloWorld
-        </span>
-         
+         HelloWorld 
         <span
           class="token operator"
         >
@@ -1314,7 +1303,12 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
         <span
           class="token operator"
         >
-          =&gt;
+          =
+        </span>
+        <span
+          class="token operator"
+        >
+          &gt;
         </span>
          
         <span
@@ -1617,7 +1611,6 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
 exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
 <div
   class="react-live css-o32omv"
-  scope="[object Object]"
 >
   <div
     class="css-qtztkt"
@@ -1678,13 +1671,7 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
         >
           const
         </span>
-         
-        <span
-          class="token function-variable function"
-        >
-          Button
-        </span>
-         
+         Button 
         <span
           class="token operator"
         >
@@ -1716,7 +1703,12 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
         <span
           class="token operator"
         >
-          =&gt;
+          =
+        </span>
+        <span
+          class="token operator"
+        >
+          &gt;
         </span>
          
         <span
@@ -1853,12 +1845,13 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
             >
               "
             </span>
-            My Button
-            <span
-              class="token punctuation"
-            >
-              "
-            </span>
+            My
+          </span>
+           
+          <span
+            class="token attr-name"
+          >
+            Button"
           </span>
            
           <span
diff --git a/yarn.lock b/yarn.lock
index e8bbe1438..f8678f4f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -650,19 +650,19 @@ acorn-globals@^4.1.0:
   dependencies:
     acorn "^5.0.0"
 
-acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
   dependencies:
     acorn "^3.0.4"
 
-acorn-object-spread@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz#48ead0f4a8eb16995a17a0db9ffc6acaada4ba68"
+acorn-jsx@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e"
   dependencies:
-    acorn "^3.1.0"
+    acorn "^5.0.3"
 
-acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0:
+acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
@@ -670,6 +670,10 @@ acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
 
+acorn@^5.0.3, acorn@^5.4.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
+
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -1937,17 +1941,18 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
-buble@^0.15.2:
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/buble/-/buble-0.15.2.tgz#547fc47483f8e5e8176d82aa5ebccb183b02d613"
+buble@^0.19.3:
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.3.tgz#01e9412062cff1da6f20342b6ecd72e7bf699d02"
   dependencies:
-    acorn "^3.3.0"
-    acorn-jsx "^3.0.1"
-    acorn-object-spread "^1.0.0"
-    chalk "^1.1.3"
-    magic-string "^0.14.0"
+    acorn "^5.4.1"
+    acorn-dynamic-import "^3.0.0"
+    acorn-jsx "^4.1.1"
+    chalk "^2.3.1"
+    magic-string "^0.22.4"
     minimist "^1.2.0"
     os-homedir "^1.0.1"
+    vlq "^1.0.0"
 
 buffer-from@^1.0.0:
   version "1.0.0"
@@ -2449,9 +2454,9 @@ component-props@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
 
-component-xor@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.3.tgz#68ae7f1c40b78d843d69f2a829cfb31d6afbf051"
+component-xor@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa"
 
 compressible@~2.0.13:
   version "2.0.13"
@@ -3086,12 +3091,12 @@ dom-helpers@^3.2.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
 
-dom-iterator@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-0.3.0.tgz#5a745bf47bc692ac0fa3c0c385396ff2cbd55882"
+dom-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
   dependencies:
     component-props "1.1.1"
-    component-xor "0.0.3"
+    component-xor "0.0.4"
 
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
@@ -5993,11 +5998,11 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
-magic-string@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.14.0.tgz#57224aef1701caeed273b17a39a956e72b172462"
+magic-string@^0.22.4:
+  version "0.22.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
   dependencies:
-    vlq "^0.2.1"
+    vlq "^0.2.2"
 
 make-dir@^1.0.0, make-dir@^1.1.0:
   version "1.2.0"
@@ -7351,18 +7356,12 @@ pretty-format@^22.4.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-prismjs@1.6.0:
+prismjs@1.6, prismjs@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
   optionalDependencies:
     clipboard "^1.5.5"
 
-prismjs@^1.6.0:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.8.3.tgz#4a3d140be5f2614a8987ca2330733a40d8ad207b"
-  optionalDependencies:
-    clipboard "^1.5.5"
-
 private@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
@@ -7599,14 +7598,14 @@ react-emotion@^8.0.8:
     babel-plugin-emotion "^8.0.6"
     emotion-utils "^8.0.6"
 
-react-live@^1.8.0-2:
-  version "1.8.0-2"
-  resolved "https://registry.yarnpkg.com/react-live/-/react-live-1.8.0-2.tgz#0207113212fb5cc4ebb33080219c2feb29ea3398"
+react-live@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-live/-/react-live-1.11.0.tgz#257b54abb64df250bc40b0572c21acd600ecdd5c"
   dependencies:
-    buble "^0.15.2"
+    buble "^0.19.3"
     core-js "^2.4.1"
-    dom-iterator "^0.3.0"
-    prismjs "^1.6.0"
+    dom-iterator "^1.0.0"
+    prismjs "1.6"
     prop-types "^15.5.8"
     unescape "^0.2.0"
 
@@ -9421,10 +9420,14 @@ vinyl@^2.0.1:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vlq@^0.2.1:
+vlq@^0.2.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
 
+vlq@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.0.tgz#8101be90843422954c2b13eb27f2f3122bdcc806"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"