> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# EmbedEditor

> The React component that renders the editor inline, in the box its parent gives it, or as the whole page.

`EmbedEditor` renders the editor in a React app.

```tsx theme={"dark"}
import { EmbedEditor } from '@embededitor/full/react';

<EmbedEditor {...props} />
```

## Props

`EmbedEditor` takes every prop of `EmbedEditorProps`. Every prop is optional and applies live unless it says otherwise.

> [card] [Props](https://docs.embededitor.com/api-reference/props.md)
>
> Every prop, its type and its default.

> [card] [EditState](https://docs.embededitor.com/api-reference/state.md)
>
> What `state` takes and `onProcess` hands back.

## Attributes

`data-*` and `aria-*` attributes go to the component's host element, which helps with tests and analytics. Anything else that isn't a prop is invalid, and the editor reports it as `INVALID_PROPS`.

```tsx theme={"dark"}
<EmbedEditor
	aria-label='Photo editor'
	data-testid='photo-editor'
	src={src}
/>
```

## Ref

`EmbedEditor` forwards its `ref` to the editor's handle, `EmbedEditorHandle`: its commands, reads and events. The handle is made once, and stays the same through every new set of props. Once the component unmounts, its commands reject with `NOT_AVAILABLE`.

```tsx theme={"dark"}
const editor = useRef<EmbedEditorHandle>(null);

<EmbedEditor
	ref={editor}
	src={src}
/>
```

See [Commands](https://docs.embededitor.com/api-reference/commands/overview.md).

## Behavior

* **Size.** In the default `layout='inline'`, the editor fills the box its parent gives it, so give the parent a height, and at least 320 px of width. With `layout='page'`, it covers the whole viewport.
* **Read at open.** `src` and `state` are read when the editor opens. Once an image is on screen, give the editor a new `key` to open another one.
* **Stable source.** Memoize `src`. A new object on every render, such as `URL.createObjectURL(file)` written inline, restarts the load each time the host renders while the image loads.
* **Next.js.** The entry starts with `'use client'`, so a server component can render `EmbedEditor` directly. Callbacks such as `onProcess` need a client component around it.

## Example

```tsx PhotoEditor.tsx theme={"dark"}
import { EmbedEditor } from '@embededitor/full/react';
import type { EditState } from '@embededitor/full/react';

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
	const body = new FormData();

	body.append('file', dest);
	body.append('state', JSON.stringify(state));
	await fetch('/api/photos', { body, method: 'POST' });
};

const PhotoEditor = ({ src }: { src: string }) => (
	<div style={{ height: 600 }}>
		<EmbedEditor
			lang='en-us'
			onProcess={upload}
			src={src}
		/>
	</div>
);

export default PhotoEditor;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.