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

# Inline

> Show the editor inside a box on your page, or let it take over the whole viewport.

Put the editor in your own layout, or make it the whole page.

## Two Layouts

| `layout` | Where it shows |
| - | - |
| `'inline'` (default) | Fills the box you give it, inside the page's layout. |
| `'page'` | Covers the whole viewport with no backdrop. The page behind it doesn't scroll, and the phone's safe areas stay clear. |

For a dialog over the page, use the [modal](https://docs.embededitor.com/guides/modal.md) instead.

## In Your Box

The editor fills its parent's box, so give the parent a height, and at least 320 px of width: it lays itself out by that box, not the window, and nothing overflows from 320 px up.

![The editor inline in a page: a story form on the left and the editor in a bordered box on the right, a lake photo in its crop view, Save at its top right and no Close button](https://mintcdn.com/feliperohde/YwW874QNSEhHkBQq/images/inline.webp?fit=max\&auto=format\&n=YwW874QNSEhHkBQq\&q=85\&s=0d57a64683cb09c68b7cfbc13cd7823e)

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

const PhotoEditor = ({ src }: { src: string }) => (
	<div style={{ height: 600 }}>
		<EmbedEditor
			onProcess={({ dest }) => {
				console.info('saved', dest.name);
			}}
			src={src}
		/>
	</div>
);

export default PhotoEditor;
```

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

// <div id="editor" style="height: 600px"></div>
const editor = mountEditor(document.getElementById('editor'), {
	onProcess: ({ dest }) => {
		console.info('saved', dest.name);
	},
	src: '/photos/sunset.jpg'
});
```

`mountEditor` returns `{ update, destroy }`. `update(options)` takes the full options again, not a patch. One element holds one editor: mounting again takes over the first.

### Sizing the Host

* The layout follows the editor's own size, not the window's. A narrow box gets the narrow layout, even on a wide screen.
* Under 520 px tall, the menu drops to 128 px.
* Save keeps the inline editor open. The Close button shows only when you pass `onClose`.

## The Whole Page

Set `layout: 'page'` and the editor becomes the page.

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

const EditPage = ({ onDone, src }: { onDone: () => void; src: string }) => (
	<EmbedEditor
		layout='page'
		onClose={onDone}
		src={src}
	/>
);

export default EditPage;
```

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

mountEditor(document.getElementById('editor'), {
	layout: 'page',
	onClose: () => {
		history.back();
	},
	src: new URLSearchParams(location.search).get('src')
});
```

> [!WARNING]
>
> Add `viewport-fit=cover` to the page's viewport meta tag, or the safe areas (notch, home indicator) aren't reported to the editor.

```html index.html theme={"dark"}
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
```

* Render it near `<body>`. It is `position: fixed` at `100dvh`, so an ancestor with a `transform`, `filter`, `perspective`, `contain: paint`/`layout` or `will-change: transform` makes it fill that ancestor instead of the viewport.
* It locks the page's scroll while mounted and gives it back on unmount.
* It sits at a very high `z-index`, like the modal.

## What `src` Takes

| Source | How it's read |
| - | - |
| A URL (`https:`, `http:`, `data:`, `blob:`) | Downloaded with `fetch`. A cross-origin URL needs CORS. |
| `File` or `Blob` | Read as it is. |
| `ArrayBuffer` or `Uint8Array` | Read as the file's bytes. A subarray gives just its own bytes. |
| `HTMLImageElement` | Downloaded from its `currentSrc` (or `src`), so you get the original file, never a re-encoded copy. |
| `HTMLCanvasElement` or `ImageBitmap` | Copied as it is, so you may draw on it or close it afterwards. |
| `null` or nothing | Opens the empty state, where the user picks, drops or pastes a file. With `enablePicker` off, the loading screen stays until a photo arrives. |

The type is read from the file's bytes, not its name.

### When `src` Changes

`src` and `state` are read when the editor opens. While the empty state, a load or an error screen shows, a new `src` replaces the one opening. Once an image is on screen, changes are ignored. To open another image, give the editor a new `key` in React; with `mountEditor`, destroy it and mount again.

> [!TIP]
>
> Pass a stable `src`. A new object on every render, such as `URL.createObjectURL(file)` written inline, restarts the load each time your component renders while the image loads.

> [card] [Modal](https://docs.embededitor.com/guides/modal.md)
>
> Open the editor over the page.

> [card] [Props](https://docs.embededitor.com/api-reference/props.md)
>
> Every prop the editor takes.


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