Inline

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

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;

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.

import { EmbedEditor } from '@embededitor/full/react';

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

export default EditPage;

import { mountEditor } from '@embededitor/full/standalone';

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

Add viewport-fit=cover to the page’s viewport meta tag, or the safe areas (notch, home indicator) aren’t reported to the editor.

index.html

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

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.

Modal

Open the editor over the page.

Props

Every prop the editor takes.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Two Layouts

In Your Box

Sizing the Host

The Whole Page

What `src` Takes

When `src` Changes

Modal

Props

​Two Layouts

​In Your Box

​Sizing the Host

​The Whole Page

​What src Takes

​When src Changes

Modal

Props

Two Layouts

In Your Box

Sizing the Host

The Whole Page

What `src` Takes

When `src` Changes