diff --git a/dev/App.js b/dev/App.js
index 21a9102ab..6017f3484 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -2,8 +2,10 @@ import React, {Component} from 'react';
 import {hot} from 'react-hot-loader';
 import plotly from 'plotly.js/dist/plotly';
 import '../src/styles/main.scss';
-import Nav from './Nav';
-import PlotlyEditor from '../src';
+import 'react-select/dist/react-select.css';
+import ReactJson from 'react-json-view';
+import Select from 'react-select';
+import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
@@ -82,12 +84,43 @@ class App extends Component {
           useResizeHandler
           debug
           advancedTraceTypeSelector
-        />
-        <Nav
-          currentMockIndex={this.state.currentMockIndex}
-          loadMock={this.loadMock}
-          mocks={this.state.mocks}
-        />
+        >
+          {' '}
+          <DefaultEditor>
+            <Panel group="Dev" name="JSON">
+              <Select
+                clearable={true}
+                value={this.state.currentMockIndex}
+                name="mock-dropdown"
+                options={this.state.mocks.map((item, i) => ({
+                  label: item,
+                  value: i,
+                }))}
+                searchable={true}
+                searchPromptText="Search for a mock"
+                onChange={option => this.loadMock(option.value)}
+                noResultsText={'No Results'}
+                placeholder={'Search for a mock'}
+              />
+              <br />
+              <ReactJson
+                enableClipboard={false}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                indentWidth={2}
+                onAdd={({updated_src}) => this.setState(updated_src)}
+                onEdit={({updated_src}) => this.setState(updated_src)}
+                onDelete={({updated_src}) => this.setState(updated_src)}
+                src={{
+                  data: this.state.data,
+                  layout: this.state.layout,
+                  frames: this.state.frames,
+                }}
+              />
+            </Panel>
+          </DefaultEditor>
+        </PlotlyEditor>
       </div>
     );
   }
diff --git a/dev/Nav.js b/dev/Nav.js
deleted file mode 100644
index d95f15213..000000000
--- a/dev/Nav.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import 'react-select/dist/react-select.css';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Select from 'react-select';
-
-const Nav = props => (
-  <div className="mock-nav">
-    <span className="mock-nav__label">Select mock:</span>
-    <div className="mock-nav__select">
-      <Select
-        clearable={true}
-        value={props.currentMockIndex}
-        name="mock-dropdown"
-        options={props.mocks.map((item, i) => ({
-          label: item,
-          value: i,
-        }))}
-        className="open-top"
-        searchable={true}
-        searchPromptText="Search for a mock"
-        onChange={option => props.loadMock(option.value)}
-        noResultsText={'No Results'}
-        placeholder={'plotly.js/contents/test/image/mocks'}
-      />
-    </div>
-  </div>
-);
-
-Nav.propTypes = {
-  currentMockIndex: PropTypes.number,
-  loadMock: PropTypes.func,
-  mocks: PropTypes.array,
-};
-
-export default Nav;
diff --git a/dev/styles.css b/dev/styles.css
index 7bfda856e..e9aecc414 100644
--- a/dev/styles.css
+++ b/dev/styles.css
@@ -5,49 +5,7 @@ body {
 }
 
 .app {
-  height: calc(100vh - 50px);
-  max-height: calc(100vh - 50px);
+  height: 100vh;
+  max-height: 100vh;
 }
 
-.mock-nav {
-  height: 50px;
-  width: 100%;
-  background-color: #506784;
-  display: inline-flex;
-  color: white;
-}
-
-.mock-nav__label {
-  line-height: 50px;
-  padding-left: 10px;
-}
-
-.mock-nav__select {
-  width: 300px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 7px;
-}
-
-.Select.open-top .Select-menu-outer {
-  top: auto;
-  bottom: 100%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select-option:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.Select.open-top .Select-option:last-child {
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select.is-open > .Select-control {
-  border-top-right-radius: unset;
-  border-top-left-radius: unset;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
diff --git a/package.json b/package.json
index 573fe52d1..b49c765c4 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^4.0.0-beta.21",
+    "react-json-view": "^1.16.1",
     "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 61311b5ae..012bc3466 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -16,7 +16,7 @@ import {
   StyleUpdateMenusPanel,
 } from './default_panels';
 
-const DefaultEditor = ({localize: _}) => (
+const DefaultEditor = ({children, localize: _}) => (
   <Fragment>
     <PanelMenuWrapper>
       <GraphCreatePanel group={_('Graph')} name={_('Create')} />
@@ -30,12 +30,14 @@ const DefaultEditor = ({localize: _}) => (
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
       <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
       <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
+      {children ? children : null}
     </PanelMenuWrapper>
   </Fragment>
 );
 
 DefaultEditor.propTypes = {
   localize: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default localize(DefaultEditor);
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index 631a91d15..f7518331b 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -48,6 +48,9 @@ class PanelsWithSidebar extends Component {
     let groupIndex;
 
     React.Children.forEach(children, child => {
+      if (!child) {
+        return;
+      }
       const group = child.props.group;
       const name = child.props.name;
 
@@ -81,6 +84,7 @@ class PanelsWithSidebar extends Component {
         {React.Children.map(
           this.props.children,
           (child, i) =>
+            child === null ||
             this.state.group !== child.props.group ||
             this.state.panel !== child.props.name
               ? null
diff --git a/src/index.js b/src/index.js
index 6cb93e6f5..38c4478e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import PlotlyEditor from './PlotlyEditor';
+import DefaultEditor from './DefaultEditor';
 import EditorControls from './EditorControls';
 import {
   connectAnnotationToLayout,
@@ -143,6 +144,7 @@ export {
   localizeString,
   walkObject,
   EditorControls,
+  DefaultEditor,
 };
 
 export default PlotlyEditor;
diff --git a/webpack.config.js b/webpack.config.js
index e3f91f174..f540c3f3f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,6 +38,8 @@ module.exports = {
       },
     ],
   },
+
+  plugins: [new webpack.IgnorePlugin(/vertx/)],
   devServer: {
     open: true,
     contentBase: './dev',