> ## 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.

# Modal

> Open the editor over your page as a dialog, or as a bottom sheet on a phone.

Open the editor over your page with one call, and close it from code or by the user.

## Open It

`openEditor` opens the editor in its own host on `document.body` and returns `close`. It works from either entry.

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

const editPhoto = (file: File) => {
	const { close } = openEditor({
		onClose: () => {
			console.info('editor closed');
		},
		onProcess: ({ dest }) => {
			console.info('saved', dest.name);
		},
		src: file
	});

	return close;
};
```

```js JavaScript theme={"dark"}
import { openEditor } from '@embededitor/full/standalone';

const editPhoto = file => {
	const { close } = openEditor({
		onClose: () => {
			console.info('editor closed');
		},
		onProcess: ({ dest }) => {
			console.info('saved', dest.name);
		},
		src: file
	});

	return close;
};
```

`openEditor` takes every [prop](https://docs.embededitor.com/api-reference/props.md) except `layout`. It touches the DOM, so call it from an event handler or an effect, never during a server render.

## How It Looks

![The editor opened by openEditor from a media library page, filling the window: Close at the top left, and a mountain lake with Vivid Warm picked in the filter strip](https://mintcdn.com/feliperohde/YwW874QNSEhHkBQq/images/modal.webp?fit=max\&auto=format\&n=YwW874QNSEhHkBQq\&q=85\&s=b1b4eea770d4ce1c776defe4882e2e17)

| Screen | Shows as |
| - | - |
| 640 px wide or more | A dialog over the page. |
| Under 640 px | A bottom sheet that slides in and out. |

The page behind it doesn't scroll and comes back where it was. Pinch and double-tap zoom of the page are blocked while it's open.

> [!NOTE]
>
> Add `viewport-fit=cover` to the page's viewport meta tag, so the sheet keeps clear of the notch and the home indicator.

## Closing It

| How | What happens |
| - | - |
| `close()` | Closes it from code. |
| Close button (the X) | Closes it. |
| Escape | Closes it, unless `closeOnEscape` is `false`. Something open inside the editor (a field's draft, Reset's confirm) closes first, and in Annotate Escape never closes the editor. |
| Save | Closes it once `onProcess` returns. |

`onClose` is called once the editor has gone, however it closed.

### Escape

Set `closeOnEscape: false` and only Close and Save close the editor. Escape keeps its other jobs, such as dropping a selection.

```ts editor.ts theme={"dark"}
openEditor({
	closeOnEscape: false,
	src: '/photos/sunset.jpg'
});
```

### When Save Fails

If `onProcess` throws, the error is logged with `console.error`, Save shows it failed, and the modal stays open so the user can save again. `onProcessError` isn't called: the error is your callback's, not the editor's.

> [card] [Inline](https://docs.embededitor.com/guides/inline.md)
>
> Put the editor in your own layout.

> [card] [openEditor](https://docs.embededitor.com/api-reference/open-editor.md)
>
> The full signature.


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