Mastershot Editor for Angular

Mastershot's photo and video editor as a standalone Angular component, for Angular 17 and up. 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/angular-editor

import { Component } from "@angular/core"
import { MastershotEditorComponent } from "@mastershot/angular-editor"

@Component({
  selector: "app-photo-editor",
  standalone: true,
  imports: [MastershotEditorComponent],
  template: `
    <mastershot-editor
      [src]="file"
      [options]="{ utils: ['crop', 'resize'], imageCropAspectRatio: 1 }"
      licenseKey="MSE-…"
      (process)="save($event.dest)"
      style="height: 600px"
    />
  `,
})
export class PhotoEditorComponent {
  file?: File
  save(file: File) {}
}

[options] takes every option of @mastershot/editor, and each of its events is an output of the same name: (process), (load), (update). Changing an input changes the editor straight away, with the edits kept. The component's editor is the editor itself. The editor loads only in the browser, after the view is ready, so server rendering never runs it.

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