Next.js

Next.js Image Editor

Embed Editor works in Next.js with the App Router or the Pages Router. Its React entry starts with 'use client', so a server component can render EmbedEditor directly: the server sends an empty host and the editor mounts in the browser after hydration, with no hydration warning.

Open in the Playground Read the Docs

Install

Add It to Your Next.js 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

app/edit/photo-editor.tsx

'use client';

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 the Palace of Westminster and a red bus, a note on the palace and Big Ben's height marked 96 m

The Full edition with the embededitor.com badge, running in your browser. Photo by Aron Van de Pol on Unsplash.

In Next.js

What Changes in Next.js

A Server Component Can Render It

The entry is marked as a client module, so a page.tsx can render EmbedEditor with no wrapper. A server component can pass only serializable props.

Callbacks Need a Client Component

onProcess and onClose are functions, and functions do not cross from a server component. Put the editor in a file that starts with 'use client', as the code above does.

Safe Areas on a Phone

Export the viewport from the root layout with viewportFit: 'cover', so the editor knows about the notch and the home indicator.

The Server Renders an Empty Host

The server render holds only <div data-ee-host="">. Anything that opens the editor from code (openEditor, mountEditor) belongs in an event handler or an effect.

Props

The Props You Will Use Most

src

A public path such as /photos/sunset.jpg works from a server component, since a string is serializable.

layout

'page' covers the whole viewport as the page itself, and the page behind it does not scroll.

onProcess

Receives the saved File and the state.

onClose

Given, it closes the editor on Escape (closeOnEscape) as well as from the Close button, which shows only then.

Every prop in the docs.

FAQ

Next.js Questions

Can I render the editor from a server component?

Yes, with serializable props. The React entry starts with 'use client', so a server component can render EmbedEditor directly.

Does it cause hydration warnings?

No. The server sends only an empty host element, and the editor mounts in the browser after hydration.

Does it work with the Pages Router and Turbopack?

Yes, the same way: the page renders the empty host on the server and the editor after hydration. It was verified with Next.js 14.2 on webpack and 16.3 on Turbopack.

Why does a call to openEditor fail on the server?

openEditor and mountEditor touch the DOM, so call them from an event handler or an effect, never during a server render. Importing either entry on the server touches nothing of window, document or navigator.

Set it up for Next.js 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: React, Vue, Angular, Svelte, JavaScript.