Up next in 10
Node.js Express Project to Build Canva Clone Video Editor to Trim & Split Videos Using FFMPEG WASM
Dec 18, 2025
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/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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
0:16
structure. As you can just see right
0:18
here, I have given the link you can
0:20
directly purchase the full source code.
0:22
So this is entirely built inside NodeJS
0:24
Express and it is using the FMPG web
0:27
assembly library. So actually we are
0:30
actually storing all the ffmpg binaries
0:33
as you can just rewrite 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 local host.
0:51
So this is actually the interface of the
0:53
application. Uh it's similar to canv
0:56
timeline editor. So here you simply
0:58
select your video file, whatever video
1:00
file you want to edit and you place it
1:03
inside the timeline section. And now you
1:06
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 FMPG processing will
1:48
start as soon as you do this and then
1:50
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 directly runs in
2:56
the browser. This video editor project
2:59
similar to Canva. So it will save you a
3:01
lot of time. You can actually execute
3:04
this application directly in the
3:05
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 can just see here how easy it is
3:28
to change the quality here. And once
3:30
again you do this click the render
3:33
button. It's really fast as well. As
3:35
soon as you see the download button will
3:37
come. So we are directly executing ffmpg
3:41
directly in the browser. So this is the
3:43
overall project. If you are interested
3:45
in this, the link is given in the
3:47
description. After you purchase it, you
3:49
will get the source code automatically
3:51
from Google Drive. You will be
3:53
redirected and it will be very easy for
3:56
you to modify the source code as well.
3:58
So all the things are customizable. You
4:01
can just see here all the source code
4:02
files are there. So you can even add
4:04
more features on top of this video
4:06
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.