> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML & JavaScript

> Mount Embed Editor on any page with the standalone entry, which carries React inside.

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

> [!TIP]
>
> Try every prop live in the [playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IkhUTUwifQ), open on HTML, and copy the code it writes.

> [tab] Free
>
> 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
>
> ```bash npm theme={"dark"}
> npm install @embededitor/free
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/free
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/free
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/free
> ```
>
> Without a bundler, serve the package's `dist` folder as it is. The entries load their chunks from beside them.
>
> > [!NOTE]
> >
> > In a React app, use the [React entry](https://docs.embededitor.com/frameworks/react.md) instead. The standalone entry works there too, but your app then ships a second React.
>
> ## Render
>
> ```html index.html theme={"dark"}
> <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.
>
> ```js main.js theme={"dark"}
> 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
>
> ```js main.js theme={"dark"}
> editor.destroy();
> ```
>
> Calling `update` after `destroy` throws.

> [tab] Lite
>
> 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](https://embededitor.com/pricing) 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:
>
> ```ini .npmrc theme={"dark"}
> @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:
>
> ```yaml .yarnrc.yml theme={"dark"}
> 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:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/lite
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/lite
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/lite
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/lite
> ```
>
> Without a bundler, serve the package's `dist` folder as it is. The entries load their chunks from beside them.
>
> > [!NOTE]
> >
> > In a React app, use the [React entry](https://docs.embededitor.com/frameworks/react.md) instead. The standalone entry works there too, but your app then ships a second React.
>
> ## Render
>
> ```html index.html theme={"dark"}
> <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/lite/standalone` instead.
>
> ## Update Props
>
> `mountEditor` returns `{ update, destroy }`. `update(options)` takes the full options again, like new React props, not a patch.
>
> ```js main.js theme={"dark"}
> 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
>
> ```js main.js theme={"dark"}
> editor.destroy();
> ```
>
> Calling `update` after `destroy` throws.

> [tab] Full
>
> Full has every tool, 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](https://embededitor.com/pricing) 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:
>
> ```ini .npmrc theme={"dark"}
> @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:
>
> ```yaml .yarnrc.yml theme={"dark"}
> 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:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/full
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/full
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/full
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/full
> ```
>
> Without a bundler, serve the package's `dist` folder as it is. The entries load their chunks from beside them.
>
> > [!NOTE]
> >
> > In a React app, use the [React entry](https://docs.embededitor.com/frameworks/react.md) instead. The standalone entry works there too, but your app then ships a second React.
>
> ## Render
>
> ```html index.html theme={"dark"}
> <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/full/standalone` instead.
>
> ## Update Props
>
> `mountEditor` returns `{ update, destroy }`. `update(options)` takes the full options again, like new React props, not a patch.
>
> ```js main.js theme={"dark"}
> 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
>
> ```js main.js theme={"dark"}
> editor.destroy();
> ```
>
> Calling `update` after `destroy` throws.

## Next Steps

> [card] [Inline and Page](https://docs.embededitor.com/guides/inline.md)
>
> Show the editor in a box or over the whole viewport.

> [card] [mountEditor](https://docs.embededitor.com/api-reference/mount-editor.md)
>
> The full signature.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.