Up next in 10
Build a Next.js Canva Browser Video Editor Clone with Timeline UI Using FFmpeg + Fabric.js +Animejs
Mar 4, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-browser-video-editor-clone-with-timeline-ui-using-ffmpeg-fabric-js-animejs/
Show More Show Less View Video Transcript
0:00
Guys, in this video I'll show you a
0:02
NexJS Canva browser based uh video
0:05
editor that I made ma made inside the
0:08
browser. So it's coded inside next.js.
0:11
So this is the overall project. If you
0:13
want to purchase the source code, the
0:15
link is given in the description. So
0:17
it's basically coded inside the next.js
0:20
which is 13.4.9.
0:22
We are also using ReactJS version and
0:24
for building this we use fabric JS and
0:28
NMJS. Let me show you the demo of the
0:30
application. So once you run the command
0:32
npm rundev. So this will start the
0:35
development at localhost 3000.
0:38
And this is the actual video editor. If
0:41
you go to localhost 3000/editor.
0:45
So right here we have a timeline based
0:47
kind of an editor Canva. So right here
0:50
you have the option to add any sort of
0:52
video file that you want to edit. Simply
0:54
click the upload button and uh
1:02
simply select the video file that you
1:04
want to add and then click this plus
1:06
icon to add this to the timeline.
1:09
So
1:11
it's whenever you add a new video the
1:14
timeline will automatically get created
1:16
and
1:18
now you can play the video. Hello guys,
1:20
welcome to this video. So in this video
1:22
I will show you
1:24
So now the video will play.
1:33
So now you also have the option to add
1:35
images. You can change the audio
1:38
original audio by selecting audio and
1:41
uploading your own new audio file. And
1:44
then you can add uh the text as well.
1:59
So this is text successfully added in
2:02
the timeline. Here you can control the
2:04
duration of the text which will appear.
2:08
And now if you see
2:09
>> camera
2:17
clone remove background from image kind
2:19
of offline. So in this easy way you can
2:22
add multiple text as well. So
2:26
as you can see it is added similarly in
2:30
the timeline. So it's very simple. It's
2:32
a timeline based uh Canva kind of a
2:35
video editor directly in the browser.
2:38
All the processing happens directly in
2:39
the browser. So this is a complete next
2:41
year's project. If you're interested,
2:43
you can directly purchase the source
2:44
code. I have given the link in the
2:46
description. So all the components are
2:49
coded inside Typescript.
2:51
And if you know some thing about NextJS,
2:55
you can even modify the source code and
2:57
add additional features as well. So once
3:00
you purchase you will get automatically
3:02
all the source code from Google drive
3:05
and then you can simply run this project
3:07
and we also have the option to add
3:09
images as well.
3:18
So then we also have the option to
3:20
export the video. You go to the export
3:23
menu and just provide the length of the
3:25
video that you want to export.
3:28
So now if you only want to export the
3:31
first 5 seconds, you put the number and
3:34
click on export video. Hello guys,
3:37
welcome to this video. So in this video
3:38
I will show you a camera.
3:41
>> And now the video will play once again
3:44
for the final time to export. And now
3:47
you will see the video have has been
3:49
exported. The first 5 seconds the text
3:52
is also appearing.
3:54
And similarly you can also upload uh
3:57
images as well by selecting
4:00
the images. This will also get added.
4:09
So very simply you click the plus icon
4:11
to add the image.
4:17
So this is the overall script. If you
4:19
are interested in this, you can directly
4:21
purchase it
4:24
whatever video you want to edit.
4:29
You can even change the background color
4:30
as well by going to fill and adding a
4:34
background color.
4:43
Hello guys. And here you can add your
4:46
own title as well like this.
4:51
You can add a watermark right here.
4:53
Image everything you can do.
4:59
So this is you. You also have a set of
5:02
animations as well. So you basically
5:05
slide this animation.
5:09
You can select the duration here. Let's
5:11
suppose I want the animation to happen
5:13
for 6 seconds.
5:17
Hello guys, welcome to this. Now you
5:19
will see I will show you a camera load
5:22
remove background from image kind of.
5:24
>> So now the animation is happening for 6
5:26
seconds. You can do the same thing for
5:28
images as well. Just select the image in
5:30
the timeline and do this animation for
5:33
you. Just see here
5:37
in this video I will show you a camera
5:40
clone remove background from image kind
5:42
of offline editor that I developed. So
5:44
this is totally up to you how you want
5:46
to edit the video. I'm not good at
5:48
editing but it has all the features. You
5:51
can animate the text. You can add your
5:53
own images. Replace the audio of the
5:56
original video file by selecting
5:58
uploading your new audio. This will
6:00
replace the audio. So this is overall
6:02
very good project. If you are interested
6:04
in purchasing it, I have given the
6:07
purchase link so you can purchase the
6:10
full source code.
6:12
So, thank you very much.