React

Render the editor in a React app with the EmbedEditor component.

Try every prop live in the playground, open on React, and copy the code it writes.

Free
Lite
Full

Free is on public npm, with no key. It has the Adjust tools, and a small “embededitor.com” badge in the corner of the menu.

Install

npm install @embededitor/free

yarn add @embededitor/free

pnpm add @embededitor/free

bun add @embededitor/free

The React entry needs react and react-dom 18.3 or 19 as peers. There is no CSS to import.

Render

PhotoEditor.tsx

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

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' src={src} />
  </div>
);

export default PhotoEditor;

The editor fills the box its parent gives it, so give the parent a height, and at least 320 px of width.

Get the File Back

onProcess receives the saved File and the state it was made with.

PhotoEditor.tsx

import { EmbedEditor } from '@embededitor/free/react';
import type { EditState } from '@embededitor/free/react';

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
  const body = new FormData();

  body.append('file', dest);
  body.append('state', JSON.stringify(state));
  await fetch('/api/photos', { body, method: 'POST' });
};

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' onProcess={upload} src={src} />
  </div>
);

export default PhotoEditor;

openEditor opens the editor over the page: a dialog on a desktop, a bottom sheet on a phone.

edit-photo.ts

import { openEditor } from '@embededitor/free/react';

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

  return close;
};

Update Props

Props apply live: change them like any other React prop.src and state are read when the editor opens. Once an image is on screen, give the editor a new key to open another one.

PhotoEditor.tsx

<EmbedEditor key={photo.id} src={photo.url} />

Pass a stable src (memoize it). A new Blob or URL.createObjectURL(file) written inline restarts the load each time the component renders while the image loads.

Clean Up

Unmount the component to remove the editor. For the modal, call the close that openEditor returns; Save closes it too, once onProcess returns.

data-* and aria-* attributes on EmbedEditor go to its host element, which helps with tests and analytics. Any other unknown prop is invalid.

Lite has the Adjust tools, without the badge. It installs from the private registry, with the key of your license.

Set Up the Registry

Your license key is on its card in your account at account.embededitor.com. Buy a plan to get one.Point the @embededitor scope at the registry, and keep the key in an environment variable named EMBED_EDITOR_KEY, out of git.For npm, pnpm, bun and Yarn 1, add this to the .npmrc of your project:

.npmrc

@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}

Yarn 2 and newer ignore .npmrc. Add this to .yarnrc.yml instead:

.yarnrc.yml

npmScopes:
  embededitor:
    npmRegistryServer: "https://get.embededitor.com"
    npmAuthToken: "${EMBED_EDITOR_KEY}"

Set the key where your install runs, your shell or your CI’s secrets, never in git:

Terminal

export EMBED_EDITOR_KEY=<your-key>

Install

npm install @embededitor/lite

yarn add @embededitor/lite

pnpm add @embededitor/lite

bun add @embededitor/lite

The React entry needs react and react-dom 18.3 or 19 as peers. There is no CSS to import.

Render

PhotoEditor.tsx

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

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' src={src} />
  </div>
);

export default PhotoEditor;

The editor fills the box its parent gives it, so give the parent a height, and at least 320 px of width.

Get the File Back

onProcess receives the saved File and the state it was made with.

PhotoEditor.tsx

import { EmbedEditor } from '@embededitor/lite/react';
import type { EditState } from '@embededitor/lite/react';

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
  const body = new FormData();

  body.append('file', dest);
  body.append('state', JSON.stringify(state));
  await fetch('/api/photos', { body, method: 'POST' });
};

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' onProcess={upload} src={src} />
  </div>
);

export default PhotoEditor;

openEditor opens the editor over the page: a dialog on a desktop, a bottom sheet on a phone.

edit-photo.ts

import { openEditor } from '@embededitor/lite/react';

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

  return close;
};

Update Props

Props apply live: change them like any other React prop.src and state are read when the editor opens. Once an image is on screen, give the editor a new key to open another one.

PhotoEditor.tsx

<EmbedEditor key={photo.id} src={photo.url} />

Pass a stable src (memoize it). A new Blob or URL.createObjectURL(file) written inline restarts the load each time the component renders while the image loads.

Clean Up

Unmount the component to remove the editor. For the modal, call the close that openEditor returns; Save closes it too, once onProcess returns.

data-* and aria-* attributes on EmbedEditor go to its host element, which helps with tests and analytics. Any other unknown prop is invalid.

Full has every tool, without the badge. It installs from the private registry, with the key of your license.

Set Up the Registry

.npmrc

@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}

Yarn 2 and newer ignore .npmrc. Add this to .yarnrc.yml instead:

.yarnrc.yml

npmScopes:
  embededitor:
    npmRegistryServer: "https://get.embededitor.com"
    npmAuthToken: "${EMBED_EDITOR_KEY}"

Set the key where your install runs, your shell or your CI’s secrets, never in git:

Terminal

export EMBED_EDITOR_KEY=<your-key>

Install

npm install @embededitor/full

yarn add @embededitor/full

pnpm add @embededitor/full

bun add @embededitor/full

The React entry needs react and react-dom 18.3 or 19 as peers. There is no CSS to import.

Render

PhotoEditor.tsx

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

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' src={src} />
  </div>
);

export default PhotoEditor;

The editor fills the box its parent gives it, so give the parent a height, and at least 320 px of width.

Get the File Back

onProcess receives the saved File and the state it was made with.

PhotoEditor.tsx

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

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
  const body = new FormData();

  body.append('file', dest);
  body.append('state', JSON.stringify(state));
  await fetch('/api/photos', { body, method: 'POST' });
};

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='en-us' onProcess={upload} src={src} />
  </div>
);

export default PhotoEditor;

openEditor opens the editor over the page: a dialog on a desktop, a bottom sheet on a phone.

edit-photo.ts

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

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

  return close;
};

Update Props

Props apply live: change them like any other React prop.src and state are read when the editor opens. Once an image is on screen, give the editor a new key to open another one.

PhotoEditor.tsx

<EmbedEditor key={photo.id} src={photo.url} />

Pass a stable src (memoize it). A new Blob or URL.createObjectURL(file) written inline restarts the load each time the component renders while the image loads.

Clean Up

Unmount the component to remove the editor. For the modal, call the close that openEditor returns; Save closes it too, once onProcess returns.

data-* and aria-* attributes on EmbedEditor go to its host element, which helps with tests and analytics. Any other unknown prop is invalid.

Next Steps

Props

Every option the editor takes.

The Saved State

Reopen a photo with its edits.

Next.js

Server components and safe areas.

Theming

Match the editor to your brand.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Install

Render

Get the File Back

Update Props

Clean Up

Set Up the Registry

Install

Render

Get the File Back

Update Props

Clean Up

Set Up the Registry

Install

Render

Get the File Back

Update Props

Clean Up

Next Steps

Props

The Saved State

Next.js

Theming

​Install

​Render

​Get the File Back

​Open as a Modal

​Update Props

​Clean Up

​Set Up the Registry

​Install

​Render

​Get the File Back

​Open as a Modal

​Update Props

​Clean Up

​Set Up the Registry

​Install

​Render

​Get the File Back

​Open as a Modal

​Update Props

​Clean Up

​Next Steps

Props

The Saved State

Next.js

Theming

Install

Render

Get the File Back

Open as a Modal

Update Props

Clean Up

Set Up the Registry

Install

Render

Get the File Back

Open as a Modal

Update Props

Clean Up

Set Up the Registry

Install

Render

Get the File Back

Open as a Modal

Update Props

Clean Up

Next Steps