Up next in 10
Next.js Canva Timeline Video Editor — Build a Full FFMPEG Browser Editor with Fabric.js & Anime.js
Mar 4, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/next-js-canva-timeline-video-editor-build-a-full-ffmpeg-browser-editor-with-fabric-js-anime-js/
Show More Show Less View Video Transcript
0:00
Hello guys, in this video I'll show you
0:01
a Canva clone kind of a video editor
0:04
that I made inside NextJS directly in
0:07
the browser. So the demo something looks
0:09
like this. We have a timeline. We can
0:12
play the video and we can even have text
0:16
appearing, images added, all these
0:18
things. So it had its own timeline as
0:21
well. You can add your own animations as
0:23
well.
0:26
So we can even add images, text,
0:29
everything. So this is the actual source
0:31
code of the project. It's coded inside
0:33
Nex.js. Quite a number of third party
0:36
libraries. We have also use NMJS,
0:38
fabricjs, canvas and you can see it's
0:41
using the latest version of next and
0:43
react. If you are interested, the link
0:45
is given in the description of the
0:47
video. You can directly purchase the
0:49
source code. All the components are
0:51
divided into its own files which are
0:53
coded inside TypeScript.
0:56
So now to run this project it's very
0:59
simple. You simply go to the command
1:00
line npm rundev. This will start the
1:03
local development server at HTTP
1:05
localhost 3000. And uh let me open this
1:08
and run through the demo of the
1:11
application. So right here you have the
1:13
option to add your own video. Simply
1:15
select and add the video and click the
1:19
plus icon.
1:21
And here you can add this to the
1:23
timeline to the canvas and then you can
1:25
play the video. And now if you want to
1:28
change the background you can simply go
1:30
to the fill section
1:33
and just apply just select a color from
1:36
the color picker. After that, now if you
1:40
want to add some text and images, you
1:42
can add the text. Just select this,
1:45
resize it.
1:49
Just place it. And now if you want to
1:51
add some animations to it, simply select
1:53
the text and go to animations. And we
1:55
have a quite a number of animations.
1:58
Let's suppose you want to slide in
2:01
animation. Just select the direction
2:04
left. Control the duration.
2:07
And now play the
2:10
>> it's very simple.
2:12
>> So in this video I will show you a now
2:14
if you want to do the same thing for
2:16
images as well simply select whatever
2:19
image file that you want to add this
2:21
again click on plus
2:24
and now you can place the image this is
2:27
added in the timeline as well. Same
2:29
thing select the image and slide this
2:32
time from right position and control
2:35
this six. Now play.
2:38
>> Hello guys, welcome to this video. So in
2:40
this video I will show you a camera
2:42
clone. Remove background from your So
2:44
it's very simple to do guys. Now if you
2:46
want to export the video, you click the
2:48
export button. Just select the time you
2:51
want to export. So now let's suppose I
2:54
only want to export the first 10 seconds
2:56
of the video and then click on export
2:59
video. So now the video will play for
3:02
the very last time to export this
3:06
background image kind of offline editor
3:08
that I developed inside HTML. So now
3:11
everything will be exported and now if I
3:13
show you uh
3:17
everything will be exported right here.
3:19
So now you can see that the text, the
3:21
images, the animations are all there,
3:24
the background color as well. So without
3:26
having a professional looking video
3:28
editor, you can use this application
3:30
that I developed next.js. Just purchase
3:32
the script and it has all the features.
3:35
It has its own timeline as well similar
3:38
to Canva and you can see the result with
3:42
uh real time however you make changes.
3:44
You can even have the option to replace
3:46
the audio as well. Go to the audio
3:49
section and add your own audio which
3:51
will replace the original audio. If you
3:53
have an MP3 file, you can also replace
3:55
it, add this to the timeline as well.
3:58
[snorts]
3:59
So this is the overall complete video
4:01
editing project guys where you can do
4:04
all sort of things related to video
4:06
directly in the browser and it doesn't
4:09
have any sort of dependencies. It
4:10
directly runs in the browser without
4:12
having a back end. So I've already
4:15
showed you it's using Tailwind CSS for
4:17
the design and TypeScript. So you can
4:21
just see here all the files are coded
4:23
right here. If you have some knowledge
4:25
in nextJS you can add or modify features
4:28
as well. So definitely purchase the
4:31
script. The link is given in the
4:33
description.
4:39
[snorts]