Mastershot Editor

A photo and video editor for your own website. Your visitors crop, turn, trim, pixelate and resize their files right on your page, before they upload, and your code gets the edited file. Everything runs in their browser; nothing passes through our servers.

• Opens JPG, PNG, WebP, AVIF, HEIC, GIF and more, and MP4, MOV, WebM and MKV video
• Saves JPG, PNG or WebP, and videos in their own format where it can
• Works in Chrome, Edge, Firefox and Safari, on phones and computers
• Takes on your site's colors, corners and font, in light and dark

Try it and set it up · Docs

Install

npm install @mastershot/editor

Use it

import { appendDefaultEditor } from "@mastershot/editor"

const editor = appendDefaultEditor("#editor", {
  src: file, // a File, a Blob, or a URL
  utils: ["crop", "resize"],
  imageCropAspectRatio: 1,
  licenseKey: "MSE-…", // on a live site
})

editor.on("process", ({ dest }) => upload(dest))

Give #editor a height. The editor draws in its own shadow root, so there's no stylesheet to import.

React, Vue, Svelte and Angular

Each framework has its own package, with a component, to install beside this one:

| Framework | Package | | -------------------- | ---------------------------- | | React and Next.js | @mastershot/react-editor | | Vue and Nuxt | @mastershot/vue-editor | | Svelte and SvelteKit | @mastershot/svelte-editor | | Angular | @mastershot/angular-editor |

npm install @mastershot/editor @mastershot/react-editor

Anything else

defineDefaultCustomElements() registers <mastershot-editor>, which works in any framework that renders custom elements.

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.

Everything the editor needs is in this package, so it never loads files from anywhere else. The only request it makes is the license check to mastershot.app, on a live site with a key.

Third-party licenses are in dist/licenses/.