### Install and Run Craft.js Basic Demo

Source: https://github.com/prevwong/craft.js/blob/main/examples/basic/README.md

Instructions to clone the Craft.js repository, navigate to the basic example directory, install npm dependencies, and start the development server.

```bash
> git clone https://github.com/prevwong/craft.js/
> cd craft.js/examples/basic
> npm install
> npm start
```

--------------------------------

### Project Setup and Development

Source: https://github.com/prevwong/craft.js/blob/main/CONTRIBUTING.md

Steps to clone the repository, install dependencies, and start the development server for Craft.js.

```bash
git clone https://github.com/your-name/craft.js
cd craft.js
yarn install
yarn dev
```

--------------------------------

### Basic Editor Setup

Source: https://github.com/prevwong/craft.js/blob/main/packages/core/README.md

This example demonstrates the fundamental setup of a Craft.js editor. It includes the `Editor`, `Frame`, and `Element` components, along with defining custom components like `TextComponent` and `Container`.

```jsx
import React from "react";
import { Editor, Frame, Element  } from "@craftjs/core";

// Assuming TextComponent and Container are defined elsewhere
// const TextComponent = ({ text }) => { ... };
// const Container = () => { ... };

const App = () => {
  return (
    <div>
      <header>Some fancy header or whatever</header>
      <Editor>
        {/* Editable area starts here */}
        <Frame resolver={{ TextComponent, Container }}>
          <Element canvas is={TextComponent} text="I'm already rendered here" />
        </Frame>
      </Editor>
    </div>
  );
};

```

--------------------------------

### Basic Editor Setup

Source: https://github.com/prevwong/craft.js/blob/main/README.md

This example demonstrates the fundamental setup of a Craft.js editor. It includes the `Editor`, `Frame`, and `Element` components, along with defining custom components like `TextComponent` and `Container`.

```jsx
import React from "react";
import { Editor, Frame, Element  } from "@craftjs/core";

// Assuming TextComponent and Container are defined elsewhere
// const TextComponent = ({ text }) => { ... };
// const Container = () => { ... };

const App = () => {
  return (
    <div>
      <header>Some fancy header or whatever</header>
      <Editor>
        {/* Editable area starts here */}
        <Frame resolver={{ TextComponent, Container }}>
          <Element canvas is={TextComponent} text="I'm already rendered here" />
        </Frame>
      </Editor>
    </div>
  );
};

```

--------------------------------

### Install UI Packages

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

Installs additional packages for UI design, including Material-UI components and a color picker.

```bash
yarn add @mui/material react-contenteditable material-ui-color-picker
```

--------------------------------

### Install Craft.js

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

Installs the Craft.js core library using either Yarn or npm package managers.

```bash
yarn add @craftjs/core
```

```bash
npm install --save @craftjs/core
```

--------------------------------

### Install @craftjs/layers

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/additional/layers.md

Installs the @craftjs/layers package using Yarn.

```bash
yarn add @craftjs/layers
```

--------------------------------

### Craft.js Editor Setup

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

This snippet demonstrates the basic setup of a Craft.js editor in a React application. It includes importing necessary components from Craft.js and Material-UI, defining user components, and structuring the editor layout with `<Editor>`, `<Frame>`, and nested components.

```jsx
import React from 'react';
import {Typography, Paper, Grid} from '@mui/material';

import { Toolbox } from '../components/Toolbox';
import { SettingsPanel } from '../components/SettingsPanel';

import { Container } from '../components/user/Container';
import { Button } from '../components/user/Button';
import { Card } from '../components/user/Card';
import { Text } from '../components/user/Text';

import {Editor, Frame, Element} from "@craftjs/core";

export default function App() {
  return (
    <div>
      <Typography variant="h5" align="center">A super simple page editor</Typography>
        <Editor resolver={{Card, Button, Text, Container}}> 
          <Grid container spacing={3}>
            <Grid item xs>
              <Frame>
                <Container padding={5} background="#eee">
                  <Card />
                  <Button size="small" variant="outlined">Click</Button>
                  <Text size="small" text="Hi world!" />
                  <Container padding={6} background="#999">
                    <Text size="small" text="It's me again!" />
                  </Container>
                </Container>
              </Frame>
            </Grid>
            <Grid item xs={3}>
              <Paper className={classes.root}>
                  <Toolbox />
                  <SettingsPanel />
              </Paper>          
            </Grid>
          </Grid>
        </Editor>
    </div>
  );
}
```

--------------------------------

### Install Compression and Clipboard Libraries

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/save-load.md

Installs the necessary libraries, `lzutf8` for compression and `copy-to-clipboard` for clipboard functionality, using Yarn.

```bash
yarn add lzutf8 copy-to-clipboard
```

--------------------------------

### Install @craftjs/layers

Source: https://github.com/prevwong/craft.js/blob/main/packages/layers/README.md

Installs the @craftjs/layers package and its peer dependency styled-components using yarn.

```bash
yarn add @craftjs/layers styled-components
```

--------------------------------

### Basic Element Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/Node.md

Demonstrates the creation of a simple HTML element as a Craft.js Node, showing its structure and how it's represented in the project's data.

```jsx
// Example
<div style={{background: "#eee"}}>Hello</h2>

"node-a": {
  id: "node-a",
  data: {
    type: "div",
    props: {
      style: {{
        background: "#eee",
      }}
      children: "Hello"
    },
    name: "div",
    displayName: "div",
    isCanvas: false
  }
}
```

--------------------------------

### Basic Editor with Layers

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/additional/layers.md

Demonstrates a basic Craft.js editor setup that includes the Layers component.

```jsx
import React from "react";
import {Editor} from "@craftjs/core"
import {Layers} from "@craftjs/layers"

export default function App() {
  return (
    <div style={{margin: "0 auto", width: "800px"}}>
      <Typography variant="h5" align="center">A super simple page editor</Typography>
      <Editor resolver={...}>
        <Layers />
      </Editor>
    </div>
  );
}
```

--------------------------------

### Craft.js Editor Setup

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/overview.md

Illustrates the basic structure of a Craft.js editor application. It includes the `Editor`, `Frame`, and `Canvas` components, along with a custom `TextComponent` and `Container`.

```jsx
import React from "react";
import {Editor, Frame, Canvas, Selector} from "@craftjs/core";

// Assuming TextComponent and Container are defined elsewhere
// const TextComponent = ({text}) => { ... }
// const Container = () => { ... }

const App = () => {
  return (
    <div>
      <header>Some fancy header or whatever</header>
      <Editor>
        // Editable area starts here
        <Frame resolver={TextComponent, Container}> 
          <Canvas>
            <TextComponent text="I'm already rendered here" />
          </Canvas>
        </Frame>
      </Editor>
    </div>
  )
}
```

--------------------------------

### User Component Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/Node.md

Illustrates how to define and use a custom User Component within Craft.js, including setting its name and displaying it in the editor.

```jsx
// Definition
const Container = () => {}
Container.craft = {
  name: "SimpleContainer"
};


// Example
<Container bg="#fff" />

"node-b": {
  id: "node-b",
  data: {
    type: Container,
    props: {
      bg: "#fff"
    },
    name: "Container",
    displayName: "SimpleContainer",
    isCanvas: false
  }
}
```

--------------------------------

### Example JSX Usage

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Illustrative JSX code snippets demonstrating the context in which these Craft.js utility functions might be used within a React application.

```jsx
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <div> // false
          <div>Yo</div> // true
          <h2>It's me</h2> // true
          <Element canvas> // true 
            <h3>Child</h3> // true
            <Container /> // true
          </Element>
        </div>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // false
        <h2>Hi</h2> // true
      </Element>
    </div>
  )
}
```

```jsx
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <div> // true
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <div> // false 
            <h3>Child</h3> // false
            <Container /> // false
          </div>
        </div>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // true
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
      <Element id="secondary"> // true
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
    </div>
  )
}
```

```jsx
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <Element> // false
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <Element> // false 
            <h3>Child</h3> // false
            <Container /> // true
          </Element>
        </Element>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // false
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
      <Element id="seconday"> // false
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
    </div>
  )
}
```

--------------------------------

### NodeHelpers isRoot Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Provides an example demonstrating the usage of the `isRoot` method to check if a node is the root node within the Craft.js editor structure.

```jsx
const App  = () => {
  return (
    <Editor>
      <Frame>
        <div> // true
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <Element is={Container}> // false 
            <h3>Child</h3> // false
          </Element>
        </div>
      </Frame>
    </Editor>
  )
}
```

--------------------------------

### UserComponent Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/UserComponent.md

Demonstrates how to define and configure a UserComponent in craft.js. This includes defining the component's props, its static `craft` configuration for display name, default props, rules, and related settings components.

```jsx
type TextProps = {
  color: string;
  text: string;
};

const TextComponent: UserComponent<TextProps> = ({color, text}) => {
  return (
    <h2 style={{color}}>{text}</h2>
  )
}

const TextSettings = () => {
  const {props, setProp} = useNode();
  return (
    <div>
      Text: <input type="text" value={props.text} onChange={e => setProp(props => props.text = e.target.value) }/>
      Color: <input type="text" value={props.color} onChange={e => setProp(props => props.color = e.target.value) }/>
    </div>
  )
}
TextComponent.craft = {
  displayName: "My Text Component",
  props: {
    color: "#000",
    text: "Hi"
  },
  rules: {
    canDrag: (self: Node, helper) => true,
    canMoveIn: (incoming: Node[], self: Node, helper) => true,
    canMoveOut: (outgoing: Node[], self: Node, helper) => true
  },
  related: {
    settings: TextSettings
  }
}
```

--------------------------------

### NodeHelpers Descendants Examples

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Illustrates the behavior of the `descendants` method with different `deep` and `includeOnly` parameter values, showing how to retrieve child nodes and linked nodes.

```jsx
// The descendants of `div` when deep=false
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>
```

```jsx
// The descendants of `div` when deep=true
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}
```

```jsx
// The descendants of `div` when deep=true and includeOnly="childNodes" only
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}
```

```jsx
// The descendants of `div` when deep=true and includeOnly="linkedNodes" only
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}
```

--------------------------------

### Custom Layer Rendering Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/additional/layers.md

Shows how to use the `renderLayer` prop with a custom Layer component that includes a DefaultLayerHeader.

```jsx
const Layer = () => {
  return (
    <div>
      <DefaultLayerHeader />
    </div>
  )
}

const App = () => {
  return (
    <Editor>
      <Frame>
        ...
      </Frame>
      <Layers 
        renderLayer={Layer}
      />
    </Editor>
  )
}
```

--------------------------------

### NodeTree Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeTree.md

Illustrates how a React element's tree structure is represented using the NodeTree data structure, showing the root node and its child nodes with their respective data.

```jsx
<div>
  <h2>Hello</h2>
  <h2>World</h2>
</div>

// The NodeTree of the div is:
{
  rootNodeId: "node-a",
  nodes: {
    "node-a" : {
      data: {
        type: "div",
        nodes: ["node-b", "node-c"]
      }
    },
    "node-b" : {
      data: {
        type: "h2",
        props: { children: "Hello" }
      }
    },
    "node-c" : {
      data: {
        type: "h2",
        props: { children: "World" }
      }
    }
  }
}
```

--------------------------------

### Linked Nodes Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/Node.md

Demonstrates how to link nodes to a parent via an arbitrary ID using the `linkedNodes` property, enabling complex component compositions.

```jsx
// Definition
const TextEditable = () => {};

const Container = () => {
  return (
    <div>
      // highlight-next-line
      <Element id="header" is={TextEditable} text="Header" />
    </div>
  )
}

// Example
<Container bg="#fff" />

"node-a": {
  id: "node-a",
  data: {
    type: Container,
    props: {...},
    // highlight-next-line
    linkedNodes: {
      // highlight-next-line
      "header": "node-b"
      // highlight-next-line
    }
  }
}

"node-b": {
  id: "node-b",
  data: {
    type: TextEditable,
    props: {...},
    // highlight-next-line
    parent: "node-a"
  }
}
```

--------------------------------

### Creating a Droppable Container Component

Source: https://github.com/prevwong/craft.js/blob/main/README.md

This example shows how to create a container component that acts as a droppable region. By using the `<Canvas />` component, users can drag and drop other components into this container.

```jsx
import {useNode, Canvas} from "@craftjs/core";

// Assuming TextComponent is defined elsewhere
// const TextComponent = ({ text }) => { ... };

const Container = () => {
  const { connectors: {drag} } = useNode();

  return (
    <div ref={drag}>
      <Canvas id="drop_section">
         {/* Now users will be able to drag/drop components into this section */}
        <TextComponent />
      </Canvas>
    </div>
  )
}

```

--------------------------------

### NodeHelpers API Documentation

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Comprehensive documentation for NodeHelpers methods, including get, descendants, ancestors, linkedNodes, childNodes, isRoot, isCanvas, and isLinkedNode, with detailed parameter and return value descriptions.

```APIDOC
NodeHelpers:
  get(): Node
    Get `Node` object from id
    Returns:
      Node

  descendants(deep?: boolean, includeOnly?: 'childNodes' | 'linkedNodes'): NodeId[]
    Returns an array of Node ids of all child Nodes of a given Node.
    Parameters:
      deep: If set to true, retrieve all descendants in nested levels. Default is false
      includeOnly: Get descendants that are either childNodes or linkedNodes. If unset, get all descendants
    Returns:
      NodeId[]

  ancestors(): NodeId[]
    Returns an array of Node ids of all ancestors
    Returns:
      NodeId[]

  linkedNodes(): NodeId[]
    Returns an array of linked Node ids
    Returns:
      NodeId[]

  childNodes(): NodeId[]
    Returns an array of child Node ids
    Returns:
      NodeId[]

  isRoot(): boolean
    Returns `true` if a given Node is the Root Node
    Returns:
      boolean

  isCanvas(): boolean
    Check if a given Node is a Canvas
    Returns:
      boolean

  isLinkedNode(): boolean
    Check if a given Node is linked to the parent Node via an arbitary id
    Returns:
      boolean
```

--------------------------------

### Creating a Droppable Container Component

Source: https://github.com/prevwong/craft.js/blob/main/packages/core/README.md

This example shows how to create a container component that acts as a droppable region. By using the `<Canvas />` component, users can drag and drop other components into this container.

```jsx
import {useNode, Canvas} from "@craftjs/core";

// Assuming TextComponent is defined elsewhere
// const TextComponent = ({ text }) => { ... };

const Container = () => {
  const { connectors: {drag} } = useNode();

  return (
    <div ref={drag}>
      <Canvas id="drop_section">
         {/* Now users will be able to drag/drop components into this section */}
        <TextComponent />
      </Canvas>
    </div>
  )
}

```

--------------------------------

### Creating a Basic User Component

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/user-components.md

This snippet shows a basic React User Component named Hero, which accepts a background prop and renders a div with a span inside. This is the starting point before making elements editable.

```jsx
const Hero = ({background}) => {
  return (
    <div style={{ background }}>
      <span>Hero Title</span>
    </div>
  )
}
```

--------------------------------

### Settings Panel Component Implementation

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

This code defines the `SettingsPanel` component. It uses `useEditor` to get the currently selected node's ID, name, and associated settings. It conditionally renders the panel content if a node is selected, displaying its name and dynamically rendering its settings component.

```jsx
// components/SettingsPanel.js

import { Box, Chip, Grid, Typography, Button as MaterialButton } from "@mui/material";
import { useEditor } from "@craftjs/core";

export const SettingsPanel = () => {
  const { selected } = useEditor((state) => {
    const [currentNodeId] = state.events.selected;
    let selected;

    if ( currentNodeId ) {
      selected = {
        id: currentNodeId,
        name: state.nodes[currentNodeId].data.name,
        settings: state.nodes[currentNodeId].related && state.nodes[currentNodeId].related.settings
      };
    }

    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>
          </Box>
        </Grid>
        {
          selected.settings && React.createElement(selected.settings)
        }
        <MaterialButton
          variant="contained"
          color="default"
        >
          Delete
        </MaterialButton>
      </Grid>
    </Box>
  ) : null
}
```

--------------------------------

### Connectors for DOM Manipulation and Dragging

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/user-components.md

Shows how to use the `connect` and `drag` connectors provided by the `useNode` hook to manage the component's DOM element and enable drag-and-drop functionality within the Craft.js editor. The example also demonstrates the rendering of nested components and canvas elements.

```jsx
const Container = ({children}) => {
  const { connectors: {connect, drag} } = useNode();
  return (
    <div ref={dom => connect(drag(dom))}>
      {children}
    </div>
  )
}

const App = () => {
  return (
    <Editor resolvers={{Container}}>
      <Frame>
        <Element is={Container} canvas> // (i)
          <Container> // (ii)
            <h2>Hi</h2>
          </Container>
          <Element is={Container} canvas> // (iii)
            <h2>Hi</h2>
          </Element>
        </Element>
      </Frame>
    </Editor>
  )
}
```

--------------------------------

### NodeHelpers isCanvas Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Shows an example of using the `isCanvas` method to determine if a node is designated as a canvas element in Craft.js.

```jsx
const App  = () => {
  return (
    <Editor>
      <Frame>
        <Element canvas> // true
          <div>Yo</div> // false
          <Element is={Container}>It's me</Element> // false
          <Element canvas> // true 
            <h3>Child</h3> // false
          </Element>
        </Element>
      </Frame>
    </Editor>
  )
}
```

--------------------------------

### Container Component Settings and Props

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

Defines the settings for the Container component, including background color selection using a HexColorPicker and padding adjustment with a Slider. It also establishes default props for background and padding.

```jsx
// components/user/Container.js
import {FormControl, FormLabel, Slider} from "@mui/material";
import {HexColorPicker} from 'react-colorful'

export const Container = () => {...}

export const ContainerSettings = () => {
  const { background, padding, actions: {setProp} } = useNode(node => ({
    background: node.data.props.background,
    padding: node.data.props.padding
  }));
  return (
    <div>
      <FormControl fullWidth={true} margin="normal" component="fieldset">
        <FormLabel component="legend">Background</FormLabel>
        <HexColorPicker color={background || '#000'} 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)} />
      </FormControl>
    </div>
  )
}

Container.craft = {
  related: {
    settings: ContainerSettings
  }
}

// components/user/Container.js
export const Container = ({background, padding}) => {}

// We export this because we'll be using this in the Card component as well
export const ContainerDefaultProps = {
  background : "#ffffff",
  padding: 3
};

Container.craft = {
  props: ContainerDefaultProps,
  related: {...}
}
```

--------------------------------

### NodeHelpers isLinkedNode Example

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/NodeHelpers.md

Demonstrates the `isLinkedNode` method, illustrating how to check if a node is linked to its parent via an arbitrary ID.

```jsx
const App  = () => {
  return (
    <Editor>
      <Frame>
        <Element canvas> // false
          <div>Yo</div> // false
          <Element is={Hero}>It's me</Element> // false
        </Element>
      </Frame>
    </Editor>
  )
}

const Hero = ({background, title}) => {
  return (
    <div style={{ background }}>
      <Element id="title" is={Text} text={title} /> // true
      ...
    </div>
  )
}
```

--------------------------------

### Main Application Layout

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

The main React component that orchestrates the page editor interface. It imports and renders the Toolbox, SettingsPanel, Topbar, and various user components (Container, Button, Card, Text) using Material-UI's Grid system for layout.

```jsx
// pages/index.js

import React from 'react';
import {Typography, Paper, Grid} from '@mui/material';

import { Toolbox } from '../components/Toolbox';
import { SettingsPanel } from '../components/SettingsPanel';
import { Topbar } from '../components/Topbar';

import { Container } from '../components/user/Container';
import { Button } from '../components/user/Button';
import { Card } from '../components/user/Card';
import { Text } from '../components/user/Text';

export default function App() {
  return (
    <div style={{margin: "0 auto", width: "800px"}}>
      <Typography variant="h5" align="center">A super simple page editor</Typography>
      <Grid container spacing={3} style={{paddingTop: "10px"}}>
        <Topbar />
        <Grid item xs>
          <Container padding={5} background="#eee">
            <Card />
          </Container>
        </Grid>
        <Grid item xs={3}>
          <Paper>
              <Toolbox />
              <SettingsPanel />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

```

--------------------------------

### Querying Editor State with deserialize

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/editor.md

An example of using the 'query' object from useEditor to access editor state, such as deserializing all nodes in the editor.

```jsx
const Sidebar = () => {
  const {query} = useEditor();
  return (
    <div>
      <a onClick={() => {
        console.log(query.deserialize());
      }}>Click me</a>
    </div>
  )
}
```

--------------------------------

### Basic Text Component

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/overview.md

Defines a simple React component for Craft.js that can be dragged and rendered. It uses the `useNode` hook to get drag functionality.

```jsx
import {useNode} from "@craftjs/core";

const TextComponent = ({text}) => {
  const { connectors: {drag} } = useNode();

  return (
    <div ref={drag}>
      <h2>{text}</h2>
    </div>
  )
}
```

--------------------------------

### Card Component Settings and Props

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

The Card component reuses the settings and default props from the Container component. This demonstrates how to share configurations across different components for efficiency.

```jsx
// components/user/Card.js
import {ContainerSettings} from "./Container";

export const Card({background, padding = 20}) { ... }

Card.craft = {
  related: {
    // Since Card has the same settings as Container, we'll just reuse ContainerSettings 
    settings: ContainerSettings
  }
}

// components/user/Card.js
import {ContainerDefaultProps} from "./Container";

export const Card = ({background, padding}) => {}

Card.craft = {
  props: ContainerDefaultProps,
  related: {...}
}
```

--------------------------------

### Configuring Component with craft.props

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/user-components.md

Illustrates how to define static configuration for a Craft.js component using the `craft` property. This includes initial props, drag/drop rules, and related data.

```jsx
const Text = () => {...}
Text.craft = {
  props: {},
  rules: {
    canDrop: () => true,
    canDrag: () => true,
    canMoveIn: () => true,
    canMoveOut: () => true
  },
  related: {} 
}
```

--------------------------------

### Craft.js Query API

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/useEditor.md

Methods for querying the editor's state, including serializing nodes, getting options, and finding node information.

```APIDOC
query:
  getSerializedNodes: () => SerializedNodes
    Return the current Nodes into a simpler form safe for storage
  serialize: () => String
    Return getSerializedNodes() in JSON
  getOptions: () => Object
    Get the options specified in the <Editor /> component
  getDropPlaceholder:
    (sourceNodeId: NodeId, targetNodeId: NodeId, pos: {x: number, y: number}, nodesToDOM?: (node: Node) => HTMLElement = node => node.dom)
    => Object
      Given the target Node and mouse coordinates on the screen, determine the best possible location to drop the source Node. By default, the Node's DOM property is taken into consideration.
  node: (id: NodeId) => NodeHelpers
    Returns an object containing helper methods to describe the specified Node. Click <a href='/docs/api/helpers'>here</a> for more information.
  parseReactElement: (element: React.ReactElement) => Object
    toNodeTree: (normalize?: (node: Node, jsx: React.ReactElement) => void) => NodeTree
      Parse a given React element into a NodeTree
  parseSerializedNode: (node: SerializedNode) => Object
    toNode: (normalize?: (node: Node) => void) => Node
      Parse a serialized Node back into it's full Node form
  parseFreshNode: (node: FreshNode) => Object
    toNode: (normalize?: (node: Node) => void) => Node
      Parse a fresh/new Node object into it's full Node form, ensuring all properties of a Node is correctly initialised. This is useful when you need to create a new Node.
  history:
    canUndo: () => boolean
      Returns true if undo is possible
```

--------------------------------

### useNode() API Reference

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/useNode.md

Provides a detailed reference for the useNode hook, outlining its parameters, return values, and the structure of the returned objects. It details the 'connectors' and 'actions' objects, along with the 'collected' properties.

```APIDOC
useNode(collector?: (node: Node) => Collected): Collected & {
  id: NodeId;
  related: boolean;
  inNodeContext: boolean;
  connectors: {
    connect: (dom: HTMLElement) => HTMLElement;
    drag: (dom: HTMLElement) => HTMLElement;
  };
  actions: {
    setProp: (props: Object, throttleRate?: number) => void;
    setCustom: (custom: Object, throttleRate?: number) => void;
    setHidden: (bool: boolean) => void;
  };
}

Parameters:
  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.

Returns:
  Object:
    id: NodeId
      The corresponding Node's id
    related: boolean
      Identifies if the component is being used as related component
    inNodeContext: boolean
      This is useful if you are designing a User Component that you also wish to be used as an ordinary React Component; this property helps to differentiate whether the component is being used as a User Component or not
    connectors: Object
      connect: (dom: HTMLElement) => HTMLElement
        Specifies the DOM that represents the User Component
      drag: (dom: HTMLElement) => HTMLElement
        Specifies the DOM that should be draggable
    actions: Object
      setProp: (props: Object, throttleRate?: number) => void
        Manipulate the current component's props. Additionally, specify a throttleRate to throttle the changes recoded in history for undo/redo
      setCustom: (custom: Object, throttleRate?: number) => void
        Manipulate the current component's custom properties. Additionally, specify a throttleRate to throttle the changes recoded in history for undo/redo
      setHidden: (bool: boolean) => void
        Hide/unhide the current component
    ...collected: Collected
      The collected values returned from the collector
```

--------------------------------

### Editor Component: Toolbox

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

A React component that provides a user interface for dragging and dropping predefined user components into the editor. It uses Material-UI for layout and styling.

```jsx
// components/Toolbox.js
import React from "react";
import { Box, Typography, Grid, Button as MaterialButton } from "@mui/material";

export const Toolbox = () => {
  return (
    <Box px={2} py={2}>
      <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 variant="contained">Button</MaterialButton>
        </Grid>
        <Grid container direction="column" item>
          <MaterialButton variant="contained">Text</MaterialButton>
        </Grid>
        <Grid container direction="column" item>
          <MaterialButton variant="contained">Container</MaterialButton>
        </Grid>
        <Grid container direction="column" item>
          <MaterialButton variant="contained">Card</MaterialButton>
        </Grid>
      </Grid>
    </Box>
  )
};

```

--------------------------------

### Enable Drag and Drop for Container Component

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

This snippet demonstrates enabling drag and drop for a Container component by applying the `connect` and `drag` connectors to its root Paper element.

```jsx
// components/user/Container.js
export const Container = ({background, padding = 0, children}) => {
  const { connectors: {connect, drag} } = useNode();
  return (
    <Paper ref={ref=> connect(drag(ref))} style={{ background, padding: `${padding}px`}}>
      ...
    </Paper>
  )
}
```

--------------------------------

### Loading Editor State from JSON

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/overview.md

Illustrates how to initialize a Craft.js editor with a pre-existing state by passing a JSON string to the `Frame` component's `json` prop.

```jsx
import React from "react";
import {Editor, Frame} from "@craftjs/core";

const App = () => {
  const jsonString = /* retrieve JSON from server */
  return (
    <Editor>
      <Frame json={jsonString}>
        ...
      </Frame>
    </Editor>
  )
}
```

--------------------------------

### Basic Text Component

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/user-components.md

A simple React component that displays text with a specified font size. This serves as a basic example of a user component in Craft.js.

```jsx
const Text = ({text, fontSize}) => {
  return (
    <span contenteditable="true" style={{fontSize}}>{text}</span>
  )
}
```

--------------------------------

### Getting State Information with useEditor

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/concepts/editor.md

Shows how to use a collector function with useEditor to retrieve specific state information, such as the display name of the currently hovered node.

```tsx
const App = () => {
  const { hoveredNodeName } = useEditor((state: Node) => {
    const currentlyHoveredId = state.events.hovered;
    return {
      hoveredNodeName: state.nodes[currentlyHoveredId].displayName
    }
  })
  return (
    <h2>The component being hovered is: {hoveredNodeName}</h2>
  )
}
```

--------------------------------

### Button Component Settings

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

Provides configuration options for the Button component, allowing users to select size, variant, and color using Material-UI radio buttons. It utilizes the useNode hook to update component properties.

```jsx
import {Button as MaterialButton, Grid, FormControl, FormLabel, RadioGroup,Radio, FormControlLabel} from "@mui/material";
export const Button = () => {}


const ButtonSettings = () => {
  const { actions: {setProp}, props } = useNode((node) => ({
    props: node.data.props
  }));

  return (
    <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>
      </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>
      </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>
      </FormControl>
    </div>
  )
};

Button.craft = {
  related: { 
    settings: ButtonSettings
  }
}
```

--------------------------------

### Useful npm Scripts

Source: https://github.com/prevwong/craft.js/blob/main/CONTRIBUTING.md

Common npm scripts for managing the Craft.js monorepo, including cleaning build files, creating production builds, and running tests.

```bash
yarn clean
yarn build
yarn lint
```

--------------------------------

### Loading Frame from Serialized Nodes

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/Frame.md

An example showcasing how to initialize the Frame component with pre-serialized node data in JSON format. This allows for loading saved editor states.

```tsx
import { Editor, Frame, Element } from "@craftjs/core";

const App = () => {
  return (
    <div>
      <h2>My App!</h2>
      <Editor>
        <h2>My Page Editor</h2>
        <Frame
          data='{"ROOT":{"type":"div","isCanvas":true,"props":{},"parent":null,"displayName":"div","custom":{},"nodes":["node-sdiwzXkvQ","node-rGFDi0G6m","node-yNBLMy5Oj"]},"node-sdiwzXkvQ":{"type":{"resolvedName":"Card"},"props":{},"parent":"ROOT","displayName":"Card","custom":{},"_childCanvas":{"main":"canvas-_EEw_eBD_","second":"canvas-lE4Ni9oIn"}}}'
        >
          <Element is={Container} canvas> // defines the Root Node
            <h2>Drag me around</h2>
            <MyComp text="You can drag me around too" />
            <Element is="div" style={{ background: "#333" }}>
              <p>Same here</p>
            </Element>
          </Element>
        </Frame>
      </Editor>
    </div>
  );
};
```

--------------------------------

### User Component: Text

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

A simple React component to display text with a customizable font size. It's a fundamental building block for the page editor.

```jsx
// components/user/Text.js
import React from "react";

export const Text = ({text, fontSize}) => {
  return (
      <div>
         <p style={{fontSize}}>{text}</p>
      </div>
  )
}
```

--------------------------------

### Using Frame with JSX

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/api/Frame.md

An example demonstrating how to use the Frame component with JSX to define the initial structure of the page editor. It includes nested Elements and custom components.

```tsx
import { Editor, Frame, Element } from "@craftjs/core";

const App = () => {
  return (
    <div>
      <h2>My App!</h2>
      <Editor>
        <h2>My Page Editor</h2>
        <Frame>
          <Element is={Container} canvas> // defines the Root Node
            <h2>Drag me around</h2>
            <MyComp text="You can drag me around too" />
            <Element is="div" style={{ background: "#333" }}>
              <p>Same here</p>
            </Element>
          </Element>
        </Frame>
      </Editor>
    </div>
  );
};
```

--------------------------------

### User Component: Container

Source: https://github.com/prevwong/craft.js/blob/main/site/docs/guides/basic-tutorial.md

A React component using Material-UI's Paper to create a container with customizable background color and padding. It's used for layout and visual grouping.

```jsx
// components/user/Container.js
import React from "react";
import { Paper } from "@mui/material";

export const Container = ({background, padding = 0, children}) => {
  return (
    <Paper style={{margin: "5px 0", background, padding: `${padding}px`}}>
      {children}
    </Paper>
  )
}
```

--------------------------------

### Serialize Editor State to JSON

Source: https://github.com/prevwong/craft.js/blob/main/packages/core/README.md

Shows how to retrieve the current state of the Craft.js editor as a JSON string. This is useful for saving the editor's state, for example, to a server or local storage.

```jsx
const SaveButton = () => {
  const { query } = useEditor();
  return <a onClick={() => console.log(query.serialize()) }>Get JSON</a>
}
```