React

React Image Editor Component

Embed Editor is an image editor you render as a React component. EmbedEditor fills the box its parent gives it, and when the person presses Save your onProcess receives the edited photo as a File. It needs react and react-dom 18.3 or 19 as peers, and there is no CSS to import.

Open in the Playground Read the Docs

Install

Add It to Your React App

Free is on public npm, with no key. Lite and Full install from the private registry with your license key: put the two lines in your project's .npmrc, keep the key in an environment variable, then install by name.

Terminal

npm install @embededitor/free

PhotoEditor.tsx

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

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

export default PhotoEditor;

Live

The Editor You Just Installed

The editor open on a forest lake, its Dramatic Warm filter on

The Full edition with the embededitor.com badge, running in your browser. Photo by Luca Bravo on Unsplash.

In React

What Changes in React

Props Apply Live

Props are React props: change one and the editor applies it live. The exceptions are src and state, which are read when the editor opens. To open another photo, give the component a new key.

Keep src Stable

Memoize it. A new Blob, or a URL.createObjectURL(file) written inline, restarts the load on every render while the image loads.

A Modal with One Call

openEditor opens the editor over the page from an event handler: a dialog on a desktop, a bottom sheet on a phone. It returns close, and Save closes it once onProcess returns.

Clean Up by Unmounting

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

Props

The Props You Will Use Most

src

The photo: a URL, a File or Blob, its bytes, an img, a canvas or an ImageBitmap. Read when the editor opens.

onProcess

Called with the saved File and the state it was made with.

layout

'inline' fills the box you give it; 'page' covers the viewport as the page itself.

aspectRatio

The width / height ratio the crop opens at. null is a free crop.

colors

One base color per role (accent, controls, surface) to match the editor to your brand.

lang

'en-us', 'es-es' or 'pt-br', or your own texts.

Every prop in the docs.

FAQ

React Questions

Does the React image editor need any CSS?

No. There is no CSS to import: install the package, render the component and give its parent a height.

Which React versions does it work with?

React 18.3 and 19. The React entry takes react and react-dom as peer dependencies.

How do I get the edited photo?

Pass onProcess. It receives the saved File as dest, and the state it was made with. Keep the state to reopen the photo with the same edits later.

Can I use it in React for free?

Yes. Free is on public npm as @embededitor/free, with the same props and the same React entry. It has the Adjust tools (crop, aspect ratio, zoom, focus, flip, rotate and straighten) and a small embededitor.com badge. Switching edition is changing the package name.

Set it up for React in the playground.

Change the edition, the colors, the tools and the crop, and copy the code for your app.

Open in the Playground

Another framework: Next.js, Vue, Angular, Svelte, JavaScript.