diff --git a/package.json b/package.json
index 058c7772d..483c781c3 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
"normalize.css": "^8.0.1",
"prismjs": "^1.17.1",
"react-emotion": "^8.0.8",
- "react-live": "^1.6",
+ "react-live": "^2.2.2",
"react-redux": "^5.1.1",
"react-transition-group": "1.2.1",
"react-typography": "^0.16.18",
diff --git a/src/components/__snapshots__/code-pane.test.js.snap b/src/components/__snapshots__/code-pane.test.js.snap
index a2867b204..6d4e3dc9a 100644
--- a/src/components/__snapshots__/code-pane.test.js.snap
+++ b/src/components/__snapshots__/code-pane.test.js.snap
@@ -1,38 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`const myButton = (
- <CustomButton
- style={{ background: '#f00' }}
- onClick={this.action}
- >
- Click Me
- </CustomButton>
- );
- ",
- }
- }
- spellCheck="false"
- />
-
- Supports Light and Dark Syntax Themes -
-- - /** - * Sample React Component - * Output domContainerNode is 'mountNode' - */ - - - - - - const - - styles - - = - - - - { - - - heading - - : - - - - { - - - fontSize - - : - - - - "2.25rem" - - - , - - - fontWeight - - : - - - - "bold" - - - - - } - - - , - - - copy - - : - - - - { - - - fontSize - - : - - - - "1.5rem" - - - - - } - - - - - } - - - - - - const - - HelloWorld - - = - - - - ( - - - { - - name - - } - - - ) - - - - = - - - > - - - - ( - - - - - + "bold" + + +
+ Supports Light and Dark Syntax Themes +
++ Supports Light and Dark Syntax Themes +
++ ! + + +
- - /** - * Sample React Component - * Output domContainerNode is 'mountNode' - */ - - - - - - const - - styles - - = - - - - { - - - heading - - : - - - - { - - - fontSize - - : - - - - "2.25rem" - - - , - - - fontWeight - - : - - - - "bold" - - - - - } - - - , - - - copy - - : - - - - { - - - fontSize - - : - - - - "1.5rem" - - - - - } - - - - - } - - - - - - const - - HelloWorld - - = - - - - ( - - - { - - name - - } - - - ) - - - - = - - - > - - - - ( - - - - - + + + + </ + + + h1 + + + > + + +