Add an image and video editor to your Vue app.
Mastershot’s editor is a Vue 3 component for Vue and Nuxt. Your visitors crop, turn, trim, pixelate, and resize their photos and videos in your app, and your code gets the edited file. It all runs in their browser.
Install the Vue component
Install the editor and its Vue package from npm. They come with TypeScript types, and there’s no stylesheet to import.
bash
npm install @mastershot/editor @mastershot/vue-editor- Every option is an attribute, in kebab-case or camelCase, and every event is a listener, such as @process or @load. Changing an attribute changes the editor straight away, with the edits kept.
- A template ref’s editor is the editor itself, for its methods.
- In Nuxt, wrap the component in <ClientOnly>.
vue
<script setup>
import { MastershotEditor } from "@mastershot/vue-editor"
defineProps({ file: File })
const emit = defineEmits(["save"])
</script>
<template>
<MastershotEditor
:src="file"
:utils="['crop', 'resize']"
:image-crop-aspect-ratio="1"
@process="({ dest }) => emit('save', dest)"
style="height: 600px"
/>
</template>What your visitors can do
Photos
Opens JPG, PNG, WebP, AVIF, HEIC, GIF, BMP, TIFF, and SVG, and saves JPG, PNG, or WebP.
- Crop freely or to a shape such as 1:1, 4:5, or 16:9, or to your own sizes for avatars and banners.
- Turn in quarter turns, or straighten with a slider that keeps the crop level with no empty corners.
- Flip across or up and down.
- Pixelate or blur faces, number plates, or text, or the whole photo.
- Black and white, or inverted colors.
- Save at an exact width and height in pixels.
Videos
Opens MP4, MOV, WebM, and MKV, and saves in the video’s own format where it can, otherwise MP4.
- Keep one part of a video, or several parts joined back to back.
- Crop, turn, flip, and resize with the same tools as photos.
- Take the sound out.
- Saved at no more than the video’s own quality.
On your site
One JavaScript library from our CDN or npm, in plain HTML or with React, Vue, Svelte, or Angular.
- Takes on your site’s colors, corners, and font, in light and dark.
- Sits inside your page, or opens over it.
- Show only the tools you want, and the crop shapes and sizes that fit your site.
- Undo and redo, and edits that can be saved and opened again later.
- Works on phones and computers, in Chrome, Edge, Firefox, and Safari.
Questions
Yes. Wrap the component in <ClientOnly>, since the editor runs only in the browser.
Yes. The same component opens photos and videos. Visitors keep one part of a video or several, crop, turn, resize, and take the sound out, and @process hands you the edited file.
Yes. Every attribute, event, and method is typed, so the editor is checked as you write.
No. The editor opens and saves files in your visitor’s browser, and nothing goes to Mastershot. Your code gets the edited file and decides where it goes.
It’s free on localhost, private networks, and .test or .local names, with no key or sign-up. A live site needs a yearly plan for your company, from $129, which covers every developer on your team.
The editor in other frameworks
It’s the same editor in React, Svelte, and Angular, and in plain HTML with one script.