### Start Development Server

Source: https://github.com/grapesjs/react/blob/main/README.md

Starts the development server for the GrapesJS React project.

```sh
yarn start
```

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

### Install Dependencies

Source: https://github.com/grapesjs/react/blob/main/README.md

Installs the project's dependencies using Yarn.

```sh
yarn i
```

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

### Start Development Server

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Starts the development server for the GrapesJS React project.

```sh
yarn start
```

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

### Install Dependencies

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Installs the project's dependencies using Yarn.

```sh
yarn i
```

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

### Install GrapesJS and React Wrapper

Source: https://github.com/grapesjs/react/blob/main/README.md

Installs the core GrapesJS library and the official React wrapper using npm.

```sh
npm i grapesjs @grapesjs/react
```

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

### Install GrapesJS and React Wrapper

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Installs the core GrapesJS library and the official React wrapper using npm.

```sh
npm i grapesjs @grapesjs/react
```

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

### Default UI Editor Example

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Demonstrates the simplest way to use the GrapesJS React wrapper, relying on GrapesJS's default UI. The core GrapesJS library and its CSS are passed as props.

```ts
import grapesjs, { Editor } from 'grapesjs';
import GjsEditor from '@grapesjs/react';

export default function DefaultEditor() {
  const onEditor = (editor: Editor) => {
    console.log('Editor loaded', { editor });
  };

  return (
    <GjsEditor
      // Pass the core GrapesJS library to the wrapper (required).
      // You can also pass the CDN url (eg. "https://unpkg.com/grapesjs")
      grapesjs={grapesjs}
      // Load the GrapesJS CSS file asynchronously from URL.
      // This is an optional prop, you can always import the CSS directly in your JS if you wish.
      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      // GrapesJS init options
      options={{
        height: '100vh',
        storageManager: false,
      }}
      onEditor={onEditor}
    />
  );
}
```

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

### Default UI Editor Example

Source: https://github.com/grapesjs/react/blob/main/README.md

Demonstrates the simplest way to use the GrapesJS React wrapper, relying on GrapesJS's default UI. The core GrapesJS library and its CSS are passed as props.

```ts
import grapesjs, { Editor } from 'grapesjs';
import GjsEditor from '@grapesjs/react';

export default function DefaultEditor() {
  const onEditor = (editor: Editor) => {
    console.log('Editor loaded', { editor });
  };

  return (
    <GjsEditor
      // Pass the core GrapesJS library to the wrapper (required).
      // You can also pass the CDN url (eg. "https://unpkg.com/grapesjs")
      grapesjs={grapesjs}
      // Load the GrapesJS CSS file asynchronously from URL.
      // This is an optional prop, you can always import the CSS directly in your JS if you wish.
      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      // GrapesJS init options
      options={{
        height: '100vh',
        storageManager: false,
      }}
      onEditor={onEditor}
    />
  );
}
```

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

### Accessing Editor Instance with Hooks

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Provides examples of how to access the GrapesJS editor instance within React components using the `useEditor` and `useEditorMaybe` hooks. The `WithEditor` component ensures the hook is used only after the editor is created.

```ts
import GjsEditor, { WithEditor, useEditor, useEditorMaybe } from '@grapesjs/react';

function MyComponentWithUseEditor() {
    // The `editor` is always defined.
    const editor = useEditor();
    return (...);
}

function MyComponentWithUseEditorMaybe() {
    // The `editor` is not immediately available
    const editor = useEditorMaybe();
    return (
        <div>
            <div>I will be rendered immediately</div>
            <div>
                Editor: { editor ? 'created' : 'not yet created' }.
            </div>
        </div>
    );
}

export default function CustomEditor() {
  return (
    <GjsEditor ...>
        // ... 
        <WithEditor>
            // This component won't be rendered until the editor is created
            <MyComponentWithUseEditor/>
        </WithEditor>
        <MyComponentWithUseEditorMaybe/>
    </GjsEditor>
  );
}
```

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

### Custom UI Editor Example

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Shows a more declarative approach using the GrapesJS React wrapper, allowing full control over the editor's UI. The `<Canvas/>` component is used to render the GrapesJS canvas within custom React components.

```ts
import grapesjs, { Editor } from 'grapesjs';
import GjsEditor, { Canvas } from '@grapesjs/react';

export default function CustomEditor() {
  const onEditor = (editor: Editor) => {
    console.log('Editor loaded', { editor });
  };

  return (
    <GjsEditor
      grapesjs={grapesjs}
      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      onEditor={onEditor}
      options={{
        height: '100vh',
        storageManager: false,
      }}
    >
        <div>
        // ... use your UI components
            <Canvas /> // place the GrapesJS canvas where you wish
        // ... 
        </div>
    </GjsEditor>
  );
}
```

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

### Custom UI Editor Example

Source: https://github.com/grapesjs/react/blob/main/README.md

Shows a more declarative approach using the GrapesJS React wrapper, allowing full control over the editor's UI. The `<Canvas/>` component is used to render the GrapesJS canvas within custom React components.

```ts
import grapesjs, { Editor } from 'grapesjs';
import GjsEditor, { Canvas } from '@grapesjs/react';

export default function CustomEditor() {
  const onEditor = (editor: Editor) => {
    console.log('Editor loaded', { editor });
  };

  return (
    <GjsEditor
      grapesjs={grapesjs}
      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      onEditor={onEditor}
      options={{
        height: '100vh',
        storageManager: false,
      }}
    >
        <div>
        // ... use your UI components
            <Canvas /> // place the GrapesJS canvas where you wish
        // ... 
        </div>
    </GjsEditor>
  );
}
```

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

### Accessing Editor Instance with Hooks

Source: https://github.com/grapesjs/react/blob/main/README.md

Provides examples of how to access the GrapesJS editor instance within React components using the `useEditor` and `useEditorMaybe` hooks. The `WithEditor` component ensures the hook is used only after the editor is created.

```ts
import GjsEditor, { WithEditor, useEditor, useEditorMaybe } from '@grapesjs/react';

function MyComponentWithUseEditor() {
    // The `editor` is always defined.
    const editor = useEditor();
    return (...);
}

function MyComponentWithUseEditorMaybe() {
    // The `editor` is not immediately available
    const editor = useEditorMaybe();
    return (
        <div>
            <div>I will be rendered immediately</div>
            <div>
                Editor: { editor ? 'created' : 'not yet created' }.
            </div>
        </div>
    );
}

export default function CustomEditor() {
  return (
    <GjsEditor ...>
        // ... 
        <WithEditor>
            // This component won't be rendered until the editor is created
            <MyComponentWithUseEditor/>
        </WithEditor>
        <MyComponentWithUseEditorMaybe/>
    </GjsEditor>
  );
}
```

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

### Build Docker Compose Base

Source: https://github.com/grapesjs/react/blob/main/DOCKER.md

Builds the base Docker image for GrapesJS React. This should be built first.

```bash
docker compose build base
```

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

### Clone and Navigate Repository

Source: https://github.com/grapesjs/react/blob/main/README.md

Clones the GrapesJS React repository from GitHub and changes the current directory to the cloned repository.

```sh
git clone https://github.com/GrapesJS/react.git
cd react
```

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

### Build Docker Compose React 19

Source: https://github.com/grapesjs/react/blob/main/DOCKER.md

Builds the Docker image for React 19. After building, you can run the container.

```bash
docker compose build react19
```

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

### Clone and Navigate Repository

Source: https://github.com/grapesjs/react/blob/main/packages/grapesjs-react/README.md

Clones the GrapesJS React repository from GitHub and changes the current directory to the cloned repository.

```sh
git clone https://github.com/GrapesJS/react.git
cd react
```

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

### Run Docker Compose React 19

Source: https://github.com/grapesjs/react/blob/main/DOCKER.md

Runs the React 19 container. Access the application at http://localhost:5174/.

```bash
docker compose up react19
```

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

### Build Docker Compose React 18

Source: https://github.com/grapesjs/react/blob/main/DOCKER.md

Builds the Docker image for React 18. After building, you can run the container.

```bash
docker compose build react18
```

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

### Run Docker Compose React 18

Source: https://github.com/grapesjs/react/blob/main/DOCKER.md

Runs the React 18 container. Access the application at http://localhost:5173/.

```bash
docker compose up react18
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.