Up next in 10
Build a React.js FFMPEG WASM Canva Clone Timeline Video Editor in Browser Using TypeScript
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-canva-clone-timeline-video-editor-in-browser-using-typescript/
Show More Show Less View Video Transcript
0:05
Uh hello guys, welcome to this uh video.
0:08
So in this video I will talk about a
0:10
FMMPG web assembly uh video editor such
0:14
as Canva that I developed inside browser
0:17
and it is built inside ReactJS using
0:20
TypeScript. So this is actual live demo
0:23
that you can see on your screen. So as
0:25
you are open this application for the
0:28
very first time, you can see it is
0:29
running it on localhost 5173. We just
0:32
need to run this command npm rundev.
0:35
This will actually start this
0:37
development server.
0:40
So it is saying could not find.
0:45
So this is the file here if you see.
0:56
So this is this is actual
1:00
project guys. You will see this is the
1:01
actual command which is npm rundev.
1:14
So it is saying that could not find you
1:16
need to provide inside your package
1:18
dojson file there is a name field you
1:20
need to provide it just provide a name
1:22
field right here just add a name field
1:28
just give it a name here to your
1:29
application
1:33
so now you can start this npm rundev
1:36
this will actually start your
1:37
application you will see localhost 5173
1:40
so this will actually if I refresh here
1:43
your video editor will basically start
1:45
here and uh you will basically see here
1:48
there is a upload button. You can
1:50
actually select which videos you want to
1:53
edit. I have already added one video in
1:56
the timeline. So I can delete this by
1:58
using this dust pin icon. I can select
2:00
this and you can see
2:03
go to the uploads option right here. We
2:06
can upload a new video as well.
2:09
Simply navigate to your directory
2:11
wherever your video files are present.
2:14
Simply navigate
2:17
add this video.
2:19
Simply select the video and move to
2:21
timeline. So your video will get added
2:23
in the timeline editor. Just select the
2:26
this tag right here and you can navigate
2:29
to any video. So you can play the you
2:31
can see that in HTML and CSS. If I turn
2:33
the volume we have used this tool. So it
2:36
basically gives you the so you can see
2:38
the video is playing with with sound
2:41
guys the video contains sound that's why
2:43
it is CSS code which is required for the
2:46
so it is having the timeline contained
2:48
inside it
2:56
you can see that so it basically
2:59
contains the overall video it is 4
3:02
minute 40cond long video but let's
3:05
suppose guys if you want to trim a
3:07
certain portion of this video. So what
3:09
you can do, you can navigate to whatever
3:11
portion that you want to cut this video
3:13
from. Let's suppose I want to cut from
3:17
this portion
3:20
from this. Uh so what I will do is that
3:22
there is an option right here which is
3:24
uh this
3:27
scissor option. Simply select this
3:29
second option here.
3:32
Scissor. That's all. So just do it split
3:35
this video. So as you split this you
3:38
will basically see you have successfully
3:41
splitted the video and this is basically
3:45
divided into three sections. This is the
3:47
first section.
3:49
You can see this is actually the first
3:50
section. This is the second section and
3:54
this is the third section. So now we can
3:56
select the dustbin icon and basically
3:58
delete this section and delete this
4:00
section. So now your video will only
4:02
contain 28 second. You will see we have
4:06
automatically deleted that video that
4:08
portion that we don't want. So our
4:10
output video will only contain 28
4:12
seconds. So now if I want to export this
4:15
video, we will go to the export video
4:17
export options. So it is saying that
4:19
exported video will be in 21x9
4:23
1280 by 536. If you want to change them,
4:26
please go to the video settings section.
4:29
You need to go to the video settings
4:30
section right here. And uh you can
4:33
basically resize the video 16x9. Change
4:37
the aspect ratio 21x 9, 1x 1, 4x3. These
4:42
are the different aspect ratios which
4:44
are given guys. You can which you can
4:46
basically do that. Let's suppose we are
4:50
doing it one by one.
4:53
And resolution you can basically select
4:55
1080p, 480, 360. Let me select 720
5:00
resolution. And then
5:04
after that we can basically
5:08
export. Simply click the export option.
5:10
So now it is using ffmppg web assembly
5:13
to actually show the progress bar. So it
5:16
is processing your exporting the video
5:19
using ffmpg web assembly library. And
5:22
once it reaches 100% your video will get
5:25
downloaded. So guys the link is given in
5:27
the description. You can directly
5:29
purchase the full source code of this
5:31
project which is coded right inside
5:33
react chase which is a ffmppg Canva
5:36
clone video timeline editor. And now you
5:39
can simply download your video. So you
5:41
can see your video is successfully
5:43
downloaded. So it contains 25 seconds.
5:46
Hello guys. Today in this video
5:47
JavaScript we box shadow guys. So video
5:50
is successfully resized to the as aspect
5:52
ratio that we selected and the quality
5:55
of the video has been reduced from 1080p
5:57
to 720p and it only contains 25 seconds.
6:01
So we have successfully trimmed the
6:03
video as well. We basically cut the
6:06
portion that we don't want it using the
6:08
timeline editor that we had. So this is
6:11
actually shadow fully fledged clientside
6:14
timeline editor such as Canva which is
6:18
developed inside reacts. You can see it
6:20
has a timeline editor. We can trim the
6:23
portion by using this uh scissor option.
6:26
Basically trim the portion. It will
6:28
divide the video into two sections and
6:31
we can even apply some effects. So there
6:34
is this effects option as well. Need to
6:37
select the video here.
6:40
So we can basically select the opacity,
6:44
we can decrease the opacity.
6:47
All these things we can saturation,
6:49
brightness of the video, we can control,
6:55
we can even blur the video as well
6:58
or we can reset. So these are different
7:00
video effects that we can apply right
7:02
here. Opacity, who shift, all that
7:05
stuff.
7:08
Now you if you want to only export this
7:10
portion as well only.
7:18
So click on export.
7:26
So again it will show you that uh
7:29
progress bar. So this is a really good
7:31
option guys and uh you can see that uh
7:35
we can basically delete any portion
7:37
right here. by using this dustpin
7:39
dustpin icon. So if you don't want this
7:42
portion simply delete this portion. So
7:44
that portion will be deleted and now the
7:46
video length remains 23 second. So in
7:49
this way you can do this guys very
7:51
easily. You can change the aspect ratio
7:54
16x9 for YouTube 21 by 9 which is
8:01
so it only now contains 8 second. So
8:09
it's a nice application. You can deploy
8:11
that. The link is given guys after you
8:13
get a zip file after you make the
8:15
payment and uh you will be able to
8:17
deploy this application. It's a complete
8:19
editor in the browser which you can see
8:22
how
8:23
nicely the video has been edited. uh it
8:27
has been aspect ratio has been increased
8:30
to 21x9 and uh the quality has also been
8:33
increased.
8:35
So guys after you purchase it you will
8:37
get this actual uh zip file and you will
8:39
extract the zip file to actually uh this
8:42
is the different components of react
8:44
chairs of this ffmpg timeline canva
8:48
clone video editor we have the button
8:50
component all these components are coded
8:53
in typescript it's a javascript
8:56
supererscript
8:58
icon all these icon button layout
9:00
overload sidebar it's a canvas editor
9:03
which plays in the brower browser you
9:05
can player canvas component also there
9:07
molecules you can see that so
9:16
so nice little editor guys if you are
9:18
interested the link is given in the
9:20
description you can directly purchase it
9:22
and uh you can uh change the aspect
9:24
ratio of the video change the resolution
9:26
of the video which is the most important
9:28
thing in uploading videos you can change
9:31
the resolution aspect ratio then we can
9:34
apply apply different effects to the
9:35
video. Simply select video,
9:44
move the video to timeline.
9:50
You can basically
9:55
apply some video effects, change the
9:57
opacity
9:59
like this or blur the video
10:02
if you want to. Now export this video
10:04
with these uh customized effects that
10:07
you have applied. So
10:10
your video will get exported using this
10:12
nice little progress bar.
10:25
Just need to play this video.
10:28
There's a timeline which basically are
10:31
there if built-in timeline which makes
10:34
it easy for you to actually
10:37
uh export the video or do the video
10:40
editing part.
11:00
You can even merge multiple videos right
11:02
here. If you have multiple videos, if
11:04
you want to merge it, you can even do
11:07
that as well.
11:11
You can reset. So, if you have a
11:13
multiple videos that you want to merge,
11:15
you can even do that. You can split by
11:17
using this uh scissor icon.
11:21
We can delete any portion that you don't
11:23
want very easily. You will see that
11:30
So total length of the video is 26
11:32
second. So if I now need to export this
11:35
video. So your video will basically get
11:38
merged using this uh
11:44
5173. You can see
11:47
this is actually the project guys. If
11:49
you are interested the link is given in
11:51
the description.
11:57
It is actually using frmpg web assembly
12:11
can delete can upload multiple videos.
12:15
So the videos will get added in the
12:16
timeline. You can see that. So we can
12:21
delete the videos which we don't need.
12:27
So exporting the video which makes it
12:29
very much easy.
12:47
So it is entirely coded inside uh
12:52
typescript.
12:54
So after you make the payment guys what
12:56
you will get? You will actually get this
12:58
zip file. Let me guide you how to
13:00
basically use this. So first of all as
13:03
you will get this zip file guys. Simply
13:06
you need to open or extract it. After
13:08
you make the payment you will get this
13:10
zip file.
13:12
just need to extract it
13:15
using uh any software which can extract
13:18
zip file. So it will actually contain
13:21
all the files which are necessary for
13:23
this project which will contain these
13:25
node modules folder. So it will actually
13:28
create a brand new folder
13:30
right inside your project directory
13:32
which will actually contain all the
13:34
files. You will see that. So it will
13:37
take some time for the extra extractions
13:39
to be completed. All the files will be
13:41
there.
13:50
So you just need to extract all the
13:52
files
13:55
and once it is completed you can
13:57
basically
14:08
start this project. So first of all you
14:11
need uh yeah you can just run this
14:14
command npm rundev. This will basically
14:16
start your development server.
14:24
You can just type localhost 5173.
14:27
This will actually start your video. You
14:29
can see nothing video will be there. You
14:32
just need to select the video and uh
14:35
move it to the timeline
14:38
like this.
14:40
You can basically export the video. So
14:43
exporting will take place once it
14:45
reaches 100%, it is using fmpg web
14:48
assembly library and once it reaches
14:50
100% your video will get downloaded and
14:53
you will be able to download it. So very
14:57
simple process guys. It is coded in
15:00
ReactJS and TypeScript. You can see very
15:03
easy to use UI and uh which makes it
15:06
easy for the user to
15:12
so you can see that. So uh hello guys
15:14
today in this thank you very much guys
15:17
for watching this video. If you're
15:18
watching it for the very first time
15:20
please hit that like button subscribe
15:22
the channel and I will be seeing you
15:25
guys. The link is given. You can
15:26
directly purchase this application. And
15:29
thank you very much for watching this
15:31
live stream.