Next.js

Render the editor in Next.js, with the App Router or the Pages Router.

Try every prop live in the playground, open on Next.js, 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

Render

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

app/edit/page.tsx

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

const Page = () => (
  <div style={{ height: '100dvh' }}>
    <EmbedEditor src='/photos/sunset.jpg' />
  </div>
);

export default Page;

The server sends only an empty host (<div data-ee-host="">). The editor mounts in the browser after hydration, with no hydration warning.

Update Props

A server component can pass only serializable props. Callbacks such as onProcess and onClose need a client component around the editor.

app/edit/photo-editor.tsx

'use client';

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

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

export default PhotoEditor;

From there, props apply live as in React.

Safe Areas

Export the viewport from the root layout, so the editor knows about the notch and the home indicator.

app/layout.tsx

import type { Viewport } from 'next';

export const viewport: Viewport = { initialScale: 1, viewportFit: 'cover', width: 'device-width' };

Clean Up

openEditor and mountEditor touch the DOM. 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.The Pages Router works the same way: the page renders the empty host on the server and the editor after hydration. Verified with Next.js 14.2 (webpack) and 16.3 (Turbopack).

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

Render

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

app/edit/page.tsx

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

const Page = () => (
  <div style={{ height: '100dvh' }}>
    <EmbedEditor src='/photos/sunset.jpg' />
  </div>
);

export default Page;

The server sends only an empty host (<div data-ee-host="">). The editor mounts in the browser after hydration, with no hydration warning.

Update Props

A server component can pass only serializable props. Callbacks such as onProcess and onClose need a client component around the editor.

app/edit/photo-editor.tsx

'use client';

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

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

export default PhotoEditor;

From there, props apply live as in React.

Safe Areas

Export the viewport from the root layout, so the editor knows about the notch and the home indicator.

app/layout.tsx

import type { Viewport } from 'next';

export const viewport: Viewport = { initialScale: 1, viewportFit: 'cover', width: 'device-width' };

Clean Up

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

Render

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

app/edit/page.tsx

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

const Page = () => (
  <div style={{ height: '100dvh' }}>
    <EmbedEditor src='/photos/sunset.jpg' />
  </div>
);

export default Page;

The server sends only an empty host (<div data-ee-host="">). The editor mounts in the browser after hydration, with no hydration warning.

Update Props

A server component can pass only serializable props. Callbacks such as onProcess and onClose need a client component around the editor.

app/edit/photo-editor.tsx

'use client';

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

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

export default PhotoEditor;

From there, props apply live as in React.

Safe Areas

Export the viewport from the root layout, so the editor knows about the notch and the home indicator.

app/layout.tsx

import type { Viewport } from 'next';

export const viewport: Viewport = { initialScale: 1, viewportFit: 'cover', width: 'device-width' };

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Install

Render

Update Props

Safe Areas

Clean Up

Set Up the Registry

Install

Render

Update Props

Safe Areas

Clean Up

Set Up the Registry

Install

Render

Update Props

Safe Areas

Clean Up

Next Steps

React

Inline and Page

​Install

​Render

​Update Props

​Safe Areas

​Clean Up

​Set Up the Registry

​Install

​Render

​Update Props

​Safe Areas

​Clean Up

​Set Up the Registry

​Install

​Render

​Update Props

​Safe Areas

​Clean Up

​Next Steps

React

Inline and Page

Install

Render

Update Props

Safe Areas

Clean Up

Set Up the Registry

Install

Render

Update Props

Safe Areas

Clean Up

Set Up the Registry

Install

Render

Update Props

Safe Areas

Clean Up

Next Steps