Up next in 10
Node.js Express Project to Build Canva Clone Video Editor to Trim & Split Videos Using FFMPEG WASM
Mar 12, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-ffmpeg-video-editor-in-browser-to-trim-split-videos-in-node-js-express-using-webassembly-copy/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I show you I built out a
0:04
NodeJS Express uh project which allows
0:08
you to actually edit your videos
0:10
directly in the browser with a Canva
0:13
clone video editor kind of a project. So
0:15
this is actually the directory structure
0:17
as you can just see right here I have
0:19
given the link you can directly purchase
0:21
the full source code. So this is
0:22
entirely built inside NodeJS express and
0:25
it is using the FMPG web assembly
0:28
library. So actually we are actually
0:31
storing all the ffmpg binaries as you
0:33
can just see right here it's simply
0:36
stored right in the directory structure.
0:40
So we are running this application on
0:41
local host. So I started this
0:43
application. So let me show you the
0:46
actual demo of the application. So once
0:49
you open localhost.
0:51
So this is actually the interface of the
0:53
application. Uh it's similar to canva
0:56
clone timeline editor. So here you
0:58
simply select your video file, whatever
1:00
video file you want to edit, and you
1:02
place it inside the timeline section.
1:05
And now you can actually play the video.
1:09
And right here you right click and you
1:12
have the options to trim and split your
1:14
video. So if you want to trim the video,
1:17
you actually get these nice little
1:19
sliders out there. With the help of
1:21
this, you can simply trim out whatever
1:24
portion of the video that you want to
1:25
trim out. So you select the starting and
1:28
the ending duration using these sliders
1:31
and then if you're happy you simply
1:33
click the done button. As soon as you
1:35
click this the processing will happen
1:38
and right here you click the done button
1:41
right here.
1:43
After that you simply click the render
1:45
button and then the ffmpg processing
1:48
will start as soon as you do this and
1:50
then you can simply download the output
1:52
video. So you will see that the output
1:55
video successfully downloaded. So in
1:58
this easy way you can split the video
2:00
and similarly if you want to split a
2:04
long video into multiple parts. Again
2:08
the splitting part is also very easy.
2:10
You simply drag the video on the
2:12
timeline section
2:15
and right click and you have this option
2:18
here of split.
2:21
So here you can split the video into two
2:23
sections. As you can just see here how
2:24
easy it is.
2:28
Simply select and right click and split.
2:30
And here you can just see we splitted
2:33
the video into three parts here.
2:36
It's very easy. And this part if you
2:38
don't need you can delete this part. As
2:40
you can just see here how easy it is.
2:43
And once again then you simply click
2:45
render button. And after that the fmpg
2:48
will start execute directly in the
2:50
browser. So you can directly purchase
2:52
this project guys. The link is given in
2:54
the description and it is directly runs
2:56
in the browser. This video editor
2:58
project similar to Canva. So it will
3:01
save you a lot of time. You can actually
3:03
execute this application directly in the
3:06
browser. So it's a single page
3:07
application. All the processing directly
3:09
happens in the browser. And apart from
3:12
that you can even change the quality of
3:14
the video as well. So let's suppose you
3:16
want to downgrade the video quality. You
3:19
can select here dimensions right here.
3:22
Just
3:24
so you [snorts] can just see here how
3:26
easy it is to change the quality here.
3:29
And once again you do this click the
3:32
render button. It's really fast as well.
3:35
As soon as you see the download button
3:37
will come. So we are directly executing
3:40
ffmpg directly in the browser. So this
3:43
is the overall project. If you are
3:45
interested in this, the link is given in
3:47
the description. After you purchase it,
3:49
you will get the source code
3:50
automatically from Google Drive. You
3:53
will be redirected and it will be very
3:56
easy for you to modify the source code
3:58
as well. So all the things are
3:59
customizable. You can just see here all
4:02
the source code files are there. So you
4:04
can even add more features on top of
4:06
this video editor and it's a single page
4:09
application completely offline. It
4:11
directly runs in the browser. So it
4:13
doesn't have a back end. So it's a
4:15
single page application in NodeJS
4:18
Express. So if you're interested in
4:20
this, the link is given in the
4:22
description. Uh it's a timeline based
4:25
video editor.
4:26
So you basically can do anything with
4:31
the video. You can select multiple
4:33
videos, merge them, just drag them into
4:35
the timeline section. And I showed you
4:38
all the features right here. You can
4:40
adjust the quality, split, trim the
4:42
video.
4:44
So if you're happy in this, the link is
4:46
given in the description.