Add the editor to your site

The editor is one script on our CDN. There's nothing to install and no server to run, and it works in plain HTML or any framework. You don't need a key or an account to try it on your own computer.

Try it in two minutes

Save this as an HTML file and open it from a local server, such as npx serve or your framework's dev server. Choose a photo or a video, edit it, and press Done.

<div id="editor" style="height: 600px"></div>

<script type="module">
  import { appendDefaultEditor } from "https://cdn.mastershot.app/editor/1.1.0/editor.js"

  const editor = appendDefaultEditor("#editor")

  editor.on("process", ({ dest }) => {
    // dest is the edited File, ready to upload or download.
    console.log(dest.name, dest.size)
  })
</script>

The editor fills the box you give it, so give the box a height. It works on localhost, on private network addresses, and on .test and .local names without a key.

Open a file you already have

Most sites already have the file, from a file input or an upload. Pass it as src. It can be a File, a Blob, or a URL. A URL on another domain needs CORS headers that let your page read it.

const input = document.querySelector("input[type=file]")

input.addEventListener("change", () => {
  editor.loadImage(input.files[0])
})

You can also give it when you make the editor: appendDefaultEditor("#editor", { src: file }).

Get the edited file back

When your visitor presses Done, the editor saves the file in their browser and sends the process event. Its dest is a File with the edits in it. Photos come back as JPG, PNG or WebP, and videos in their own format where they can, otherwise MP4.

editor.on("process", async ({ dest, imageState }) => {
  const form = new FormData()
  form.append("file", dest)
  await fetch("/upload", { method: "POST", body: form })
})

Get the edited file covers uploading, the output format and size, and letting the editor do the upload for you.

Open it over the page instead

openDefaultEditor opens the editor in a modal. It closes on its own when the file is saved, or when your visitor presses Cancel or Escape.

import { openDefaultEditor } from "https://cdn.mastershot.app/editor/1.1.0/editor.js"

button.addEventListener("click", () => {
  const editor = openDefaultEditor({ src: file })
  editor.on("process", ({ dest }) => upload(dest))
})

Or as an HTML element

defineDefaultCustomElements registers <mastershot-editor>. It takes src, theme and license-key as attributes, has every option as a property, and sends each event as a DOM event named mastershot:<event>.

<mastershot-editor
  src="/photos/cover.jpg"
  style="display: block; height: 600px"
></mastershot-editor>

<script type="module">
  import { defineDefaultCustomElements } from "https://cdn.mastershot.app/editor/1.1.0/editor.js"

  await defineDefaultCustomElements()

  document
    .querySelector("mastershot-editor")
    .addEventListener("mastershot:process", (event) =>
      upload(event.detail.dest)
    )
</script>

Pick a version

Every release has its own address, https://cdn.mastershot.app/editor/<version>/editor.js, and never changes once it's out, so your site only changes when you change the number. The newest is 1.1.0. Versions lists them all.

Next

• Put it on a live site: where the license key goes.
• Choose the tools: show only crop, or only trim, and set crop shapes.
• React, Vue, Svelte and others: the same in a component.