Svelte
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.
Install
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.
Terminal
npm install @embededitor/freePhotoEditor.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>Live
The Editor You Just Installed
The Full edition with the embededitor.com badge, running in your browser. Photo by Nikita Khavkin on Unsplash.
In Svelte
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'.
Props
The Props You Will Use Most
The photo, read at open. It comes in as a $props field.
The type Save writes: the source's when it is JPEG, PNG or WebP, and PNG for any other source.
Takes the saved File and its state as a callback prop.
One base color per role, to match the editor to your app.
FAQ
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.
Another framework: React, Next.js, Vue, Angular, JavaScript.