Up next in 10
Build a React Canva Clone Timeline Video Editor in Node.js & Express Using Fluent-FFMPEG in Browser
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-canva-clone-timeline-video-editor-in-node-js-express-using-fluent-ffmpeg-in-browser/
Show More Show Less View Video Transcript
0:04
Uh hello guys, welcome to this uh live
0:06
stream. So in this live stream I will
0:08
basically introduce to a new Canva clone
0:12
video editor application that I
0:13
developed inside browser in ReactJS
0:17
NodeJS express and we are basically
0:19
using ffmpg web assembly library. This
0:22
is actually the application that you can
0:24
see right here on your screen right
0:25
here.
0:27
It is actually using fluent ffmpg
0:30
package in the browser to actually build
0:32
this client side video editor something
0:35
like canva. So there is simply this
0:37
option of upload video. So you will
0:40
simply select your video file that you
0:42
want to edit. So as we select the input
0:45
video file all extensions are supported.
0:47
So as you basically select there will be
0:50
this select box. Here you can change the
0:52
aspect ratio of your video. So four
0:55
aspect ratios are given 16x 9 for video
0:59
uploading to YouTube 1x 1 4x3 9x6 is for
1:03
Instagram vertical video. If you want to
1:06
change your video to vertical you will
1:08
simply select this option. So now your
1:10
video will be changed to this vertical.
1:13
So you can basically see this is
1:15
actually the timeline it is showing
1:17
right here 3 minutes 29 seconds. So I
1:19
can simply play the video. Friends,
1:21
today in this tutorial you can write the
1:23
PDF l. So you can see uh it has actually
1:26
formed the timeline inside
1:29
as you draw drag the video. As you
1:31
select the video it will actually create
1:33
the timeline and uh it is showing it.
1:36
You can play the video you can go to any
1:38
location in the video and you can see
1:40
that build out a very simple PDF right
1:42
the video also contains sound as well.
1:44
You can go to any section in the video
1:46
and there is this actions tab right
1:48
here. You can toggle this actions tab
1:51
and we have different actions that we
1:52
can perform inside this video. We have
1:55
various effects. We can adjust the
1:58
brightness, contrast, saturation, blur
2:00
effect. All these things we can control.
2:03
We can even change the background of the
2:04
video as well to any color using this
2:07
color picker.
2:12
And uh
2:14
you can even basically cover the section
2:16
right here. If you want to cover or
2:18
contain you can have this option video
2:21
fit, contain or cover. And here also you
2:24
can change the aspect ratio 16x9, 1x 1,
2:26
4x3, 9x6. You can basically change this
2:29
aspect ratio from here also. If you're
2:32
developing for YouTube, you will select
2:34
16x9 or 9x6 for vertical video. So this
2:37
[snorts] is a great video editor where
2:39
you can change the aspect ratio of your
2:41
video. You can trim videos and uh also
2:44
apply some filters such as changing the
2:47
brightness all these stuff. So it is
2:50
built using ReactJS NodeJS express and
2:52
using fluent fmpg. This is actually the
2:56
if you see let me show you. So we are
2:59
actually uh running this on local host.
3:02
If you see
3:06
and we are also using socket.io this you
3:09
can see that
3:12
if I
3:14
open this project you will basically see
3:17
right here uh this is the actual project
3:20
here. Simply as if you need this project
3:24
guys the link is given in the
3:25
description. You can directly go to and
3:26
purchase the full source code. After
3:28
purchasing it, you will actually get a
3:30
zip file. You need to extract it and
3:32
then you will have a client folder where
3:34
we will have our ReactJS application and
3:36
this this is our server folder which is
3:39
containing the backend code for this uh
3:41
Canva clone video editor using Fluent
3:44
FPG. So this will be the directory
3:46
structure. First of all, what we need to
3:48
do, we need to go to this client folder
3:50
and simply install the modules npmi. But
3:53
this will install all the modules which
3:55
are necessary for our ReactJS
3:57
application. So in inside the client
4:00
folder you will go to package.json and
4:02
here you can see we are actually using
4:04
all these packages. It's a ReactJS front
4:08
end and uh you just need to install all
4:11
these packages and then that's all and
4:14
then we need to go to the server folder
4:16
CD server and also install all the
4:19
modules which are present. So if I show
4:22
you basically the package.json file for
4:24
the server. So here we are actually
4:27
using the ffmppg fluent ffmpg package.
4:30
If you see right here we are using the
4:32
fluent ffmpg package and we are using
4:35
the express backend to actually build
4:37
this uh and we are also using socket.io
4:41
for having the progress bar. I will show
4:43
you how it works. So after you do this
4:46
you just need to execute this command
4:48
which is npm run start. So what it will
4:51
do it will start both your uh back end
4:54
and the client side concurrently. So
4:57
your application will start on port
4:59
number three local host 3000. So it is
5:03
just starting it. So just wait for the
5:05
application to start. You will see it
5:07
will show this server is listening on
5:09
30001. First of all, it will start the
5:12
backend server NodeJS Express and
5:14
socket.io and after that it will
5:17
actually start your ReactJS client side
5:20
application in the browser. So it will
5:22
run on localhost 3000. So just wait the
5:25
ReactJS front end is also starting.
5:32
So basically it is running npm run
5:35
server and npm run client both commands
5:37
at one time concurrently. So now it is
5:40
actually starting your ReactJS front
5:43
end. So it's a full stack application
5:46
and you will see localhost 3000. It has
5:48
automatically start this application.
5:51
It's a fully fleshed Canva clone where
5:53
you can perform all the video editing
5:55
skills in this uh fully client side
5:57
application. You don't need any third
6:00
party video editing software. So simply
6:02
select your video, change your aspect
6:04
ratio. Let me select 16x9. And after
6:07
that you have different actions. You
6:09
have a fully fleshed timeline editor and
6:11
you if you want to uh trim the video uh
6:15
hello. So you can what you can do you
6:17
can uh
6:20
select whatever portion that you want.
6:22
Let's suppose I want to trim this
6:24
portion from this. So what I will do
6:27
click on the render option after you
6:28
selected the start starting end and the
6:31
ending type. So this portion you need to
6:34
trim out. So what you will see render
6:36
click the render option. So it will
6:38
basically render out your video using
6:40
this nice little progress bar. U we are
6:43
actually using socket.io to actually
6:45
build this progress bar that you are
6:47
seeing right here. So once it reaches
6:49
100% it is using fluent ffmpg to
6:51
actually render out the video using
6:53
ffmpg library and it is actually
6:56
trimming this video and now it will
6:58
actually create a new video and download
7:00
this video as an attachment. So once it
7:02
reaches 100%. So it's a fully fledged
7:06
you can see it's a editor and now you
7:08
will can download the video simply click
7:11
download and your video will get
7:12
downloaded. So whatever trimmed portion
7:14
that you so you can see the length of
7:16
the video in is 11 seconds. So whatever
7:19
portion that you trimmed it is
7:21
successfully trimmed and the new video
7:24
has been downloaded. So it's a video
7:26
trimmer
7:28
fully fledged editor with timeline. You
7:32
can basically select the portion of the
7:34
video that you want to
7:37
you can even basically
7:41
flip the video as well horizontally or
7:44
vertically. Flipping option is also
7:46
there. And you can basically change the
7:48
brightness of the video, decrease the
7:50
brightness, change the contrast level of
7:53
the video, saturation.
7:58
You can even blur the video as well by
8:00
using this filter or invert. All these
8:03
uh effects you can apply right here
8:05
guys. And uh
8:10
click on render.
8:13
[snorts] So as you apply these
8:16
filters so again it will render out the
8:19
video. But now with the filters that you
8:22
have applied both the filters that I
8:24
showed you which is blood filter. So the
8:26
resultant video will contain those
8:28
filters with those modified settings
8:30
that you applied. So once it reaches
8:32
100%, it is again using fluent FMPG.
8:36
So it's a very nice editor guys, fully
8:39
fleshed editor. You can see that the
8:42
brightness is uh changed. The contrast
8:45
level is also changed right here of the
8:46
video. You will see that the brightness
8:48
and the contrast level and the image is
8:51
and the video is also blurred. you can't
8:53
see properly whatever inside the video.
8:56
So in this way you can apply these
8:58
filters using this awesome little video
9:00
editor something like Canva with
9:03
timeline. I developed this using ReactJS
9:06
NodeJS Express. This will be the actual
9:09
application you will get guys after you
9:11
purchase it from Google Drive.
9:14
Go to the my website the link is given.
9:17
After you purchase you will get the zip
9:19
file from Google Drive. After
9:20
automatically you purchase the source
9:22
code you will redirect to Google drive
9:24
and you will be able to download the zip
9:25
file. This will be the directory
9:27
structure you just this is a serverside
9:30
code. So here all your video files are
9:32
stored in the uploads directory if you
9:34
see
9:36
and uh these are the services fmpp you
9:39
can see we are using the fluent fmpg
9:41
package right here. So first of all we
9:43
are generating the thumbnails for the
9:44
timeline if you see
9:47
and this is socket.io IO basically we
9:49
are running at localhost 3000 you can
9:51
even build build this application the
9:53
build command is also there if you want
9:56
to deploy that so npm run build you can
9:58
just run this command to actually deploy
10:01
this application to your real domain
10:03
name if you're developing it for
10:05
production so we are actually using
10:07
malter library to actually store all the
10:10
input files that we select inside our
10:13
server uploads folder so we have the
10:16
server uploads folder so here we are all
10:18
storing the input files that are
10:19
selected by the user. So it's a fully
10:22
fleshed editor guys. Pan shot you can if
10:24
you want to zoom it virtual pan shot
10:27
zoom pan as well
10:30
adjustments flip the video. I showed you
10:33
the background effect and there is also
10:35
this audio if you want to remove the
10:37
audio. If you want to you can toggle
10:39
this option. So now the audio will be
10:41
removed. You can even control the volume
10:44
as well. You can increase it or decrease
10:46
it by using this slider. So if you want
10:48
to decrease the volume in the video, you
10:51
can basically have this filter
10:55
or you if you want to mute the audio
10:58
completely, you can simply toggle this
11:00
option. So now if you see
11:05
the video will not contain the audio,
11:08
the audio in the video will completely
11:10
get removed.
11:13
So this is a nice uh progress bar that
11:15
you get showed guys to the user because
11:18
uh it's very helpful for the user so
11:20
that user can see clearly see how much
11:23
time is remaining and what is the
11:25
processing time left. So it's a good
11:27
practice to actually show this progress
11:29
part to the user. It's good for user
11:31
engagement and you can see that. So once
11:34
it reaches 100% you can download the
11:36
video and uh if you see no audio is
11:39
present. So audio is not present in the
11:41
video. Completely the audio is removed.
11:46
So it's a fullyfledged editor guys with
11:49
timeline editor something like Canva.
11:51
You can change the aspect ratio apply
11:53
all these 9x6 if you're developing for
11:57
Instagram.
12:00
You can basically cover the entire video
12:02
and uh click on render now. [snorts] So
12:06
this video will be now be vertical.
12:19
>> [snorts]
12:19
>> So if you're watching it for the very
12:21
first time guys, please hit that like
12:22
button, subscribe the channel as well.
12:37
So now the video is changed to vertical
12:39
video. So if you want to deploy that or
12:42
Instagram or Facebook, you can change to
12:44
vertical video.
12:48
Alignment you can basically put top,
12:49
bottom, left, right. You can select the
12:52
alignment and output format. If you want
12:54
to convert to different format, these
12:56
are the formats available. MP4, web,
12:58
MOV, AVI, MKV. So any format you can
13:02
select and basically change your input
13:04
file to
13:12
so you can change to any format in the
13:14
video. So if you need this source code
13:17
guys the link is given in the
13:18
description you will
13:22
actually get this is actual directory
13:25
structure.
13:28
So your you can see the video is
13:30
successfully converted from MKV MP4 to
13:33
MKV. You'll see that you you can play
13:35
the video.
13:40
We also have the undo functionality as
13:42
well. If you want to undo the work, you
13:45
can even have undo as well right here.
13:48
So this is actually the timeline. You
13:50
can control whatever portion that you
13:52
want to trim or cut. You can basically
13:54
apply the filter. Just select this using
13:57
the timeline that is provided to you. So
14:00
it becomes very much easy to apply
14:02
filters. It's a fully fleshed editor
14:04
guys. If you are interested, you can uh
14:08
purchase it the source code. Thank you
14:11
very much for watching this video and I
14:14
will be seeing you in the next live
14:16
stream.