Mastershot Editor for React

Mastershot's photo and video editor as a React component, for React 18 and up and Next.js. 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/react-editor

import { MastershotEditor } from "@mastershot/react-editor"

export function PhotoEditor({ file, onSave }) {
  return (
    <MastershotEditor
      src={file}
      utils={["crop", "resize"]}
      imageCropAspectRatio={1}
      licenseKey={process.env.NEXT_PUBLIC_MASTERSHOT_KEY}
      onProcess={({ dest }) => onSave(dest)}
      style={{ height: 600 }}
    />
  )
}

Every option of @mastershot/editor is a prop, and every event is an on… prop: onProcess, onLoad, onLoadStart. Changing a prop changes the editor straight away, with the edits kept. A ref's editor is the editor itself, for its methods. The editor loads only in the browser, so server rendering never runs it; in Next.js, put "use client" at the top of the file.

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