Up next in 10
Build a Next.js Canva Clone Video Editor SaaS Web App Using FFMPEG WebAssembly for Passive Income
Dec 27, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-clone-video-editor-saas-web-app-using-ffmpeg-webassembly-for-passive-income/
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
Uh hello guys, welcome to this uh live
0:03
stream. So in this live stream, I will
0:04
show you. I built out a Canva clone uh
0:08
video editor directly in the browser
0:10
using Nex.js framework. Uh this is
0:13
actually the demo of the application. We
0:15
are running this application locally.
0:17
It's a single page uh video editor
0:20
with the help of which you can directly
0:22
edit your videos directly in the
0:23
browser. So first of all, you need to
0:25
add a project. You just give it a name.
0:27
After that it will create a timeline for
0:30
you for your editing your pro video. So
0:34
it's a complete video editor project. So
0:36
if you're interested in purchasing the
0:38
source code the link is given in the
0:40
description. Each component as you can
0:42
see it's divided into its appropriate
0:44
TypeScript files. So every thing is
0:46
customizable. You can add more features
0:49
on top of this project. So we using
0:51
ffmpg web assembly library right here.
0:54
You can see we are also using uh the
0:56
next framework the latest version and
0:59
react for building this. So we are
1:02
running this project locally. So it's
1:04
also very easy for you to deploy this.
1:06
So the interface is quite simple. You
1:08
basically select your video file that
1:11
you want to edit and that video will be
1:14
successfully. You just drag and drop to
1:16
the timeline section. And now if you
1:19
want to cut this video. So now the video
1:22
length is 30 second. And now let's
1:24
suppose I only want to
1:27
uh only want the first 6 seconds. So
1:30
right here we can cut this video by
1:32
clicking the split button. So now it
1:35
will split the video into two parts. So
1:37
this is the first part. This is the
1:39
second part. And now if you don't want
1:41
this part, you can click the delete
1:43
button. So now that part is successfully
1:46
deleted. Now the video length is only 6
1:49
seconds. So in this easy way using
1:52
ffmppg you can delete delete the
1:55
unnecessary part of the video and also
1:58
we have the option to add text images as
2:01
well. So you click the text button and
2:03
right here you can add your watermark.
2:06
Let's suppose I write coding section and
2:08
click on add text and right here the
2:11
text will be added. So here you can
2:13
actually
2:15
control the duration by using the mouse.
2:18
So now you can just see here the text is
2:21
automatically added. And now for
2:24
controlling the position of this you can
2:26
use these sliders right here. So this is
2:29
for the video.
2:33
So you can also adjust the video X
2:35
position, Y position. You can also
2:37
adjust the volume of the video as well.
2:39
If you don't want the volume, you can
2:41
use this slider. And now just select the
2:43
text position. And now here you can
2:45
control the color of the text.
2:50
So everything is customizable. You can
2:52
just see here you can control opacity
2:55
and now you can control the position
2:57
here of the text.
3:01
This is a Y position tech everything
3:05
and phone size everything you can
3:07
control. Similarly go to library section
3:10
and now if you want to also add image
3:12
you select your image and now you will
3:15
see you can
3:18
just place it. This is a nice little
3:20
Canva clone. So similarly have Canva has
3:24
a video editor. So I just built it from
3:26
scratch in nextJS.
3:30
So you can just see this will be the
3:32
output result. So now if you want to
3:34
adjust the size of the image, you can
3:37
again use these sliders.
3:43
So you can just see how easy it is to
3:47
place the image at the location that you
3:51
want using these sliders.
3:54
So now if you are happy with this
3:58
this will now we have the export button
4:01
to export the video. So here you can
4:04
control the resolution everything
4:06
processing speed everything quality of
4:08
the video. Just click the render button
4:10
and now the processing will start. It
4:13
will show you this nice little progress
4:14
bar. So once it reaches 100% your
4:17
processing will be done and you will see
4:19
the output video. So if you're
4:21
interested in this script guys uh the
4:24
link is given you can directly purchase
4:26
it. After purchasing it you will get the
4:29
source code from Google drive. So it's a
4:32
single page application Canva clone
4:34
video editor which directly runs in the
4:37
browser. It doesn't have a back end. So
4:39
it's a simple single page application.
4:45
So it's also really fast here. It will
4:48
save you a lot of time as well because
4:50
this is a complete project. You can also
4:52
add more features on top of this project
4:57
and we are actually using ffmpg web
4:59
assembly library for this project. The
5:04
processing is automatically done by fmpg
5:06
in the background.
5:10
So no need to use Canva. You can use
5:12
your build your own
5:15
Canva clone video editor in nextJS.
5:24
So now this will be the output video.
5:26
You can just see right here the text,
5:28
images, everything is added.
5:31
And now you can click the download
5:32
button to download this video.
5:36
So guys the link is given. If you face
5:38
any sort of problem, I will help you.
5:42
But you will not face any problem. The
5:44
source code will be given.
5:47
Uh once you purchase it automatically,
5:49
it will be downloaded from Google Drive.
5:52
So each and every file is customizable.
5:55
You can easily customize the source code
5:57
once you get the source code and run
5:59
this and deploy this application. So
6:01
it's a fully fleshed project.
#Online Media