Up next in 10
Build a Next.js Canva Clone Video Editor in Browser Using FFMPEG WASM & MP4Box.js, Fabric.js in TS
Mar 5, 2026
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-mp4box-js-fabric-js-in-ts/
Show More Show Less View Video Transcript
0:00
Uh hello guys in this video I'll show
0:02
you I built out a canvan video editor in
0:05
nextjs using ffmpg web assembly library
0:08
mp4 box and fabric js. So we are running
0:11
this project as you can see on localhost
0:14
3000
0:15
and this is actually the full interface
0:17
of the application. So it has all the
0:19
features of canva as you can see
0:24
uh this is actually the full directory
0:26
structure of the project. Uh if you see
0:28
we are using the next latest version and
0:31
also we are using react. We are using
0:34
MP4 box which is a library for related
0:39
to videos.
0:41
MP4 mixer we are also using fabric js as
0:44
well ffmpg web assembly library as well.
0:46
This is the full directory structure.
0:48
Each and every component is divided into
0:50
its appropriate typescript file. So
0:52
everything is customizable. If you need
0:54
the source code, you can directly
0:56
purchase it. After purchasing it, you
0:58
will get the source code from Google
1:00
Drive automatically.
1:02
And I basically created this project
1:04
from scratch. And we are running this
1:06
locally as you can see by running npm
1:09
rundev. And
1:11
once you start the application, the
1:14
interface looks something like this. So
1:15
first of all, you can actually
1:18
uh create a new project as well. It has
1:21
all the templates for different social
1:23
media networks, Instagram, YouTube.
1:27
So
1:29
as you can see that so you can select a
1:32
new template here and then you can add a
1:35
text as well. Add existing video as
1:38
well. So right here you have the option
1:40
to
1:42
select your own video.
1:46
So let me select a video here.
1:51
So once you select the video just add
1:53
this to the timeline section and now the
1:56
video will play with timeline. As you
1:58
can see it's a timeline based video
1:59
editor. The video will stay right here.
2:02
It has all the features of Canva. And uh
2:05
now if you want to add some text on top
2:08
of this video you go to the text option
2:11
and uh right here just select any text
2:15
and on the right hand side you have all
2:17
the options. You can animate the text,
2:19
change the color, size, everything.
2:24
Can see that. So how
2:27
just increase the size and right here
2:29
you can edit the text
2:36
and put a watermark, company name,
2:38
everything. Just
2:43
can place it using your mouse wherever
2:45
you want.
2:47
can even change the color as well. So
2:52
using the color picker and uh
2:58
then just if you want to see the preview
3:01
I have the preview button as well. So
3:04
you can see the preview will see right
3:06
here
3:08
how easy it is.
3:10
And right here from the timeline you can
3:12
align everything right here. You can
3:15
select how you want to appear it. Now
3:18
again click preview
3:36
and uh then we have this button of
3:38
export.
3:41
So right here you can select you can
3:44
also use a GPU acceleration as well
3:47
because we using ffmppg you can toggle
3:50
this if your computer supports a
3:53
graphics card you can do this and which
3:56
will actually increase the speed.
3:59
Click on export video and then the
4:02
progress bar will show. So you can
4:04
easily deploy this once you purchase the
4:06
source code. It's also very easy. It's a
4:09
complete NexJS project, full stack video
4:12
editor project with all the features of
4:14
Canva. It also as you can see it clearly
4:18
shows the
4:20
processing time with progress bar. So
4:24
once it reaches 100% your video will get
4:27
automatically downloaded. So
4:30
if you're interested in this project uh
4:34
Canva clone video editor you can
4:36
directly purchase that the source code
4:38
the link is given in the description.
5:19
So you can just see here it's a very
5:21
userfriendly interface for the user.
5:24
It's very easy to use and you can even
5:27
add more features if you are a
5:29
programmer once you get the source code.
5:32
You can see how I coded this from
5:34
scratch.
5:40
So once it completes automatically the
5:43
video will get downloaded for you and
5:46
then you can play the video.
5:54
You can see the text is successfully
5:56
added in the video. So you can even
6:00
adjust the height width. So as you can
6:03
see you can even adjust the width and
6:06
the height of the video as well by using
6:08
these sliders which are given to you on
6:11
the left hand side. You can even control
6:13
the opacity of the video as well.
6:17
X position, Y position, you can rotate
6:19
the video. You can adjust the volume of
6:21
the video. You can even control the
6:23
speed of the video. You can remove the
6:26
audio as well by toggling this option.
6:29
So it's actually a full stack Canva
6:31
clone video editor with all the features
6:33
that you need and uh this is
6:38
you also have the option uh if you
6:40
select as you can see you can even crop
6:48
you can see
6:50
you can even crop the video as well. So
6:53
this is on the right hand side the crop
6:56
alignment. You can even apply different
6:58
effects to the text.
7:01
As you see Canva has this option to you.
7:06
Uh you can even add your own audio as
7:09
well. So you can split the video as
7:12
well. You also have this option split.
7:16
As you click and at any point you will
7:18
see it will split.
7:21
Same goes with video as well. If you
7:23
don't need this, you can click that
7:24
delete option that
7:29
it's also very easy to split the video.
7:32
Once again, click the export button to
7:34
actually export
7:36
here. You can actually actually use
7:39
stock audio and or include your own
7:41
audio file. So, right here you can
7:44
replace the audio as well.
7:48
You can even save a project, open an
7:50
existing project as well. So it has all
7:53
the templates available for you for
7:55
social media.
7:57
So it's entirely coded inside NexJS
7:59
guys. And uh if you are interested, the
8:02
link is given. And coming back to the
8:04
libraries, we are actually using quite a
8:06
number of libraries. First of all, we
8:08
are using this MP4.
8:11
So it's encoder library in JavaScript
8:14
for actually encoding the video files
8:17
directly in the browser. We are using
8:18
this. Apart from that we are also using
8:22
ffmpg web assembly library which is
8:25
actually a way by which you can directly
8:28
use ffmpg directly in the browser. So
8:31
this is their GitHub repo and uh we are
8:34
also using another open-source library
8:38
which is fabricjs which is a animation
8:40
library in JavaScript for actually
8:43
putting all these animations that you
8:44
see inside this next project.
8:50
So it's a complete Canva clone video
8:52
editor project guys. Uh if you still
8:54
face any problem in running and
8:55
deploying this application you can
8:57
contact me after the payment. I will
8:59
definitely help you. So if you're
9:01
looking forward for a full stack Canva
9:04
clone video editor project. So this is a
9:07
perfect project for you. You can
9:09
definitely purchase it. As you can see
9:11
each and every component is coded inside
9:14
Typescript. So it's a fully functional
9:16
project and you can run this locally or
9:20
even deploy this as well by running a
9:22
simple command npm run build. So this
9:26
will build out the entire project and
9:28
you can purchase a custom domain and
9:30
easily deploy the project.
9:33
So if you're interested, definitely
9:35
purchase