Up next in 10
Next.js Canva Timeline Video Editor — Build a Full FFMPEG Browser Editor with Fabric.js & Anime.js
Nov 28, 2025
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/
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
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
uh now play the
2:10
it's very simple in this video I will
2:12
show you a
2:14
now 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 thing
2:30
select the image and slide this time
2:32
from right position and control this six
2:36
now click Okay. Hello guys. Welcome to
2:39
this video. So in this video I will show
2:41
you a cannot load remove background from
2:44
your
2:44
So it's very simple to do guys. Now if
2:46
you want to export the video you click
2:48
the export button. Just select the time
2:50
you want to export. So now let's suppose
2:53
I only want to export the first 10
2:56
seconds of the video and then click on
2:58
export video. So now the video will play
3:01
for the very last time. to export this
3:06
background from image kind of offline
3:08
editor that I developed inside HTML. So
3:11
now everything will be exported and now
3:13
if I 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 the
3:24
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 year. Just
3:32
purchase the script and it has all the
3:35
features. It has its own timeline as
3:37
well similar to Canva and you can see
3:40
the result with the real time however
3:43
you make changes. You can even have the
3:45
option to replace the audio as well. Go
3:48
to the audio section and add your own
3:50
audio which will replace the original
3:52
audio. If you have an MP3 file, you can
3:54
also replace it, add this to the
3:56
timeline as well. So this is the overall
4:00
complete video editing project guys
4:02
where you can do all sort of things
4:05
related to video directly in the browser
4:08
and it doesn't have any sort of
4:09
dependencies. It directly runs in the
4:11
browser without having a back end. So
4:14
I've already showed you it's using
4:16
Tailwind CSS for the design and
4:18
TypeScript. So you can just see here all
4:22
the files are coded right here. If you
4:24
have some knowledge in nextJS, you can
4:27
add or modify features as well. So
4:29
definitely purchase the script. The link
4:32
is given in the description.
4:43
[Music]