Up next in 10
Build a Next.js Canva Video Editing App: Create a Timeline-Based Editor Using FFMPEG & Fabric.js
Nov 28, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-video-editing-app-create-a-timeline-based-editor-using-ffmpeg-fabric-js/
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
In this live stream, I'll show you a
0:02
video editor that I made inside NextJS
0:05
which is a timeline based kind of a
0:07
video editor something like Canva. So
0:10
this is the actual source code of the
0:13
editor. It's developed using Next.js
0:16
which is a framework for JavaScript.
0:20
So you can see we are using the latest
0:21
version of Next and React and we are
0:24
also using fabric JS which is NMJS as
0:28
well. So all the source code is given.
0:31
You can directly purchase it. So once
0:33
you purchase it, you will get this
0:34
directory structure. Uh so it's very
0:37
simple to run this application. So you
0:39
simply run the command npm rundev. This
0:41
will start your project at localhost
0:44
3000. So let me show you the actual
0:47
project. So if you open the browser,
0:49
simply go to localhost 3000.
0:53
So now this project will run. So this is
0:56
similar to Canva timeline based video
0:58
editor. So we have this menu here. So
1:02
inside the video section you can
1:04
actually add your own video. Simply
1:05
click the upload button and simply
1:08
select a video file and here you can add
1:11
it to the canvas and resize your video
1:14
like this. Then we have this play
1:16
button. So as soon as you click the play
1:18
button the video will play.
1:20
Hello guys, welcome to this video. So in
1:22
this video I will show you a camera
1:24
remove background from image kind of
1:26
offline.
1:27
So now you can see the video is started.
1:30
You can resize the video however you
1:33
want to and editor that I developed.
1:36
Then we have the option to actually add
1:39
images text on top of the so here we can
1:43
add any sort of text. Let's suppose you
1:45
want to add any sort of text.
1:48
You can add this text right here. It's
1:50
very simple.
1:53
So here you can
2:00
this you can even change the background
2:02
color as well. So it's very simple.
2:11
So this is the actual video and here you
2:14
can even add your custom images as well.
2:16
So it's very simple.
2:24
So you can even add images as well on
2:27
top of it. So here you can control.
2:36
So here you can place accordingly using
2:39
this timeline here.
2:42
So here you can control it similar to
2:46
whatever timeline editor you use. So
2:52
to just control it however they it
2:55
appears.
3:00
So now welcome to this video. So in this
3:02
video I will show you a Canva clone
3:05
remove background from image kind of a
3:07
offline editor that I developed inside
3:09
HTML and JavaScript.
3:11
So
3:13
you can even add uh effects as well to
3:16
it. So simply click
3:23
whatever image the text here. You can
3:26
actually add effects as well. You also
3:29
have the option to add audio as well.
3:34
This is for background color.
3:37
And then we have this export button. If
3:39
you want to export the video or trim the
3:42
video and you all only want to export
3:45
the first 30 seconds. So here you
3:48
provide the amount of seconds.
3:52
As soon as you change it,
3:55
the timeline changes. So now let's
3:58
suppose I only want to export the first
4:00
15 seconds and click on export video. So
4:03
now what happen?
4:03
Hello guys, welcome to this video. So in
4:05
this video I will show you a Canva clone
4:08
remove background from image kind of a
4:10
offline editor that I developed inside
4:12
HTML and JavaScript. As as you can see
4:14
on your screen I have deployed this tool
4:16
on my website free media. So after that
4:20
the video will get downloaded. So you
4:22
will see now you can open the edited
4:24
video.
4:29
So it's exactly 15 seconds and those
4:31
images and text will appear however you
4:35
put it. So it's a complete Canva
4:37
timeline based kind of an editor. So
4:40
once you get the code you can add
4:41
additional features. You can modify your
4:43
own features as well. It's very simple.
4:46
It's divided into multiple components
4:48
right here. It's coded inside TypeScript
4:50
file here. Each component as you can see
4:53
right here it's uh developed in
4:55
Typescript a supererset of JavaScript.
4:57
So every component has this code right
5:00
here. We have used open-source libraries
5:02
which is fabricjs animjs right here. So
5:06
once you get the source code
5:09
you can purchase it. The link is given
5:11
in the description and it's very easy to
5:14
actually use this application.
5:24
So here you can if you want to change
5:26
the audio you can add your own audio as
5:28
well. So this will actually
5:31
change the audio of the original video
5:33
file as well. So here we have different
5:35
effects.
5:38
So if you want to apply any effect to an
5:43
image you can even do that as well. So
5:46
so this is the actual timeline right
5:49
here.
5:54
You can add multiple images. You can add
5:56
multiple kind of text as well. So it's
5:59
very simple.
6:06
So this is the editor guys. If you're
6:08
interested to purchasing it, you the
6:10
link is given in the description. You
6:12
can do this.