Up next in 10
Build a Next.js Canva Timeline Video Editor — FFmpeg + Fabric.js + Anime.js in the Browser!
Mar 4, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-timeline-video-editor-ffmpeg-fabric-js-anime-js-in-the-browser/
Show More Show Less View Video Transcript
0:00
the Canva clone timeline video editor
0:02
that I made inside NexJS which directly
0:05
executes it in the browser. All the
0:07
processing happens directly in the
0:08
browser. This is the actual demo. As you
0:11
can see, you can add multiple videos.
0:12
It's a timeline page editor.
0:14
>> Hello guys, welcome to this.
0:15
>> You can add animations of image, text,
0:18
everything. Then you can export your
0:19
video. This is the overall project coded
0:22
inside NexJS. So quite a number of third
0:24
party libraries we are using. You can
0:26
directly purchase the source code. The
0:28
link is given in the description
0:31
and after you purchase it, you will get
0:33
the source code from Google Drive. So
0:35
all the components of the project are
0:37
coded inside its own TypeScript files
0:39
right here. As you can see right here,
0:41
if I show you package.json file, we are
0:43
using third party libraries, NMJS,
0:47
canvas, fabric js. We are also using the
0:49
latest version of next react. And now to
0:53
run this project, we go to the command
0:55
line. Simply run npm rundev. So this
0:57
will start the local development server
0:59
at http localhost 3000. And now if I go
1:03
through all the features once you go to
1:05
the editor you go to video section and
1:08
upload the video file that you want to
1:10
edit. Simply add this to the canvas
1:12
section right here and uh just place it
1:17
and then it will be added in the
1:19
timeline as well. And now you can play
1:21
the video. Then if you want to add the
1:25
background color, you go to the fill
1:26
section, add your own background color.
1:32
And then after adding it, you go to the
1:34
text section. If you want to add a
1:37
title,
1:40
just place it accordingly. You can
1:42
resize it the text. Now select after
1:46
selecting the text right here. Go to
1:48
animation and if you want to add any
1:51
sort of animations slide in animation
1:54
control the direction and the duration
1:58
for 6 seconds I want this animation to
2:00
happen. So when I once I play this
2:02
>> helloelcome the animation will start the
2:06
sliding animation. Same thing you can do
2:08
for images as well. If you're adding
2:10
images,
2:14
basically select your image file, select
2:17
it, add this to the canvas.
2:22
So this time if you want to apply a
2:24
different kind of animation, let's
2:25
suppose the fade in animation. You again
2:28
control the duration. And now if you
2:31
see, hello guys, welcome to this video.
2:33
So in this video, I will show you a
2:35
Canva clone. So now if you're happy
2:38
after that go to the export button click
2:42
how much export let's suppose I only
2:45
want to export the first 5 seconds again
2:48
click export video and now the
2:50
processing will happen the video will
2:52
play for 5 seconds and automatically the
2:55
video will get downloaded. So now you
2:58
will see the end result having all the
3:00
features such as the animation of text
3:02
image built in inside the output video.
3:06
So this is a very awesome software guys
3:08
without using a professional looking
3:09
video editor. You have got this free
3:12
open-source uh video editor built in
3:15
nextJS having all the features. So you
3:18
can purchase this script if you have
3:20
knowledge you can add additional
3:22
features on top of it as well. So it has
3:25
all the source code built in. So
3:28
directly purchase it. The link is given
3:30
in the description.