> ## 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.

# Svelte

> Mount Embed Editor from a Svelte 5 component with the standalone entry.

Mount the editor from a Svelte 5 component with the standalone entry.

> [!TIP]
>
> Try every prop live in the [playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IlNWRUxURSJ9), open on Svelte, 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
> ```
>
> ## Render
>
> ```svelte PhotoEditor.svelte theme={"dark"}
> <script lang="ts">
>   import { mountEditor } from '@embededitor/free/standalone';
>   import type { Lang } from '@embededitor/free/standalone';
>   import { onMount } from 'svelte';
>
>   let { lang = 'en-us', src }: { lang?: Lang; src: string } = $props();
>
>   let host: HTMLDivElement;
>   let editor: ReturnType<typeof mountEditor> | undefined;
>
>   onMount(() => {
>     editor = mountEditor(host, { lang, src });
>
>     return () => editor?.destroy();
>   });
>
>   $effect(() => {
>     const options = { lang, src };
>
>     editor?.update(options);
>   });
> </script>
>
> <div bind:this={host} style="height: 600px"></div>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> The `$effect` reads the props, then sends the full options again through `update(options)`, not a patch. It runs whenever `lang` or `src` changes.
>
> `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
>
> The function `onMount` returns calls `destroy()` when the component unmounts. 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
> ```
>
> ## Render
>
> ```svelte PhotoEditor.svelte theme={"dark"}
> <script lang="ts">
>   import { mountEditor } from '@embededitor/lite/standalone';
>   import type { Lang } from '@embededitor/lite/standalone';
>   import { onMount } from 'svelte';
>
>   let { lang = 'en-us', src }: { lang?: Lang; src: string } = $props();
>
>   let host: HTMLDivElement;
>   let editor: ReturnType<typeof mountEditor> | undefined;
>
>   onMount(() => {
>     editor = mountEditor(host, { lang, src });
>
>     return () => editor?.destroy();
>   });
>
>   $effect(() => {
>     const options = { lang, src };
>
>     editor?.update(options);
>   });
> </script>
>
> <div bind:this={host} style="height: 600px"></div>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> The `$effect` reads the props, then sends the full options again through `update(options)`, not a patch. It runs whenever `lang` or `src` changes.
>
> `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
>
> The function `onMount` returns calls `destroy()` when the component unmounts. 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
> ```
>
> ## Render
>
> ```svelte PhotoEditor.svelte theme={"dark"}
> <script lang="ts">
>   import { mountEditor } from '@embededitor/full/standalone';
>   import type { Lang } from '@embededitor/full/standalone';
>   import { onMount } from 'svelte';
>
>   let { lang = 'en-us', src }: { lang?: Lang; src: string } = $props();
>
>   let host: HTMLDivElement;
>   let editor: ReturnType<typeof mountEditor> | undefined;
>
>   onMount(() => {
>     editor = mountEditor(host, { lang, src });
>
>     return () => editor?.destroy();
>   });
>
>   $effect(() => {
>     const options = { lang, src };
>
>     editor?.update(options);
>   });
> </script>
>
> <div bind:this={host} style="height: 600px"></div>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> The `$effect` reads the props, then sends the full options again through `update(options)`, not a patch. It runs whenever `lang` or `src` changes.
>
> `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
>
> The function `onMount` returns calls `destroy()` when the component unmounts. Calling `update` after `destroy` throws.

## Next Steps

> [card] [Props](https://docs.embededitor.com/api-reference/props.md)
>
> Every option the editor takes.

> [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.