HTML & JavaScript

Mount the editor on any page with the standalone entry. React is bundled inside it.

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

Without a bundler, serve the package’s dist folder as it is. The entries load their chunks from beside them.

In a React app, use the React entry instead. The standalone entry works there too, but your app then ships a second React.

Render

index.html

<div id="editor" style="height: 600px"></div>

<script type="module">
  import { mountEditor } from '/assets/embed-editor/standalone.js';

  const editor = mountEditor(document.getElementById('editor'), {
    lang: 'en-us',
    onProcess: ({ dest, state }) => {
      console.info(dest.name, dest.size, state);
    },
    src: '/photos/sunset.jpg'
  });
</script>

mountEditor adds a host element inside the element you pass and mounts the editor there. An element holds one editor: mounting again takes over the first one. Give the element a height.With a bundler, import from @embededitor/free/standalone instead.

Update Props

mountEditor returns { update, destroy }. update(options) takes the full options again, like new React props, not a patch.

main.js

editor.update({
  lang: 'pt-br',
  onProcess: ({ dest, state }) => {
    console.info(dest.name, dest.size, state);
  },
  src: '/photos/sunset.jpg'
});

src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.

Clean Up

main.js

editor.destroy();

Calling update after destroy throws.

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

Without a bundler, serve the package’s dist folder as it is. The entries load their chunks from beside them.

In a React app, use the React entry instead. The standalone entry works there too, but your app then ships a second React.

Render

index.html

<div id="editor" style="height: 600px"></div>

<script type="module">
  import { mountEditor } from '/assets/embed-editor/standalone.js';

  const editor = mountEditor(document.getElementById('editor'), {
    lang: 'en-us',
    onProcess: ({ dest, state }) => {
      console.info(dest.name, dest.size, state);
    },
    src: '/photos/sunset.jpg'
  });
</script>

Update Props

mountEditor returns { update, destroy }. update(options) takes the full options again, like new React props, not a patch.

main.js

editor.update({
  lang: 'pt-br',
  onProcess: ({ dest, state }) => {
    console.info(dest.name, dest.size, state);
  },
  src: '/photos/sunset.jpg'
});

src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.

Clean Up

main.js

editor.destroy();

Calling update after destroy throws.

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

Without a bundler, serve the package’s dist folder as it is. The entries load their chunks from beside them.

In a React app, use the React entry instead. The standalone entry works there too, but your app then ships a second React.

Render

index.html

<div id="editor" style="height: 600px"></div>

<script type="module">
  import { mountEditor } from '/assets/embed-editor/standalone.js';

  const editor = mountEditor(document.getElementById('editor'), {
    lang: 'en-us',
    onProcess: ({ dest, state }) => {
      console.info(dest.name, dest.size, state);
    },
    src: '/photos/sunset.jpg'
  });
</script>

Update Props

mountEditor returns { update, destroy }. update(options) takes the full options again, like new React props, not a patch.

main.js

editor.update({
  lang: 'pt-br',
  onProcess: ({ dest, state }) => {
    console.info(dest.name, dest.size, state);
  },
  src: '/photos/sunset.jpg'
});

src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.

Clean Up

main.js

editor.destroy();

Calling update after destroy throws.

Next Steps

Inline and Page

Show the editor in a box or over the whole viewport.

mountEditor

The full signature.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Install

Render

Update Props

Clean Up

Set Up the Registry

Install

Render

Update Props

Clean Up

Set Up the Registry

Install

Render

Update Props

Clean Up

Next Steps

Inline and Page

mountEditor

​Install

​Render

​Update Props

​Clean Up

​Set Up the Registry

​Install

​Render

​Update Props

​Clean Up

​Set Up the Registry

​Install

​Render

​Update Props

​Clean Up

​Next Steps

Inline and Page

mountEditor

Install

Render

Update Props

Clean Up

Set Up the Registry

Install

Render

Update Props

Clean Up

Set Up the Registry

Install

Render

Update Props

Clean Up

Next Steps