Up next in 10
Build a Next.js Canva Clone Video Editor in Browser Using FFMPEG WASM & Fabric.js in TypeScript
1K views
Jun 7, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-next-js-canva-clone-video-editor-in-browser-using-ffmpeg-wasm-fabric-js-in-typescript/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a canva
0:04
clone video editor that I developed
0:07
inside next CH which directly runs in
0:09
the browser no server site code is
0:11
involved it's a static application which
0:13
we developed inside next years using
0:16
fmpg web smmd Library so as you can see
0:19
we're running it on locally and if you
0:21
go to the editor this will be a simple
0:23
timeline editor Advanced timeline editor
0:26
here you will see the live preview of
0:28
the video being generated this is
0:30
actually your timeline that you see we
0:32
have in the left hand side corner of the
0:34
screen we have different options we can
0:36
import videos audio image text you can
0:39
do animation as well
0:42
effect and now let's suppose I select a
0:47
video so let me just select a
0:55
very so you can see you can also import
0:57
multiple videos so it's it's very
1:05
easy so you can see we have we can uh
1:12
basically import multiple videos as I'm
1:15
doing right
1:18
here so there is this plus icon that you
1:21
will press to add the video to the
1:23
timeline so you can see you can edit
1:26
your
1:27
videos this is my one video which is is
1:30
30 second long so it actually you can uh
1:34
increase the size of the video as well
1:37
by going to the export option and by
1:40
default it's a 30 second but you can
1:42
match your video length which
1:44
is 61 second so now it changes to the
1:49
original length so here you can actually
1:51
change the export length the video
1:53
length whichever length that you want to
1:56
so then you can add basically the
1:58
capability you can add text on top of
2:00
the video so you can see
2:10
that we can even add images as
2:19
well we can add text images on top of
2:22
the video and if you play the video now
2:26
the image here accordingly can see that
2:29
you can add Watermark this is overlay
2:34
image so this is one way by which you
2:37
can actually edit your videos the second
2:39
way uh this is you can
2:42
actually create videos by scratch by
2:45
using uh text and images so let's
2:48
suppose I want to create a five second
2:52
long video for my social media so I have
2:54
a set of images I will select the set of
2:57
images
3:00
you can see that one by one I will
3:02
select these
3:06
images so I will add these images if you
3:09
see this is my first image and here
3:12
using the timeline here that's the
3:14
advantage of using the timel because you
3:16
can control how much length this image
3:19
appears so this image appear for this
3:23
amount of
3:24
time you can control it and then the
3:26
next image will come to the canvas
3:30
click the plus
3:34
icon so you can see
3:37
that it's very easy to control the
3:41
visibility of each
3:51
image and then we come the third image
4:10
so now you can play the
4:15
video you can add one more
4:22
image so you can see that guys it's a
4:24
advanced timeline editor and you can
4:27
just see it's similar to canva where you
4:30
can actually create videos from a series
4:32
of images you can see that now we can
4:35
actually play the
4:40
video so what we can
4:44
do can just increase the size of
4:51
it so you can see that so now we have
4:54
four images
4:56
and if you want to now export this video
4:59
so there is this export option so you
5:02
simply click the format here and then
5:05
simply click export video so now what it
5:07
will do it will play the video and it
5:09
will actually export this after 5
5:11
seconds so it is exporting the canvas to
5:13
actual video file if you see that now
5:16
the video is downloaded and you can see
5:19
that so you can play the
5:23
video so we have actually created a
5:26
video from a series of four images that
5:28
we had but we can even add text as well
5:32
guys if you want to you can
5:35
add it's quite a thing possible you can
5:39
say image
5:40
one and just you need to
5:58
control so so in this way you can do
6:00
that so I'm just showing you the things
6:04
that you can do with this editor you can
6:06
add a set of animations as well so if
6:08
you want to add a fade in animation you
6:10
can even add different animations to
6:12
each image you can see that this is the
6:14
fading
6:18
animation if you want to add the Fade
6:20
Out animation you can do that as
6:24
well you can see that so just select the
6:27
third
6:27
image if you want to add add this one
6:30
you can add this so you can see that how
6:33
easy it is just select
6:36
this now we have four different
6:38
animations going on this is first second
6:41
third and fourth so again you can export
6:45
this simply click export and then it
6:47
will run this for 5 seconds and Export
6:49
the canvas to an actual video file so so
6:52
if you're interested guys in this
6:54
project for the source code you can
6:56
directly purchase it by going to the
6:58
description link from Pro cod.com where
7:02
I have the source code uh you can
7:05
directly purchase it this is coded
7:07
inside next CH if you see that let me
7:09
show you the package of Json file we
7:11
using fmpg web assembly Library we are
7:14
also using anjs fabricjs as well which
7:18
are all open-source packages so if you
7:22
purchase it you will get the zip file
7:23
guys from Google Drive
7:26
automatically the link is given in the
7:28
description if you see all all the
7:29
components are divided into different
7:32
files here of typescript and once you
7:35
purchase it if you are a developer it's
7:37
well very very much easy for you to
7:39
understand and also extend the
7:41
capabilities of this editor so if you
7:44
are a schoolgoing student or applying
7:46
for a job then it's a quite a good
7:48
project guys which runs directly in the
7:50
browser no server site code is
7:52
involved so you will be able to
7:54
understand a lot how I built it if you
7:58
don't know about fmm PG it's a command
8:00
line library for building uh video
8:04
applications so this package allows us
8:07
to use it in the browser using CDM using
8:11
web
8:12
assembly so we are using this uh so if
8:16
you interested guys you can purchase
8:19
this video editor canva clone which
8:22
directly runs in the browser and for
8:24
this we have used next CH and the latest
8:27
version of react which is at at the time
8:30
of recording this video and if you
8:35
see so if you want to run it locally if
8:39
you see next CH we using it just open
8:42
the terminal if you have purchased it
8:45
just type the command
8:46
npmi to install the nodejs modules so
8:50
this will create this folder node
8:52
modules after that you just need to say
8:55
npm run Dev so this will start the
8:57
development server
8:59
at
9:03
your local host 3,000 so I've already
9:06
started
9:08
this for if you want to build this
9:10
application for production there is also
9:13
a build command so just uh run this
9:15
command to build out for production if
9:17
you want to deploy this application so
9:19
it's very easy guys uh if you are
9:21
interested the link is given in the
9:22
description you can directly purchase it
9:25
and uh if you have some kind of issues
9:28
you can comment on this video I will
9:30
greatly help you and also check out my
9:33
website free mediat tools.com which
9:35
contains thousands of tools regarding
9:37
audio video and image and I will be
9:39
seeing you in the next video
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Multimedia Software
#Online Goodies
#Online Video
#Photo & Video Sharing
#Programming
#Video Sharing