Up next in 10
Vue Video Editor to Cut & Trim Videos in Browser Using FFmpeg WASM Powered, Drag-Drop, No Server
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/vue-video-editor-to-cut-trim-videos-in-browser-using-ffmpeg-wasm-powered-drag-drop-no-server/
Live Demo of App:
https://freemediatools.com/videocutter/
Show More Show Less View Video Transcript
0:00
Hello guys, in this video I will show
0:02
you a Vue.js video cutter, trimmer,
0:05
editor that I developed directly in the
0:07
browser. You can access the demo link in
0:09
the description of the video. So, check
0:11
the full description.
0:13
And once you land on this tool,
0:15
it doesn't have any sort of back end.
0:17
It's just a single page tool. So, once
0:20
you land on this, you simply select your
0:22
video file.
0:23
And as soon as the video loads, using
0:25
these sliders, you can actually select
0:28
the starting and the ending trimming
0:30
duration.
0:32
So, it's very easy.
0:33
So, once you selected this, we have this
0:35
button. As soon as you click the button,
0:37
the processing will happen directly in
0:39
the browser. And the video will be cut.
0:42
Here you can play the video.
0:45
And then you can download this video as
0:47
well, very simply.
0:48
And this is developed using FFmpeg
0:51
WebAssembly library. If you don't know
0:53
about this, this is a third-party
0:54
solution for using FFmpeg directly in
0:57
the browser.
0:59
And uh
1:00
if you need the full source code of this
1:02
project, I have given the
1:04
uh buy link. You can directly purchase
1:06
the source code. This is the full
1:08
directory structure.
1:10
And we are using Vue 3, as you can see
1:12
that. And we are also using FFmpeg
1:14
WebAssembly library.
1:16
And each component is divided into its
1:19
appropriate Vue.js file here, as you can
1:21
see.
1:23
This is a trimmer component, video input
1:25
slider. Everything is divided into its
1:28
multiple components.
1:30
And you can run this locally as well, by
1:32
running npm run dev.
1:35
So, this will start this project locally
1:37
as well.
1:39
So, if I show you localhost:5173,
1:42
we are running it on.
1:45
And again, you just need to repeat the
1:47
same process.
1:48
It doesn't have a back end. It
1:52
everything, the processing happens
1:54
directly in the browser. So, that makes
1:56
this application very fantastic. You can
1:59
instantly deploy this. Once you have the
2:02
source code, you can even modify the
2:04
source code and add additional features
2:07
as well. So, there is no restriction on
2:09
the size of video. You can upload as
2:12
much video as you want.
2:14
So, you can just see, first of all, it
2:16
downloads FFmpeg WebAssembly.
2:19
And then, in the console, all the
2:20
processing take place.
2:24
Mind you, FFmpeg is a desktop-based
2:27
command line processing library. But,
2:29
this solution allows you to use FFmpeg
2:32
directly in the browser.
2:37
So, if you know, this is a
2:40
terminal-based library.
2:42
But, this solution allow you to use it
2:44
in the browser. So, that's exactly what
2:47
we are using to cut and trim videos
2:50
directly in the browser. So, this is the
2:52
overall project. You can directly
2:54
first of all, see the demo.
2:56
And then, if you are interested, you can
2:58
purchase the uh source code.