Up next in 10
Vue.js ClipCraft — Build an In-Browser Video Cutter & Trimmer with FFmpeg WASM (No Backend)
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/vue-js-clipcraft-build-an-in-browser-video-cutter-trimmer-with-ffmpeg-wasm-no-backend/
Live Demo of App:
https://freemediatools.com/videocutter/
Show More Show Less View Video Transcript
0:00
In this video, I'll show you a Vue.js uh
0:03
video editor that I developed directly
0:05
in the browser and also deployed this.
0:07
I've also given the demo link in the
0:09
description of the video. So, check the
0:11
full description. So, once you land on
0:13
this, the interface looks something like
0:15
this. We have this choose file button
0:18
where you let you select your video file
0:20
that you want to trim and cut. Once the
0:22
video file loads, we have these sliders
0:24
right here where you can select the
0:26
starting duration and the ending
0:27
duration. After selecting those, we have
0:30
this button right here. Click on trim
0:32
video. And as soon as you click it, the
0:35
processing will happen directly in the
0:36
browser. And this is your end result.
0:39
Can play the video. And this project is
0:42
developed entirely in Vue.js Vue3. We
0:46
have used FMPPG web assembly library. So
0:48
if you need the full source code, I've
0:50
also given the purchase link. You can
0:52
directly purchase a source code. After
0:55
purchasing it, you will get this
0:56
directory structure from Google Drive
0:58
automatically. So each component is
1:01
divided into its view file and uh you
1:04
can easily run this project. I'm running
1:06
it by executing npm rundev
1:10
and the started you can see http
1:12
localhost 5173
1:14
and uh if I show you we are running it
1:17
as so again you repeat the same process.
1:20
You simply select your video that you
1:22
want to trim and cut. As soon as the
1:25
video loads, you repeat the same
1:27
process.
1:29
So the thing about this application,
1:31
there is no back end to it. It's
1:33
entirely happening directly in the
1:35
browser. All the processing which is
1:36
happening. So that's why it's really
1:39
fast as well. You simply click the trim
1:42
video and the processing is really fast.
1:46
So before you purchase the source code,
1:48
you can definitely look at the demo
1:52
just uh use it yourself and if you like
1:55
it then you can purchase the source code
1:57
and for building it we are using ffmppg
2:00
web assembly library which lets you use
2:03
fmpp directly in the browser
2:06
and as you know fmpp is a very popular
2:10
audio and video processing library
2:12
directly in the terminal. So we are
2:14
using this to build out this single page
2:17
application without any server and back
2:20
end.
2:21
It directly executes this
2:25
directly in the browser.
2:38
So you can just see this