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

# openEditor()

> Open the editor over the page, as a dialog on a desktop and a bottom sheet on a phone, and run or close it from code.

`openEditor` opens the editor as a modal over the page.

```ts theme={"dark"}
const openEditor: (options?: Omit<EmbedEditorProps, 'layout'>) => EmbedEditorHandle & { close: () => void };
```

Available in both entries: `@embededitor/full/react` and `@embededitor/full/standalone`.

## Parameters

**options** `Omit\<EmbedEditorProps, 'layout'\>` (default: \{})

Every prop `EmbedEditor` takes except `layout`: the modal is its own layout. See [Props](https://docs.embededitor.com/api-reference/props.md).

## Returns

The editor's handle, `EmbedEditorHandle`: its commands, reads and events. See [Commands](https://docs.embededitor.com/api-reference/commands/overview.md). Beside them:

**close** `() =\> void`

Closes the modal from code. `onClose` is called once it has gone.

## Behavior

* The modal opens in its own host on `document.body`, as a dialog on a desktop and as a bottom sheet on a phone.
* Save closes it once `onProcess` returns. If `onProcess` throws, the modal stays open, so the user can save again.
* `closeOnEscape` decides whether Escape closes it. Close and Save always do.
* However it closes (`close`, its Close button, Escape, a Save that went through, the commands `editor.close` and `output.save`), its handle takes no more commands: every command waiting, and every one called after, rejects with `NOT_AVAILABLE`.
* `openEditor` touches the DOM, so call it from an event handler or an effect, never during a server render.

## Example

```ts edit-photo.ts 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;
};
```


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