diff --git a/packages/examples/basic/components/Header.js b/packages/examples/basic/components/Header.js
index 6115f48c8..d0e4c701f 100644
--- a/packages/examples/basic/components/Header.js
+++ b/packages/examples/basic/components/Header.js
@@ -1,29 +1,57 @@
 import React from "react";
-import { Box, Typography, Grid, Button as MaterialButton } from "@material-ui/core";
+import {
+  Box,
+  Typography,
+  Grid,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 import { Card } from "./user/Card";
 import { Button } from "./user/Button";
 import { Text } from "./user/Text";
 
 export const Toolbox = () => {
-  const { connectors, query } = useEditor();
+  const { connectors } = useEditor();
 
   return (
     <Box px={2} py={2}>
-      <Grid container direction="column"  alignItems="center" justify="center" spacing={1}>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justify="center"
+        spacing={1}
+      >
         <Box pb={2}>
           <Typography>Drag to add</Typography>
         </Box>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Button text="Click me" size="small" />)} variant="contained">Button</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Button text="Click me" size="small" />)
+            }
+            variant="contained"
+          >
+            Button
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Text text="Hi world" />)} variant="contained">Text</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Text text="Hi world" />)}
+            variant="contained"
+          >
+            Text
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Card />)} variant="contained">Card</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Card />)}
+            variant="contained"
+          >
+            Card
+          </MaterialButton>
         </Grid>
       </Grid>
     </Box>
-  )
-};
\ No newline at end of file
+  );
+};
diff --git a/packages/examples/basic/components/SettingsPanel.js b/packages/examples/basic/components/SettingsPanel.js
index 559a35635..98b5c61b7 100644
--- a/packages/examples/basic/components/SettingsPanel.js
+++ b/packages/examples/basic/components/SettingsPanel.js
@@ -1,4 +1,11 @@
-import { Box, Chip, Grid, Typography, Button as MaterialButton } from "@material-ui/core";
+import React from "react";
+import {
+  Box,
+  Chip,
+  Grid,
+  Typography,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 
 export const SettingsPanel = () => {
@@ -6,49 +13,50 @@ export const SettingsPanel = () => {
     const currentNodeId = state.events.selected;
     let selected;
 
-    if ( currentNodeId ) {
+    if (currentNodeId) {
       selected = {
         id: currentNodeId,
         name: state.nodes[currentNodeId].data.name,
-        settings: state.nodes[currentNodeId].related && state.nodes[currentNodeId].related.settings,
+        settings:
+          state.nodes[currentNodeId].related &&
+          state.nodes[currentNodeId].related.settings,
         isDeletable: query.node(currentNodeId).isDeletable()
       };
     }
 
     return {
       selected
-    }
+    };
   });
 
-  return selected ? (    
+  return selected ? (
     <Box bgcolor="rgba(0, 0, 0, 0.06)" mt={2} px={2} py={2}>
       <Grid container direction="column" spacing={0}>
         <Grid item>
           <Box pb={2}>
             <Grid container alignItems="center">
-              <Grid item xs><Typography variant="subtitle1">Selected</Typography></Grid>
-              <Grid item><Chip size="small" color="primary" label={selected.name} /></Grid>
+              <Grid item xs>
+                <Typography variant="subtitle1">Selected</Typography>
+              </Grid>
+              <Grid item>
+                <Chip size="small" color="primary" label={selected.name} />
+              </Grid>
             </Grid>
           </Box>
         </Grid>
-        { 
-          selected.settings && React.createElement(selected.settings)
-        }
-        {
-          selected.isDeletable ? (
-            <MaterialButton
-              variant="contained"
-              color="default"
-              onClick={() => {
-                actions.delete(selected.id);
-              }}
-            >
-              Delete
-            </MaterialButton>
-          ) : null
-        }
+        {selected.settings && React.createElement(selected.settings)}
+        {selected.isDeletable ? (
+          <MaterialButton
+            variant="contained"
+            color="default"
+            onClick={() => {
+              actions.delete(selected.id);
+            }}
+          >
+            Delete
+          </MaterialButton>
+        ) : null}
       </Grid>
     </Box>
-  ) : null
-}
-
+  ) : null;
+};
diff --git a/packages/examples/basic/components/Toolbox.js b/packages/examples/basic/components/Toolbox.js
index fbf99c892..3dce21a41 100644
--- a/packages/examples/basic/components/Toolbox.js
+++ b/packages/examples/basic/components/Toolbox.js
@@ -1,5 +1,10 @@
 import React from "react";
-import { Box, Typography, Grid, Button as MaterialButton } from "@material-ui/core";
+import {
+  Box,
+  Typography,
+  Grid,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor, Canvas } from "@craftjs/core";
 import { Container } from "./user/Container";
 import { Card } from "./user/Card";
@@ -7,27 +12,57 @@ import { Button } from "./user/Button";
 import { Text } from "./user/Text";
 
 export const Toolbox = () => {
-  const { connectors, query } = useEditor();
+  const { connectors } = useEditor();
 
   return (
     <Box px={2} py={2}>
-      <Grid container direction="column"  alignItems="center" justify="center" spacing={1}>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justify="center"
+        spacing={1}
+      >
         <Box pb={2}>
           <Typography>Drag to add</Typography>
         </Box>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Button text="Click me" size="small" />)} variant="contained">Button</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Button text="Click me" size="small" />)
+            }
+            variant="contained"
+          >
+            Button
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Text text="Hi world" />)} variant="contained">Text</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Text text="Hi world" />)}
+            variant="contained"
+          >
+            Text
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Canvas is={Container} padding={20} />)} variant="contained">Container</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Canvas is={Container} padding={20} />)
+            }
+            variant="contained"
+          >
+            Container
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Card />)} variant="contained">Card</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Card />)}
+            variant="contained"
+          >
+            Card
+          </MaterialButton>
         </Grid>
       </Grid>
     </Box>
-  )
-};
\ No newline at end of file
+  );
+};
diff --git a/packages/examples/basic/components/Topbar.js b/packages/examples/basic/components/Topbar.js
index e1851f717..d77c15b85 100644
--- a/packages/examples/basic/components/Topbar.js
+++ b/packages/examples/basic/components/Topbar.js
@@ -1,11 +1,23 @@
 import React, { useState } from "react";
-import { Box, FormControlLabel, Switch, Grid, Button as MaterialButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, Snackbar } from "@material-ui/core";
+import {
+  Box,
+  FormControlLabel,
+  Switch,
+  Grid,
+  Button as MaterialButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Snackbar
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 import lz from "lzutf8";
-import copy from 'copy-to-clipboard';
+import copy from "copy-to-clipboard";
 
-export const Topbar = ({onLoadState}) => {
-  const { actions, query, enabled } = useEditor((state) => ({
+export const Topbar = ({ onLoadState }) => {
+  const { actions, query, enabled } = useEditor(state => ({
     enabled: state.options.enabled
   }));
 
@@ -20,33 +32,40 @@ export const Topbar = ({onLoadState}) => {
         <Grid item xs>
           <FormControlLabel
             className="enable-disable-toggle"
-            control={<Switch checked={enabled} onChange={(_, value) => actions.setOptions(options => options.enabled = value)} />}
+            control={
+              <Switch
+                checked={enabled}
+                onChange={(_, value) =>
+                  actions.setOptions(options => (options.enabled = value))
+                }
+              />
+            }
             label="Enable"
           />
         </Grid>
         <Grid item>
-        <MaterialButton 
+          <MaterialButton
             className="copy-state-btn"
-            size="small" 
-            variant="outlined" 
+            size="small"
+            variant="outlined"
             color="secondary"
             onClick={() => {
               const json = query.serialize();
               copy(lz.encodeBase64(lz.compress(json)));
-              setSnackbarMessage("State copied to clipboard")
+              setSnackbarMessage("State copied to clipboard");
             }}
-            style={{marginRight: "10px"}}
+            style={{ marginRight: "10px" }}
           >
-              Copy current state
+            Copy current state
           </MaterialButton>
-          <MaterialButton 
+          <MaterialButton
             className="load-state-btn"
-            size="small" 
-            variant="outlined" 
+            size="small"
+            variant="outlined"
             color="secondary"
             onClick={() => setDialogOpen(true)}
           >
-              Load
+            Load
           </MaterialButton>
           <Dialog
             open={dialogOpen}
@@ -56,8 +75,8 @@ export const Topbar = ({onLoadState}) => {
           >
             <DialogTitle id="alert-dialog-title">Load state</DialogTitle>
             <DialogContent>
-              <TextField 
-                multiline 
+              <TextField
+                multiline
                 fullWidth
                 placeholder='Paste the contents that was copied from the "Copy Current State" button'
                 size="small"
@@ -66,17 +85,20 @@ export const Topbar = ({onLoadState}) => {
               />
             </DialogContent>
             <DialogActions>
-              <MaterialButton onClick={() => setDialogOpen(false)} color="primary">
+              <MaterialButton
+                onClick={() => setDialogOpen(false)}
+                color="primary"
+              >
                 Cancel
               </MaterialButton>
-              <MaterialButton 
+              <MaterialButton
                 onClick={() => {
                   setDialogOpen(false);
                   const json = lz.decompress(lz.decodeBase64(stateToLoad));
                   onLoadState(json);
-                  setSnackbarMessage("State loaded")
-                }} 
-                color="primary" 
+                  setSnackbarMessage("State loaded");
+                }}
+                color="primary"
                 autoFocus
               >
                 Load
@@ -93,5 +115,5 @@ export const Topbar = ({onLoadState}) => {
         </Grid>
       </Grid>
     </Box>
-  )
-};
\ No newline at end of file
+  );
+};
diff --git a/packages/examples/basic/components/user/Button.js b/packages/examples/basic/components/user/Button.js
index 71c6dd7a5..d66854a53 100644
--- a/packages/examples/basic/components/user/Button.js
+++ b/packages/examples/basic/components/user/Button.js
@@ -1,18 +1,33 @@
-import React  from "react";
-import {Button as MaterialButton, FormControl, FormLabel, RadioGroup,Radio, FormControlLabel} from "@material-ui/core";
-import {useNode} from "@craftjs/core";
+import React from "react";
+import {
+  Button as MaterialButton,
+  FormControl,
+  FormLabel,
+  RadioGroup,
+  Radio,
+  FormControlLabel
+} from "@material-ui/core";
+import { useNode } from "@craftjs/core";
 
-export const Button = ({size, variant, color, text}) => {
-  const { connectors: {connect, drag} } = useNode();
+export const Button = ({ size, variant, color, text }) => {
+  const {
+    connectors: { connect, drag }
+  } = useNode();
   return (
-    <MaterialButton ref={ ref => connect(drag(ref))} style={{margin: "5px"}} size={size} variant={variant} color={color} >
+    <MaterialButton
+      ref={ref => connect(drag(ref))}
+      style={{ margin: "5px" }}
+      size={size}
+      variant={variant}
+      color={color}
+    >
       {text}
     </MaterialButton>
-  )
-}
+  );
+};
 
 export const ButtonSettings = () => {
-  const { setProp, props } = useNode((node) => ({
+  const { setProp, props } = useNode(node => ({
     props: node.data.props
   }));
 
@@ -20,34 +35,79 @@ export const ButtonSettings = () => {
     <div>
       <FormControl size="small" component="fieldset">
         <FormLabel component="legend">Size</FormLabel>
-        <RadioGroup defaultValue={props.size} onChange={(e) => setProp(props => props.size = e.target.value )}>
-          <FormControlLabel label="Small" value="small" control={<Radio size="small" color="primary" />} />
-          <FormControlLabel label="Medium" value="medium" control={<Radio size="small" color="primary" />} />
-          <FormControlLabel label="Large" value="large" control={<Radio size="small" color="primary" />} />
+        <RadioGroup
+          defaultValue={props.size}
+          onChange={e => setProp(props => (props.size = e.target.value))}
+        >
+          <FormControlLabel
+            label="Small"
+            value="small"
+            control={<Radio size="small" color="primary" />}
+          />
+          <FormControlLabel
+            label="Medium"
+            value="medium"
+            control={<Radio size="small" color="primary" />}
+          />
+          <FormControlLabel
+            label="Large"
+            value="large"
+            control={<Radio size="small" color="primary" />}
+          />
         </RadioGroup>
       </FormControl>
       <FormControl component="fieldset">
         <FormLabel component="legend">Variant</FormLabel>
-        <RadioGroup defaultValue={props.variant} onChange={(e) => setProp(props => props.variant = e.target.value )}>
-          <FormControlLabel label="Text" value="text" control={<Radio size="small" color="primary" />} />
-          <FormControlLabel label="Outlined" value="outlined" control={<Radio size="small" color="primary" />} />
-          <FormControlLabel label="Contained" value="contained" control={<Radio size="small" color="primary" />} />
+        <RadioGroup
+          defaultValue={props.variant}
+          onChange={e => setProp(props => (props.variant = e.target.value))}
+        >
+          <FormControlLabel
+            label="Text"
+            value="text"
+            control={<Radio size="small" color="primary" />}
+          />
+          <FormControlLabel
+            label="Outlined"
+            value="outlined"
+            control={<Radio size="small" color="primary" />}
+          />
+          <FormControlLabel
+            label="Contained"
+            value="contained"
+            control={<Radio size="small" color="primary" />}
+          />
         </RadioGroup>
       </FormControl>
       <FormControl component="fieldset">
         <FormLabel component="legend">Color</FormLabel>
-        <RadioGroup defaultValue={props.color} onChange={(e) => setProp(props => props.color = e.target.value )}>
-          <FormControlLabel label="Default" value="default" control={<Radio size="small" color="default" />} />
-          <FormControlLabel label="Primary" value="primary" control={<Radio size="small" color="primary" />} />
-          <FormControlLabel label="Seconday" value="secondary" control={<Radio size="small" color="primary" />} />
+        <RadioGroup
+          defaultValue={props.color}
+          onChange={e => setProp(props => (props.color = e.target.value))}
+        >
+          <FormControlLabel
+            label="Default"
+            value="default"
+            control={<Radio size="small" color="default" />}
+          />
+          <FormControlLabel
+            label="Primary"
+            value="primary"
+            control={<Radio size="small" color="primary" />}
+          />
+          <FormControlLabel
+            label="Seconday"
+            value="secondary"
+            control={<Radio size="small" color="primary" />}
+          />
         </RadioGroup>
       </FormControl>
     </div>
-  )
+  );
 };
 
 export const ButtonDefaultProps = {
-  size: "small", 
+  size: "small",
   variant: "contained",
   color: "primary",
   text: "Click me"
@@ -55,7 +115,7 @@ export const ButtonDefaultProps = {
 
 Button.craft = {
   defaultProps: ButtonDefaultProps,
-  related: { 
+  related: {
     settings: ButtonSettings
   }
-}
\ No newline at end of file
+};
diff --git a/packages/examples/basic/components/user/Card.js b/packages/examples/basic/components/user/Card.js
index 6647a2d06..b678d1d46 100644
--- a/packages/examples/basic/components/user/Card.js
+++ b/packages/examples/basic/components/user/Card.js
@@ -1,40 +1,59 @@
-import React  from "react";
-import { Container, ContainerSettings, ContainerDefaultProps } from "./Container";
+import React from "react";
+import {
+  Container,
+  ContainerSettings,
+  ContainerDefaultProps
+} from "./Container";
 import { Text } from "./Text";
 import { Button } from "./Button";
 import { Canvas, useNode } from "@craftjs/core";
 
-export const CardTop = ({children}) => {
-  const { connectors: {connect} } = useNode();
+export const CardTop = ({ children }) => {
+  const {
+    connectors: { connect }
+  } = useNode();
   return (
-    <div ref={connect} className="text-only" style={{padding: "10px", marginBottom:"10px", borderBottom: "1px solid #eee", display: "flex", flexDirection: "column", alignItems:"flex-start"}}>
+    <div
+      ref={connect}
+      className="text-only"
+      style={{
+        padding: "10px",
+        marginBottom: "10px",
+        borderBottom: "1px solid #eee",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start"
+      }}
+    >
       {children}
     </div>
-  )
-}
+  );
+};
 
 CardTop.craft = {
   rules: {
-    canMoveIn: (incomingNode) => incomingNode.data.type == Text
+    canMoveIn: incomingNode => incomingNode.data.type === Text
   }
-}
+};
 
-export const CardBottom = ({children}) => {
-  const { connectors: {connect} } = useNode();
+export const CardBottom = ({ children }) => {
+  const {
+    connectors: { connect }
+  } = useNode();
   return (
-    <div style={{padding:"10px 0"}} ref={connect}>
+    <div style={{ padding: "10px 0" }} ref={connect}>
       {children}
     </div>
-  )
-}
+  );
+};
 
 CardBottom.craft = {
   rules: {
-    canMoveIn : (incomingNode) => incomingNode.data.type == Button
+    canMoveIn: incomingNode => incomingNode.data.type === Button
   }
-}
+};
 
-export const Card = ({background, padding = 20}) => {
+export const Card = ({ background, padding = 20 }) => {
   return (
     <Container background={background} padding={padding}>
       <Canvas id="text" is={CardTop}>
@@ -45,12 +64,12 @@ export const Card = ({background, padding = 20}) => {
         <Button size="small" text="Learn more" />
       </Canvas>
     </Container>
-  )
-}
+  );
+};
 
 Card.craft = {
   defaultProps: ContainerDefaultProps,
   related: {
     settings: ContainerSettings
   }
-}
\ No newline at end of file
+};
diff --git a/packages/examples/basic/components/user/Container.js b/packages/examples/basic/components/user/Container.js
index b138de58c..5eb4dba90 100644
--- a/packages/examples/basic/components/user/Container.js
+++ b/packages/examples/basic/components/user/Container.js
@@ -1,19 +1,22 @@
-import React  from "react";
-import {Card as MaterialCard, CardContent, Slider} from "@material-ui/core";
-import Text from "./Text";
-import Button from "./Button";
-import { Canvas, useNode } from "@craftjs/core";
-import {Paper, FormControl, FormLabel, RadioGroup,Radio, FormControlLabel} from "@material-ui/core";
-import ColorPicker from 'material-ui-color-picker'
+import React from "react";
+import { Slider } from "@material-ui/core";
+import { useNode } from "@craftjs/core";
+import { Paper, FormControl, FormLabel } from "@material-ui/core";
+import ColorPicker from "material-ui-color-picker";
 
-export const Container = ({background, padding, children}) => {
-  const { connectors: {connect, drag} } = useNode();
+export const Container = ({ background, padding, children }) => {
+  const {
+    connectors: { connect, drag }
+  } = useNode();
   return (
-    <Paper ref={ref=> connect(drag(ref))} style={{margin: "5px 0", background, padding: `${padding}px`}}>
+    <Paper
+      ref={ref => connect(drag(ref))}
+      style={{ margin: "5px 0", background, padding: `${padding}px` }}
+    >
       {children}
     </Paper>
-  )
-}
+  );
+};
 
 export const ContainerSettings = () => {
   const { background, padding, setProp } = useNode(node => ({
@@ -25,20 +28,26 @@ export const ContainerSettings = () => {
     <div>
       <FormControl fullWidth={true} margin="normal" component="fieldset">
         <FormLabel component="legend">Background</FormLabel>
-        <ColorPicker value={background} onChange={color => {
-          setProp(props => props.background = color)
-        }} />
+        <ColorPicker
+          value={background}
+          onChange={color => {
+            setProp(props => (props.background = color));
+          }}
+        />
       </FormControl>
       <FormControl fullWidth={true} margin="normal" component="fieldset">
         <FormLabel component="legend">Padding</FormLabel>
-        <Slider defaultValue={padding} onChange={(_, value) => setProp(props => props.padding = value)} />
+        <Slider
+          defaultValue={padding}
+          onChange={(_, value) => setProp(props => (props.padding = value))}
+        />
       </FormControl>
     </div>
-  )
-}
+  );
+};
 
 export const ContainerDefaultProps = {
-  background : "#ffffff",
+  background: "#ffffff",
   padding: 3
 };
 
@@ -47,4 +56,4 @@ Container.craft = {
   related: {
     settings: ContainerSettings
   }
-}
\ No newline at end of file
+};
diff --git a/packages/examples/basic/components/user/Text.js b/packages/examples/basic/components/user/Text.js
index 333a03ba1..af410f0f6 100644
--- a/packages/examples/basic/components/user/Text.js
+++ b/packages/examples/basic/components/user/Text.js
@@ -1,42 +1,47 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import { useNode } from "@craftjs/core";
-import ContentEditable from 'react-contenteditable'
-import {Slider, FormControl, FormLabel} from "@material-ui/core";
+import ContentEditable from "react-contenteditable";
+import { Slider, FormControl, FormLabel } from "@material-ui/core";
 
-export const Text= ({text, fontSize, textAlign}) => {
-  const { connectors: {connect, drag}, selected, setProp } = useNode((state) => ({
+export const Text = ({ text, fontSize, textAlign }) => {
+  const {
+    connectors: { connect, drag },
+    selected,
+    setProp
+  } = useNode(state => ({
     selected: state.events.selected,
     dragged: state.events.dragged
   }));
 
   const [editable, setEditable] = useState(false);
 
-  useEffect(() => {!selected && setEditable(false)}, [selected]);
+  useEffect(() => {
+    !selected && setEditable(false);
+  }, [selected]);
 
   return (
-    <div 
+    <div
       ref={ref => connect(drag(ref))}
-      onClick={e =>  selected && setEditable(true)}
+      onClick={e => selected && setEditable(true)}
     >
       <ContentEditable
-        html={text} 
+        html={text}
         disabled={!editable}
-        onChange={e => 
-          setProp(props => 
-            props.text = e.target.value.replace(/<\/?[^>]+(>|$)/g, "")  
+        onChange={e =>
+          setProp(
+            props =>
+              (props.text = e.target.value.replace(/<\/?[^>]+(>|$)/g, ""))
           )
-        } 
+        }
         tagName="p"
-        style={{fontSize: `${fontSize}px`, textAlign}}
+        style={{ fontSize: `${fontSize}px`, textAlign }}
       />
     </div>
-
-  )
-}
-
+  );
+};
 
 const TextSettings = () => {
-  const { setProp, fontSize } = useNode((node) => ({
+  const { setProp, fontSize } = useNode(node => ({
     text: node.data.props.text,
     fontSize: node.data.props.fontSize
   }));
@@ -51,13 +56,13 @@ const TextSettings = () => {
           min={1}
           max={50}
           onChange={(_, value) => {
-            setProp(props => props.fontSize = value);
+            setProp(props => (props.fontSize = value));
           }}
         />
       </FormControl>
     </>
-  )
-}
+  );
+};
 
 export const TextDefaultProps = {
   text: "Hi",
@@ -66,7 +71,7 @@ export const TextDefaultProps = {
 
 Text.craft = {
   defaultProps: TextDefaultProps,
-  related : {
+  related: {
     settings: TextSettings
   }
-}
\ No newline at end of file
+};
diff --git a/packages/examples/basic/next.config.js b/packages/examples/basic/next.config.js
index 882e6151b..3b10623a4 100644
--- a/packages/examples/basic/next.config.js
+++ b/packages/examples/basic/next.config.js
@@ -1,22 +1,19 @@
-const withPlugins = require('next-compose-plugins');
-const withTM = require('next-transpile-modules')
-const withCSS = require('@zeit/next-css')
+const withPlugins = require("next-compose-plugins");
+const withTM = require("next-transpile-modules");
+const withCSS = require("@zeit/next-css");
 
-
-let plugins = [
-  [withCSS]
-];
+let plugins = [[withCSS]];
 
 /** For development purposes */
-if ( process.env.NODE_ENV != "production" ) {
-  plugins.push(
-    [withTM, {
-      transpileModules: ['@craftjs/core', '@craftjs/utils']
-    }]
-  )
+if (process.env.NODE_ENV !== "production") {
+  plugins.push([
+    withTM,
+    {
+      transpileModules: ["@craftjs/core", "@craftjs/utils"]
+    }
+  ]);
 }
 
-
 module.exports = withPlugins(plugins, {
-  assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/basic' : '',
-});
\ No newline at end of file
+  assetPrefix: process.env.NODE_ENV === "production" ? "/examples/basic" : ""
+});
diff --git a/packages/examples/basic/pages/_app.js b/packages/examples/basic/pages/_app.js
index dd776d9e7..9d9e7d120 100644
--- a/packages/examples/basic/pages/_app.js
+++ b/packages/examples/basic/pages/_app.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import App from 'next/app';
-import Head from 'next/head';
-import { ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import theme from '../src/theme';
+import React from "react";
+import App from "next/app";
+import Head from "next/head";
+import { ThemeProvider } from "@material-ui/core/styles";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import theme from "../src/theme";
 
 export default class MyApp extends App {
   componentDidMount() {
     // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side');
+    const jssStyles = document.querySelector("#jss-server-side");
     if (jssStyles) {
       jssStyles.parentElement.removeChild(jssStyles);
     }
diff --git a/packages/examples/basic/pages/_document.js b/packages/examples/basic/pages/_document.js
index 05473eab3..72cfde4e9 100644
--- a/packages/examples/basic/pages/_document.js
+++ b/packages/examples/basic/pages/_document.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import Document, { Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/core/styles';
-import theme from '../src/theme';
+import React from "react";
+import Document, { Head, Main, NextScript } from "next/document";
+import { ServerStyleSheets } from "@material-ui/core/styles";
+import theme from "../src/theme";
 
 export default class MyDocument extends Document {
   render() {
@@ -58,7 +58,7 @@ MyDocument.getInitialProps = async ctx => {
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: App => props => sheets.collect(<App {...props} />),
+      enhanceApp: App => props => sheets.collect(<App {...props} />)
     });
 
   const initialProps = await Document.getInitialProps(ctx);
@@ -66,6 +66,9 @@ MyDocument.getInitialProps = async ctx => {
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
-    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      sheets.getStyleElement()
+    ]
   };
 };
diff --git a/packages/examples/basic/pages/about.js b/packages/examples/basic/pages/about.js
index 536f80b12..3fa59f761 100644
--- a/packages/examples/basic/pages/about.js
+++ b/packages/examples/basic/pages/about.js
@@ -1,21 +1,21 @@
-import React from 'react';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import MuiLink from '@material-ui/core/Link';
-import Button from '@material-ui/core/Button';
-import ProTip from '../src/ProTip';
-import Link from '../src/Link';
+import React from "react";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import MuiLink from "@material-ui/core/Link";
+import Button from "@material-ui/core/Button";
+import ProTip from "../src/ProTip";
+import Link from "../src/Link";
 
 function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
+      {"Copyright © "}
       <MuiLink color="inherit" href="https://material-ui.com/">
         Your Website
-      </MuiLink>{' '}
+      </MuiLink>{" "}
       {new Date().getFullYear()}
-      {'.'}
+      {"."}
     </Typography>
   );
 }
@@ -27,7 +27,13 @@ export default function About() {
         <Typography variant="h4" component="h1" gutterBottom>
           Next.js example
         </Typography>
-        <Button variant="contained" color="primary" component={Link} naked href="/">
+        <Button
+          variant="contained"
+          color="primary"
+          component={Link}
+          naked
+          href="/"
+        >
           Go to the main page
         </Button>
         <ProTip />
diff --git a/packages/examples/basic/pages/index.js b/packages/examples/basic/pages/index.js
index abd1fc180..68eb78723 100644
--- a/packages/examples/basic/pages/index.js
+++ b/packages/examples/basic/pages/index.js
@@ -1,57 +1,53 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import "../styles/main.css";
-import {Typography, Button as MaterialButton, Paper, Grid, makeStyles} from '@material-ui/core';
-import {Toolbox} from '../components/Toolbox';
-import {Container} from '../components/user/Container';
-import {Button} from '../components/user/Button';
-import {Card, CardBottom, CardTop} from '../components/user/Card';
-import {Text} from '../components/user/Text';
-import {SettingsPanel} from '../components/SettingsPanel';
-import {Editor, Frame, Canvas} from "@craftjs/core";
-import { Topbar } from '../components/Topbar';
+import { Typography, Paper, Grid, makeStyles } from "@material-ui/core";
+import { Toolbox } from "../components/Toolbox";
+import { Container } from "../components/user/Container";
+import { Button } from "../components/user/Button";
+import { Card, CardBottom, CardTop } from "../components/user/Card";
+import { Text } from "../components/user/Text";
+import { SettingsPanel } from "../components/SettingsPanel";
+import { Editor, Frame, Canvas } from "@craftjs/core";
+import { Topbar } from "../components/Topbar";
 
 const useStyles = makeStyles(theme => ({
   root: {
     padding: 0,
     background: "rgb(252, 253, 253)"
   }
-}))
+}));
 export default function App() {
   const classes = useStyles();
-  const [enabled, setEnabled] = useState(true);
-
   const [json, setJson] = useState(null);
 
   return (
-    <div style={{margin: "0 auto", width: "800px"}}>
-      <Typography style={{margin: "20px 0"}} variant="h5" align="center">Basic Page Editor</Typography>
-        <Editor
-          resolver={{Card, Button, Text, Container, CardTop, CardBottom}}
-          enabled={enabled}
-        > 
-          <Topbar onLoadState={(json) => setJson(json)} />
-          <Grid container spacing={5} style={{paddingTop: "10px"}}>
-            <Grid item xs>
-              <Frame json={json}>
-                <Canvas is={Container} padding={5} background="#eeeeee">
-                  <Card />
-                  <Button text="Click me" size="small" />
-                  <Text fontSize={20} text="Hi world!" />
-                  <Canvas is={Container} padding={6} background="#999999">
-                    <Text size="small" text="It's me again!" />
-                  </Canvas>
+    <div style={{ margin: "0 auto", width: "800px" }}>
+      <Typography style={{ margin: "20px 0" }} variant="h5" align="center">
+        Basic Page Editor
+      </Typography>
+      <Editor resolver={{ Card, Button, Text, Container, CardTop, CardBottom }}>
+        <Topbar onLoadState={json => setJson(json)} />
+        <Grid container spacing={5} style={{ paddingTop: "10px" }}>
+          <Grid item xs>
+            <Frame json={json}>
+              <Canvas is={Container} padding={5} background="#eeeeee">
+                <Card />
+                <Button text="Click me" size="small" />
+                <Text fontSize={20} text="Hi world!" />
+                <Canvas is={Container} padding={6} background="#999999">
+                  <Text size="small" text="It's me again!" />
                 </Canvas>
-              </Frame>
-            </Grid>
-            <Grid item xs={4}>
-              <Paper className={classes.root}>
-                <Toolbox />
-                <SettingsPanel />
-              </Paper>
-            </Grid>
+              </Canvas>
+            </Frame>
+          </Grid>
+          <Grid item xs={4}>
+            <Paper className={classes.root}>
+              <Toolbox />
+              <SettingsPanel />
+            </Paper>
           </Grid>
-            
-        </Editor>
+        </Grid>
+      </Editor>
     </div>
   );
 }
diff --git a/packages/examples/basic/src/Link.js b/packages/examples/basic/src/Link.js
index 7d481dba5..af795b227 100644
--- a/packages/examples/basic/src/Link.js
+++ b/packages/examples/basic/src/Link.js
@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import NextLink from 'next/link';
-import MuiLink from '@material-ui/core/Link';
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { useRouter } from "next/router";
+import NextLink from "next/link";
+import MuiLink from "@material-ui/core/Link";
 
 const NextComposed = React.forwardRef(function NextComposed(props, ref) {
   const { as, href, prefetch, ...other } = props;
@@ -19,14 +19,14 @@ const NextComposed = React.forwardRef(function NextComposed(props, ref) {
 NextComposed.propTypes = {
   as: PropTypes.string,
   href: PropTypes.string,
-  prefetch: PropTypes.bool,
+  prefetch: PropTypes.bool
 };
 
 // A styled version of the Next.js Link component:
 // https://nextjs.org/docs/#with-link
 function Link(props) {
   const {
-    activeClassName = 'active',
+    activeClassName = "active",
     className: classNameProps,
     innerRef,
     naked,
@@ -35,14 +35,21 @@ function Link(props) {
   const router = useRouter();
 
   const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === props.href && activeClassName,
+    [activeClassName]: router.pathname === props.href && activeClassName
   });
 
   if (naked) {
     return <NextComposed className={className} ref={innerRef} {...other} />;
   }
 
-  return <MuiLink component={NextComposed} className={className} ref={innerRef} {...other} />;
+  return (
+    <MuiLink
+      component={NextComposed}
+      className={className}
+      ref={innerRef}
+      {...other}
+    />
+  );
 }
 
 Link.propTypes = {
@@ -53,7 +60,9 @@ Link.propTypes = {
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   naked: PropTypes.bool,
   onClick: PropTypes.func,
-  prefetch: PropTypes.bool,
+  prefetch: PropTypes.bool
 };
 
-export default React.forwardRef((props, ref) => <Link {...props} innerRef={ref} />);
+export default React.forwardRef((props, ref) => (
+  <Link {...props} innerRef={ref} />
+));
diff --git a/packages/examples/basic/src/ProTip.js b/packages/examples/basic/src/ProTip.js
index e9b38c4db..ca34d6964 100644
--- a/packages/examples/basic/src/ProTip.js
+++ b/packages/examples/basic/src/ProTip.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Link from "@material-ui/core/Link";
+import SvgIcon from "@material-ui/core/SvgIcon";
+import Typography from "@material-ui/core/Typography";
 
 function LightBulbIcon(props) {
   return (
@@ -14,12 +14,12 @@ function LightBulbIcon(props) {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    margin: theme.spacing(6, 0, 3),
+    margin: theme.spacing(6, 0, 3)
   },
   lightBulb: {
-    verticalAlign: 'middle',
-    marginRight: theme.spacing(1),
-  },
+    verticalAlign: "middle",
+    marginRight: theme.spacing(1)
+  }
 }));
 
 export default function ProTip() {
@@ -27,9 +27,11 @@ export default function ProTip() {
   return (
     <Typography className={classes.root} color="textSecondary">
       <LightBulbIcon className={classes.lightBulb} />
-      Pro tip: See more{' '}
-      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
-      Material-UI documentation.
+      Pro tip: See more{" "}
+      <Link href="https://material-ui.com/getting-started/templates/">
+        templates
+      </Link>{" "}
+      on the Material-UI documentation.
     </Typography>
   );
 }
diff --git a/packages/examples/basic/src/theme.js b/packages/examples/basic/src/theme.js
index 21af17c75..15f034c55 100644
--- a/packages/examples/basic/src/theme.js
+++ b/packages/examples/basic/src/theme.js
@@ -1,22 +1,22 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { createMuiTheme } from "@material-ui/core/styles";
+import { red } from "@material-ui/core/colors";
 
 // Create a theme instance.
 const theme = createMuiTheme({
   palette: {
     primary: {
-      main: '#556cd6',
+      main: "#556cd6"
     },
     secondary: {
-      main: '#19857b',
+      main: "#19857b"
     },
     error: {
-      main: red.A400,
+      main: red.A400
     },
     background: {
-      default: '#fff',
-    },
-  },
+      default: "#fff"
+    }
+  }
 });
 
 export default theme;