Up next in 10
How to Build an Offline Video Cutter & Editor with Vue + FFmpeg WASM (Step-by-Step) in Browser
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/vue-ffmpeg-video-trimmer-1k-monthly-browser-based-javascript-cutter-editor-adsense-ezoic/
Live Demo of App:
https://freemediatools.com/videocutter/
Show More Show Less View Video Transcript
0:01
Uh hello guys in this live stream I will
0:04
show you how to build an offline video
0:06
cutter and editor in Vue.js 3 using
0:09
FFMPG web assembly library and for this
0:13
purpose I have developed this tool and
0:15
deployed this on my website and also
0:17
given the demo link in the description
0:19
of the video. So check the full
0:20
description and once you land on this
0:23
page it doesn't have a back end. It's
0:25
just a single page static offline editor
0:29
where you simply select your video file
0:32
to cut and trim. As soon as you select
0:34
the video, the video will load and then
0:37
using these sliders that you have the
0:39
starting trim, ending trim. You
0:41
basically select the
0:43
time period that you want to trim out or
0:45
cut. This is a starting and the ending
0:47
duration. So now we have the button. As
0:50
soon as you click the button, the
0:52
processing will happen directly in the
0:53
browser.
0:55
And the video is cut and now you can
0:57
play the video and even download the
1:00
video as well. So it's very simple
1:04
and it's using the ffmpg library which
1:07
is a very famous library for in the
1:10
command line. But this solution fmpp web
1:13
assembly allow you to use this library
1:15
directly in the browser. So we are
1:20
exactly using this inside of a Vue.js JS
1:23
project and I have also given the link
1:26
to purchase the source code. So this we
1:29
are using Vue3 and we are also using
1:32
ffmpg web assembly library. So this is a
1:35
complete offline video editor. So once
1:37
you purchase the source code this is a
1:39
directory structure. Each component is
1:42
divided into its own view file. You can
1:45
see all these components are there. So
1:47
now to run this project it's very
1:49
simple. you run the command npm rundef.
1:52
So this will start the local development
1:54
server at localhost 5173.
1:58
So
2:00
it's very simple. So we are also running
2:02
it locally as well. So as you can see
2:05
this is the same application. It's
2:07
really fast as well because no server
2:10
back end is there. All the processing
2:12
happens directly in the browser.
2:15
So it's a single page application. So
2:18
the processing is also very fast
2:21
because we are not re-encoding the
2:23
video. We are simply cutting and
2:25
trimming the portion. So this will also
2:28
save you a lot of time because many of
2:30
times you do need to cut your videos. So
2:34
interface is very simple. You simply
2:36
select the video
2:38
and using these sliders you cut and trim
2:40
the video. So this is a complete
2:42
solution offline base video editor
2:45
directly in the browser in Vue.js. JS3
2:48
using FMPG web assembly library. So if
2:52
you willing to purchase it, the link is
2:54
given in the description. So but before
2:56
that you can try this demo. It's also
3:00
given in the description.