# Svelte Image Editor

In Svelte 5 you mount Embed Editor from a component. mountEditor, from the standalone entry, takes a bound div and the options, draws the editor in it and returns update and destroy. Mount it in onMount, return the destroy from onMount, and let a $effect send changes.

## Add It to Your Svelte 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
```

```svelte
<script lang="ts">
  import { mountEditor } from '@embededitor/free/standalone';
  import { onMount } from 'svelte';

  let { src }: { src: string } = $props();

  let host: HTMLDivElement;

  onMount(() => {
    const editor = mountEditor(host, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src
    });

    return () => editor.destroy();
  });
</script>

<div bind:this={host} style="height: 600px"></div>
```

### Lite

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

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

```svelte
<script lang="ts">
  import { mountEditor } from '@embededitor/lite/standalone';
  import { onMount } from 'svelte';

  let { src }: { src: string } = $props();

  let host: HTMLDivElement;

  onMount(() => {
    const editor = mountEditor(host, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src
    });

    return () => editor.destroy();
  });
</script>

<div bind:this={host} style="height: 600px"></div>
```

### Full

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

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

```svelte
<script lang="ts">
  import { mountEditor } from '@embededitor/full/standalone';
  import { onMount } from 'svelte';

  let { src }: { src: string } = $props();

  let host: HTMLDivElement;

  onMount(() => {
    const editor = mountEditor(host, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src
    });

    return () => editor.destroy();
  });
</script>

<div bind:this={host} style="height: 600px"></div>
```

## The Editor You Just Installed

The Full edition with the embededitor.com badge, running in your browser. Photo by [Nikita Khavkin](https://unsplash.com/photos/tower-bridge-in-london-r63ZAtHlCaA) on Unsplash.

## What Changes in Svelte

- A Bound div Is the Host: bind:this={host} gives the div once the component is in the page, and onMount is where mountEditor can use it.
- onMount Returns the Clean-Up: The function onMount returns runs when the component unmounts. Returning destroy() from it is the whole clean-up.
- A $effect Sends the Changes: A $effect reads the props and calls editor.update(options) whenever lang or src changes.
- Inputs Come from $props: The docs' component destructures lang and src from $props(), with lang defaulting to 'en-us'.

## The Props You Will Use Most

- [src](https://docs.embededitor.com/api-reference/props#source): The photo, read at open. It comes in as a $props field.
- [outputType](https://docs.embededitor.com/api-reference/props#output): The type Save writes: the source's when it is JPEG, PNG or WebP, and PNG for any other source.
- [onProcess](https://docs.embededitor.com/api-reference/props#callbacks): Takes the saved File and its state as a callback prop.
- [colors](https://docs.embededitor.com/api-reference/props#appearance): One base color per role, to match the editor to your app.

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

## Svelte Questions

### Which Svelte version does the example use?

Svelte 5. The example takes its inputs with $props and sends changes from a $effect.

### Where does destroy go?

In the function onMount returns. Svelte calls it when the component unmounts, and it calls destroy().

### Why does the $effect not fail before the mount?

The editor is undefined until onMount runs, so the $effect calls editor?.update(options): before the mount it does nothing, afterwards it sends the props.

### Why is the editor invisible?

The editor fills its host element, so give the div a height, and at least 320 px of width.

## Set it up for Svelte 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=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IlNWRUxURSJ9)