Try every prop live in the playground, open on Svelte, 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.Give the host element a height: the editor fills it.
Install
npm install @embededitor/free
yarn add @embededitor/free
pnpm add @embededitor/free
bun add @embededitor/free
Render
PhotoEditor.svelte
<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>
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 functiononMount returns calls destroy() when the component unmounts. 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.Yarn 2 and newer ignore Set the key where your install runs, your shell or your CI’s secrets, never in git:Give the host element a height: the editor fills it.
Set Up the Registry
Your license key is on its card in your account ataccount.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}
.npmrc. Add this to .yarnrc.yml instead:.yarnrc.yml
npmScopes:
embededitor:
npmRegistryServer: "https://get.embededitor.com"
npmAuthToken: "${EMBED_EDITOR_KEY}"
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
PhotoEditor.svelte
<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>
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 functiononMount returns calls destroy() when the component unmounts. Calling update after destroy throws.Full has every tool, without the badge. It installs from the private registry, with the key of your license.Yarn 2 and newer ignore Set the key where your install runs, your shell or your CI’s secrets, never in git:Give the host element a height: the editor fills it.
Set Up the Registry
Your license key is on its card in your account ataccount.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}
.npmrc. Add this to .yarnrc.yml instead:.yarnrc.yml
npmScopes:
embededitor:
npmRegistryServer: "https://get.embededitor.com"
npmAuthToken: "${EMBED_EDITOR_KEY}"
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
PhotoEditor.svelte
<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>
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 functiononMount returns calls destroy() when the component unmounts. Calling update after destroy throws.Next Steps
Props
Every option the editor takes.
mountEditor
The full signature.