# JavaScript Image Editor, No Framework Needed

Embed Editor mounts on any page with one function call, and needs no framework. The standalone entry has React bundled inside, so a plain page or a server-rendered template adds nothing: mountEditor(element, options) draws the editor in the element and returns update and destroy.

## Add It to Your JavaScript 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.

### Free

```bash
npm install @embededitor/free
```

```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'), {
    onProcess: ({ dest }) => {
      console.info('saved', dest.name);
    },
    src: '/photos/sunset.jpg'
  });
</script>
```

### Lite

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

```bash
npm install @embededitor/lite
```

```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'), {
    onProcess: ({ dest }) => {
      console.info('saved', dest.name);
    },
    src: '/photos/sunset.jpg'
  });
</script>
```

### Full

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

```bash
npm install @embededitor/full
```

```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'), {
    onProcess: ({ dest }) => {
      console.info('saved', dest.name);
    },
    src: '/photos/sunset.jpg'
  });
</script>
```

## The Editor You Just Installed

The Full edition with the embededitor.com badge, running in your browser. Photo by [Vitaly Gariev](https://unsplash.com/photos/a-waiter-takes-an-order-from-customers-at-a-cafe-9CR19q291ac) on Unsplash.

## What Changes in JavaScript

- A Script Tag or a Bundler: Without a bundler, serve the package's dist folder as it is: the entries load their chunks from beside them. With one, import from the package's /standalone entry instead.
- One Editor per Element: mountEditor adds a host element inside the element you pass and mounts the editor there. An element holds one editor, and mounting again takes over the first.
- update and destroy Are the Whole API: mountEditor returns { update, destroy }. update(options) takes the full options again, like new React props, not a patch, and destroy() removes the editor.
- In a React App, Use the React Entry: If your app is React, use the React entry. The standalone one works there too, but then your app ships a second React.

## The Props You Will Use Most

- [src](https://docs.embededitor.com/api-reference/props#source): The photo: a URL, a File or Blob, bytes, an img element, a canvas or an ImageBitmap.
- [onProcess](https://docs.embededitor.com/api-reference/props#callbacks): Called with the saved File and its state. Without it, Save downloads the file.
- [layout](https://docs.embededitor.com/api-reference/props#layout): 'page' makes the editor the whole page; it needs viewport-fit=cover in the viewport meta tag.
- [onClose](https://docs.embededitor.com/api-reference/props#callbacks): Called when the editor closes, for instance to go back in history.
- [lang](https://docs.embededitor.com/api-reference/props#appearance): The docs' update example switches the language to 'pt-br' with one call.

[Every prop in the docs](https://docs.embededitor.com/api-reference/props)

## JavaScript Questions

### Does the editor need React on my page?

No. The standalone entry has React inside it, so you add nothing to your page. In a React app use the React entry instead: the standalone entry works there too, but your app then ships a second React.

### Can I use it without a bundler?

Yes. Serve the package's dist folder as it is and import the standalone file from it. The entries load their chunks from beside them.

### Can two editors share an element?

No. An element holds one editor: mounting again takes over the first one. Give each editor its own element.

### How do I open it as a dialog or as the whole page?

openEditor opens the editor over the page and returns close. For the whole page instead, mount with layout: 'page' and add viewport-fit=cover to the viewport meta tag, so the safe areas are reported.

## Set it up for JavaScript in the playground.

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

[Open in the Playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IkhUTUwifQ)