Mastershot Editor for Svelte

Mastershot's photo and video editor as a Svelte action, for Svelte 4 and 5 and SvelteKit. Your visitors crop, turn, trim, pixelate and resize their files on your page, and your code gets the edited file.

npm install @mastershot/editor @mastershot/svelte-editor

<script>
  import { mastershotEditor } from "@mastershot/svelte-editor"

  let { file, onsave } = $props()
</script>

<div
  use:mastershotEditor={{
    src: file,
    utils: ["crop", "resize"],
    onprocess: ({ dest }) => onsave(dest),
  }}
  style="height: 600px"
></div>

The object takes every option of @mastershot/editor, and on… keys for its events: onprocess, onload. When the object changes, the editor changes with it. The element gets an editor event with the editor once it has loaded. Actions run only in the browser.

License

Free on localhost, private network addresses and .test names, so you can build and try it without an account. A live site needs a license key, and the key works only on the domains you add to it. Without one the editor still works, with a thin "Unlicensed" line above it.

Docs · Try it and set it up