Up next in 10
Build a Next.js Canva Browser Video Editor Clone with Timeline UI Using FFmpeg + Fabric.js +Animejs
Nov 28, 2025
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/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
Guys, in this video I'll show you a
0:02
NextJS Canva browser based uh video
0:05
editor that I made made inside the
0:08
browser. So it's coded inside NextJS. So
0:11
this is the overall project. If you want
0:13
to purchase the source code, the link is
0:15
given in the description. So it's
0:17
basically coded inside the nextJS which
0:20
is 13.4.9.
0:22
We also using ReactJS version and for
0:25
building this we use fabric JS and NMJS.
0:29
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 Canva kind of a video
2:35
editor directly in the browser. All the
2:38
processing happens directly in the
2:39
browser. So this is a complete nextjs
2:41
project. If you are interested, you can
2:43
directly purchase the source code. I've
2:45
given the link in the description. So
2:47
all the components are coded inside
2:49
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. And now the
3:41
video will play once again for the final
3:45
time to export. And now you will see the
3:47
video have has been exported the first 5
3:50
seconds. The text 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:08
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:23
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. We 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
Guys, welcome to this. Now you will see
5:19
I will show you
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:32
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.