Up next in 10
Build a Canva Clone Video Editor UI in Next.js — Timeline, Animation, FFmpeg (Fabric + Anime.js)
Mar 4, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-clone-video-editor-ui-in-next-js-timeline-animation-ffmpeg-fabric-anime-js/
Show More Show Less View Video Transcript
0:01
Uh hello guys, in this video I'll show
0:03
you a Canva clone video editor project
0:06
that I developed directly in the
0:07
browser. This is actual demo. Let me
0:09
play the video. So it has all the
0:13
features. You can change the background
0:14
color, add text, images directly. We
0:17
have a timeline where you can see the
0:19
live preview as well. So it's similar to
0:22
a professional looking video editing
0:24
software but it directly runs in the
0:26
browser. So we are running this
0:27
application at localhost 3000. It's
0:30
developed inside NexJS. And let me show
0:33
you the source code. Right here I've
0:35
given the purchase link. You can
0:37
directly purchase the full source code
0:38
of this project. After you purchase it,
0:40
you will get it from Google Drive
0:42
automatically. So all the components are
0:44
divided into its own TypeScript files
0:47
right here. So if I show you
0:49
package.json file, quite a number of
0:51
third party libraries we using. animjs
0:54
fabric js for animation we using the
0:58
react next latest version right here so
1:01
I'm just running it locally by running
1:03
this command lpm rundev so this has
1:05
basically started a local development
1:07
server and now if I run through the
1:10
feature just refresh go to localhost
1:13
3000 it has its own timeline feature
1:15
right here now in the video section you
1:18
can add your own video by clicking
1:20
upload just select the video file and
1:22
click Click the plus icon and right here
1:25
in the timeline canvas you can add the
1:27
video and now we have all these
1:30
features. You can go to the fill section
1:33
to change the background color. Then we
1:37
can basically add some text. Go to text
1:39
section and just add some text. So here
1:43
you can place it accordingly wherever
1:45
you want to place it. If you want to add
1:48
a watermark just select it. Now go to
1:50
animation and you can add this animation
1:54
the slide in animation just select the
1:56
direction
1:58
duration 5 second and now if you play
2:01
this
2:02
>> Hello guys welcome to this video so in
2:04
this video I will show you a same thing
2:06
you can do for images go to image
2:08
section go to upload just select your
2:11
image file add this to the canvas and
2:20
Now again go to animation. Here you can
2:22
apply any sort of fade in animation.
2:24
Let's suppose for 5 second.
2:28
>> Hello guys, welcome.
2:29
>> So you can just see here I will show you
2:31
a camera.
2:33
>> You can add multiple animations. Now if
2:35
you want to export go to the export
2:37
section and now only I want to export
2:40
the first 5 seconds of the video. Click
2:42
on export.
2:44
>> Hello guys, welcome to this video. So in
2:46
this video I will show you a Canva look.
2:49
Automatically the video will be
2:50
downloaded with all the effects applied.
2:53
Uh now you can check out all the
2:54
features the fading animation title text
2:58
image background color is everything
3:01
exported. So this is the overall
3:03
project. If you are interested the link
3:05
is given in the description. It's coded
3:07
inside next.js JS and you can directly
3:10
purchase the source code and uh it's
3:14
really awesome project and you also have
3:16
the option to replace the audio file by
3:18
going to audio section. If you have your
3:21
own MP3 file you can add this to the
3:24
timeline and this will replace the
3:25
original audio or you can add a
3:28
background music to the video as well.
3:30
So it's a timeline based editor and you
3:34
can also add multiple video multiple
3:37
videos as well.
3:42
So now you can even place multiple
3:44
videos. So you can add multiple videos
3:48
to the canvas. So if you want to
3:51
>> Hello guys, welcome.
3:52
>> So you can just see here you can do add
3:56
multiple videos as well. So there is an
3:58
option you can add multiple images,
4:00
multiple text versions as well. So, so
4:03
the possibilities are endless. If you
4:05
are a good video editor, if you do want
4:08
to do video editing, this software will
4:10
be very amazing. So you can directly
4:12
purchase the full script. The link is
4:15
given in the description.