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

# mountEditor()

> Mount the editor inside any element, with no React of your own, and run, update or destroy it from code.

`mountEditor` mounts the editor inside an element of any page.

```ts theme={"dark"}
const mountEditor: (
	element: HTMLElement,
	options?: EmbedEditorProps
) => EmbedEditorHandle & { destroy: () => void; update: (options: EmbedEditorProps) => void };
```

> [!NOTE]
>
> Standalone entry only: import it from `@embededitor/full/standalone`. In a React app, use [EmbedEditor](https://docs.embededitor.com/api-reference/embed-editor.md).

## Parameters

**element** `HTMLElement` *required*

The element to mount into. The editor adds a host element inside it and fills its box, so give it a height. An element holds one editor: mounting it again takes over the first one, whose handle then rejects every command with `NOT_AVAILABLE`.

**options** `EmbedEditorProps` (default: \{})

Every prop `EmbedEditor` takes, `layout` included. 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:

**update** `(options: EmbedEditorProps) =\> void`

Renders new options in the same editor, the same handle on it. It takes the full options again, like new React props, not a patch. Calling it after `destroy` throws.

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

Unmounts the editor and removes its host element. Every command waiting, and every one called after, rejects with `NOT_AVAILABLE`.

## Behavior

* `src` and `state` are read when the editor opens. Once an image is on screen, `destroy` the editor and mount it again to open another one.
* `mountEditor` touches the DOM, so call it from an event handler or an effect, never during a server render.

## Example

```js main.js theme={"dark"}
import { mountEditor } from '@embededitor/full/standalone';

const options = {
	onProcess: ({ dest, state }) => {
		console.info(dest.name, dest.size, state);
	},
	src: '/photos/sunset.jpg'
};

// <div id="editor" style="height: 600px"></div>
const editor = mountEditor(document.getElementById('editor'), options);

// switch the language: pass the full options again
const setLanguage = lang => {
	editor.update({ ...options, lang });
};

// when the page no longer needs the editor
const removeEditor = () => {
	editor.destroy();
};
```

Without a bundler, serve the package's `dist` folder as it is and import the entry from there. See [Plain HTML](https://docs.embededitor.com/frameworks/html.md).


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