Minor docs updates

packages/docs/docs/additional/layers.md

@@ -82,7 +82,7 @@ export default function App() {
 
 
 ## Default components
-These following components are available for you to extend upon if you wish to design your own component to render the layers (which can be specified in the `renderLayer` prop).
+The following components are available for you to extend if you wish to design your own component to render the layers (which can be specified in the `renderLayer` prop).
 
 - `<DefaultLayer />` 
   - `<DefaultLayerHeader />` 

packages/docs/docs/api/Frame.md

@@ -54,7 +54,7 @@ const App = () => {
 }
 ```
 
-### Loading from serialised Nodes
+### Loading from serialized Nodes
 ```tsx {10}
 import {Editor, Frame, Element} from "@craftjs/core";
 

packages/docs/docs/api/useNode.md

@@ -126,7 +126,7 @@ const Example = () => {
 ```
 
 ### Usage within child components
-Since User Components are contextually bounded by the `Node` that they are being managed by, thus `useNode` can be used anywhere **within** the component tree.
+Since User Components are contextually bounded by the `Node` they are being managed by, `useNode` can be used anywhere **within** the component tree.
 
 In the previous example, we didn't actually need to forward refs from `CustomDragHandler` since it's bounded by the same `Node` as its parent. Instead, we can just use the connectors from `useNode` directly.
 
@@ -188,7 +188,7 @@ For Class Components, use `connectNode` instead.
 
 ### Parameters
 <API items={[
-  ["collector", "(node: Node) => Collected", "A function that collects relevant state information from the corresponding Node. The component will re-render when the values returned by this function changes."]
+  ["collector", "(node: Node) => Collected", "A function that collects relevant state information from the corresponding Node. The component will re-render when the values returned by this function change."]
 ]} /> 
 
 ### Injected Props

packages/docs/docs/concepts/user-components.md

@@ -73,9 +73,9 @@ const App = () => {
 }
 ```
 
-- i. `Hero` is being rendered with a Canvas Node, thus it defines a droppable region. However, since it is not a child of a Canvas Node, it is not draggable (the `drag` handler will not do anything).
-- ii. `Hero` is an immediate child of a Canvas Node; it is draggable.
-- iii. `Hero` is an immediate child of a Canvas Node and is rendered with a Canvas Node - it is both draggable and droppable.
+- i. `Element` is being rendered with a Canvas Node, thus it defines a droppable region. However, since it is not a child of a Canvas Node, it is not draggable (the `drag` handler will not do anything).
+- ii. `Container` is an immediate child of a Canvas Node; it is draggable.
+- iii. `Element` is an immediate child of a Canvas Node and is rendered with a Canvas Node - it is both draggable and droppable.
 
 ## Props manipulation
 You've probably seen page editors where you could directly interact with the components and manipulate them. For instance, drag to resize an image or visually edit a text. This is easily achievable with Craft.js as well.
@@ -132,7 +132,7 @@ To prevent that, we can explicitly specify default prop values via the `craft.pr
 
 ```jsx
 const Text = ({text, fontSize}) => { /** same as previous example **/ }
-Hero.craft = {
+Text.craft = {
   props: {
     text: "Hi there!",
     fontSize: 12
@@ -224,7 +224,7 @@ const Hero = ({background}) => {
 }
 ```
 
-Then, we decide that we want to have the `span` element to be editable indepdently via the Text user component that we made from earlier.
+Then, we decide that we want to have the `span` element to be editable independent of the Text user component we made earlier.
 
 Your first instinct might be to just use the Text component directly:
 

packages/docs/docs/guides/basic-tutorial.md

@@ -68,7 +68,7 @@ export const Button = ({size, variant, color, children}) => {
 ```
 
 #### Container
-We will also create a Container component which would allow our users to change its background colour and padding.
+We will also create a Container component to allow our users to change its background colour and padding.
 
 ```jsx
 // components/user/Container.js
@@ -112,7 +112,7 @@ export const Card = ({background, padding = 20}) => {
 
 ### The Editor
 #### Toolbox
-Let's build a "toolbox" which our users would be able to drag and drop to create new instances of those User Components we just defined.
+Let's build a "toolbox" which our users will be able to drag and drop to create new instances of those User Components we just defined.
 
 ```jsx
 // components/Toolbox.js
@@ -145,7 +145,7 @@ export const Toolbox = () => {
 ```
 
 #### Settings Panel
-We would also want to create a section here where we can display a bunch of settings which our users could use to edit the props of the user components.
+We also want to create a section here where we can display a bunch of settings which our users can use to edit the props of the user components.
 
 For now, let's just put in some dummy text fields. We'll revisit this in the later sections.
 
@@ -339,7 +339,7 @@ By default, every element inside the `<Frame />` will have a non-Canvas Node aut
 </Frame>
 ```
 
-Hence, by default, all the Nodes above are neither draggable or droppable. So how can we define some of the Nodes above as a Canvas Node? 
+Hence, by default, all the Nodes above are neither draggable nor droppable. So how can we define some of the Nodes above as a Canvas Node? 
 
 We can use the provided `<Element />` component to manually define Nodes:
 
@@ -356,7 +356,7 @@ We can use the provided `<Element />` component to manually define Nodes:
 </Frame>
 ```
 
-In the above code, we've wrapped our `Container` components with `<Element />` with the `canvas` prop, thus making the component droppable and it's immediate children, draggable.
+In the above code, we've wrapped our `Container` components with `<Element />` with the `canvas` prop, thus making the component droppable and its immediate children, draggable.
 
 Once you've applied these changes and refresh the page, you will notice that absolutely nothing has changed - and that's a good thing!
 
@@ -549,9 +549,9 @@ export default function App() {
 
 
 ### Implementing the Toolbox
-Let's go back to our Toolbox component and make it so that dragging those buttons into the editor would create new instances of the user components they represent. Just as `useNode` provides methods and information related to a specific `Node`, `useEditor` specifies methods and information related to the entire editor's state.
+Let's go back to our Toolbox component and modify it so that dragging those buttons into the editor will create new instances of the user components they represent. Just as `useNode` provides methods and information related to a specific `Node`, `useEditor` specifies methods and information related to the entire editor's state.
 
-The `useEditor` also provides `connectors`; the one we are interested in right now is `create` which attaches a drag handler to the  DOM specified in its first arguement and creates the element specified in its second arguement.
+The `useEditor` also provides `connectors`; the one we are interested in right now is `create` which attaches a drag handler to the  DOM specified in its first argument and creates the element specified in its second arguement.
 
 ```jsx {20,23,26}
 // components/Toolbox.js
@@ -590,12 +590,12 @@ export const Toolbox = () => {
 };
 ```
 
-Notice for our Container component, we wrapped it with the `<Element canvas />` - this makes it so that our users will be able to drag and drop a new Container component that is droppable.
+Notice for our Container component, we wrapped it with the `<Element canvas />` - this will allow our users to drag and drop a new Container component that is droppable.
 
-Now, you could drag and drop the Buttons, and they would actually create new instances of our User Components.
+Now, you can drag and drop the Buttons, and they will actually create new instances of our User Components.
 
 ### Making the components editable
-Up until this point, we have a page editor where our users can move elements around. But, we are missing one important thing - enabling our users to edit these components' props.
+Up until this point, we have a page editor where our users can move elements around. But, we are missing one important thing - enabling our users to edit the components' props.
 
 The `useNode` hook provides us with the method `setProp` which can be used to manipulate a component's props. Let's implement a content editable for our Text Component:
 
@@ -659,7 +659,7 @@ export const Text = ({text, fontSize}) => {
 
 <Image img="tutorial/text-edit.gif" />
 
-This should give you an idea on the possibilities of implementing powerful visual editing features like what you'd see in most modern page editors.
+This should give you an idea of the possibilities of implementing powerful visual editing features like what you'd see in most modern page editors.
 
 While we are at it, let's also add a slider for users to edit the `fontSize`
 ```jsx
@@ -1029,7 +1029,7 @@ This is the last part of the editor that we have to take care of and then we're
 
 First, we can get the editor's `enabled` state by passing in a collector function just like what we did before. Then, we can use the `setOptions` action to toggle the `enabled` state.
 
-Lastly, the `useEditor` hook also provides `query` methods which provide information based the editor'state. In our case,  we would like to get the current state of all the `Nodes` in a serialised form; we can do this by calling the `serialize` query method. 
+Lastly, the `useEditor` hook also provides `query` methods which provide information based the editor'state. In our case,  we would like to get the current state of all the `Nodes` in a serialized form; we can do this by calling the `serialize` query method. 
 
 ```jsx {4,7-9,16,25-27}
 // components/Topbar.js
@@ -1075,7 +1075,7 @@ export const Topbar = () => {
 
 
 ## You made it 🎉
-We've made it until the end! Not too bad right? Hopefully, you're able to see the simplicity of building a fully working page editor with Craft.js.
+We've made it to the end! Not too bad right? Hopefully, you're able to see the simplicity of building a fully working page editor with Craft.js.
 
 We do not need to worry about implementing the drag-n-drop system but rather simply focus on writing rules and attaching connectors to the desired elements.
 

packages/docs/docs/guides/save-load.md

@@ -8,11 +8,11 @@ import {Image} from "@site/src/components";
 This guide extends upon the [Basic Tutorial](/craft.js/r/docs/basic-tutorial)
 
 ## Overview
-Previously, we saw how we could serialise the entire state of `Nodes` in our editor into JSON. Of course, you probably will not want to store the JSON in your server or database, for obvious reasons. Instead, you should first employ a text compression technique of your choice to compress the serialised JSON Nodes.
+Previously, we saw how we could serialize the entire state of `Nodes` in our editor into JSON. Of course, you probably will not want to store the JSON in your server or database, for obvious reasons. Instead, you should first employ a text compression technique of your choice to compress the serialized JSON Nodes.
 
 In this guide, we'll be mainly modifying the previous tutorial's Topbar component. We'll add 2 new features
-- Copy the compressed output of the serialised Nodes to the user's clipboard
-- Load the editor state from a compressed output of serialised Nodes.
+- Copy the compressed output of the serialized Nodes to the user's clipboard
+- Load the editor state from a compressed output of serialized Nodes.
 
 We'll be using 2 external libraries - `lzutf8` (for compression) and `copy-to-clipboard` (you know)
 ```bash
@@ -75,9 +75,9 @@ const [snackbarMessage, setSnackbarMessage] = useState();
 When you click on the button now, it should copy the compressed base64 string to the clipboard.
 
 ## Load state
-Now let's implement the Load State button in our Topbar component. We will display a Dialog box when the button is clicked, and our users would be able to paste the compressed base64 string here. 
+Now let's implement the Load State button in our Topbar component. We will display a Dialog box when the button is clicked, and our users will be able to paste the compressed base64 string there. 
 
-Then, we would need to work in reverse to obtain the original JSON provided by our editor. Finally, we'll call the `deserialize` action which will result in the editor replacing all the current Nodes in the editor with the deserialized output.
+Then, we will need to work in reverse to obtain the original JSON provided by our editor. Finally, we'll call the `deserialize` action which will result in the editor replacing all the current Nodes in the editor with the deserialized output.
 
 ```jsx {12-14,40-83}
 import React, { useState } from "react";
@@ -181,7 +181,7 @@ export const Topbar = () => {
 ### Load JSON on page load
 Of course, what if we wanted our editor to load a serialized output on page load? For this, we will need to take a step back and revisit the `<Frame />` component which we encountered when we first set up Craft.js. 
 
-By default, it constructs the editor state based on whats was initially rendered in its `children`. But, we could also specifiy the serialised JSON nodes to its `json` prop which would cause it to load the state from the JSON string instead. 
+By default, it constructs the editor state based on what was initially rendered in its `children`. But, we could also specifiy the serialized JSON nodes to its `json` prop which would cause it to load the state from the JSON string instead. 
 
 ```jsx
 import React, {useState, useEffect} from 'react';