Up next in 10
I Built a $10K/Month Video Editor SaaS with Next.js & FFMPEG WASM (No Backend Costs!)
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-a-10k-month-video-editor-saas-with-next-js-ffmpeg-wasm-no-backend-costs/
Show More Show Less View Video Transcript
0:00
basically show you how I built a 10K
0:03
dollar per month SAS kind of an
0:06
application directly in browser using
0:08
NexJS.
0:09
It's actually a video editor
0:13
directly executes this video editor. You
0:15
can edit your videos directly in the
0:17
browser and we have used FMPPG web
0:19
assembly library. It's a single page
0:21
application. It can be treated as a SAS
0:24
software as a service web application
0:26
which directly runs in the browser. This
0:28
is actually the full directory structure
0:29
of the application. Each component is
0:32
divided into its appropriate TypeScript
0:34
file. If you need the source code of
0:36
this application, I have given the link
0:38
in the description. You can directly
0:40
purchase it. I have just compiled this
0:42
video editor from scratch. I built it
0:45
from scratch. So, we are running this
0:46
NexJS application on local host. So, the
0:49
interface looks something like this. You
0:51
basically click on get started and you
0:54
basically add a project name. Click on
0:57
create and then as soon as the project
1:00
is created you will be redirected to a
1:02
timeline video editor where you can edit
1:05
your videos. So we have all the options
1:08
right here. You will see that.
1:12
So this can be treated as a software as
1:15
a service. You can easily deploy this
1:18
and once you add you can add your video.
1:21
As soon as the video get added, you
1:23
basically add this to the timeline
1:25
automatically. The video is added and
1:28
you can click the plus icon to add the
1:30
video.
1:32
And now you can actually control
1:34
properties regarding this video. You can
1:36
actually split cut the video
1:40
by just clicking at just clicking this
1:43
split button. And now what it will do it
1:46
will actually split the video in two
1:48
parts. And in this easy way using this
1:50
timeline you will be able to cut the
1:52
video. So now if you don't want this
1:54
part you simply click the delete button.
1:58
So now everything is deleted right here.
2:02
So easily whatever part that you don't
2:04
want you basically click the split
2:06
button and you can delete this part. So
2:10
you can just see how easy it is.
2:16
And after that once you want to export
2:19
you actually have the export button. You
2:21
click the export button control the
2:23
quality resolution everything is
2:24
customizable. You will see that
2:27
quality and processing speed and click
2:30
the render button. And now the
2:31
processing will start.
2:37
It will actually use ffmpg web assembly
2:40
library.
2:46
I think we just need to refresh here.
2:48
Sometimes fMPPG web assembly library can
2:51
take some time to load. But you also
2:54
have the option to add text as well. So
3:00
if you want to delete everything, you
3:01
can delete this again. You can add the
3:03
video
3:05
like this. Just click the plus icon.
3:14
So essentially it is developed in
3:16
nextJS. You will see each and every
3:18
component is divided into its
3:20
appropriate TypeScript file.
3:30
So once you add the video you can
3:32
control the properties of this. You can
3:34
control the audio.
3:37
Uh now if you want to add text here, you
3:40
can add some text.
3:49
You can even control the color of the
3:50
text as well. After that, click on add
3:52
text. And here you can control
3:56
at which location it should appear. And
3:59
you will see it will appear something
4:02
like this. And here you can control the
4:04
position of the text as well using these
4:06
sliders.
4:15
Opacity, color, everything you can
4:17
control here.
4:20
The font size as well. So similarly you
4:24
can see the text will now appear using
4:27
this timeline. You can easily control
4:33
Similarly, we can even add images as
4:36
well. So, go to library and click on add
4:38
media. And if you have a image that you
4:41
want to add, click the plus icon. And
4:44
once again, you can actually control the
4:47
width of the image.
4:51
And similarly, the height as well.
5:03
And similarly you can uh just provide
5:06
the x position and the y position where
5:08
the image should appear. So everything
5:11
is customizable. You can just see right
5:13
here.
5:16
So
5:20
now you can play the output video. It
5:22
will appear something like this.
5:28
So now if you click export you basically
5:30
can change the resolution, quality,
5:32
processing speed, everything. And now if
5:35
you click the render button
5:37
automatically the processing will take
5:39
place using fmpg web assembly library.
5:42
And once it reaches 100% your output
5:44
video will be created. So this is
5:46
actually a fullyfledged SAS software as
5:49
a service uh video editor that I built
5:51
in nextJS.
5:53
You can easily deploy this once you
5:56
purchase a domain name. It's a
5:57
fullyfledged solution. You can directly
5:59
purchase this script. The link is given
6:01
in the description. And if I show you
6:03
the package JSON file, it's entirely
6:06
built in next.js. We have used fmpp web
6:09
assembly library.
6:12
And it's using the latest version of
6:14
next and also it is using react as well.
6:17
So,
6:21
so you don't need to create this video
6:24
editor from scratch. It will save you a
6:27
lot of time. You can customize the
6:28
script and add additional features on
6:30
top of the script.
6:35
So, this can actually make you a lot of
6:37
money as well by placing advertisements.
6:39
Once you uh get a domain name, you can
6:42
easily deploy this
6:50
So this will take some time. So once it
6:52
reaches 100% it depends upon the length
6:55
of the video. How much is the length? So
7:04
so it totally depends upon what is the
7:06
length of the video, what is the
7:07
processing speed. So
7:11
if I show you the console here, it's
7:13
actually processing this right in this
7:18
terminal. So fMPPG is doing its job in
7:22
the background. So if you don't know
7:24
about ffmpg
7:26
web assembly library, so this is
7:28
actually the library that we are using
7:30
for this next.js project for actually
7:33
processing the video.
7:37
So we have this is allows the developer
7:40
to use ffmpg directly in the browser.
8:15
It basically processes frame by frame.
8:18
Each and every frame it processes and so
8:21
you don't need any video editor. You can
8:23
directly execute
8:25
this application in the browser.
8:28
So it doesn't have a back end. So all
8:30
the it's a single page application. All
8:32
the processing directly happens in the
8:34
browser.
8:36
So it is not having any sort of back
8:38
end.
8:40
So you can easily deploy this
8:44
on a VPS virtual private server. So
9:25
So now you can see once the processing
9:27
completes you will see this screen where
9:29
you can actually see the output video.
9:31
So image is added, text is also added.
9:34
So this is actually the output solution
9:36
that you will get.
9:41
So in this easy way you can edit
9:44
your videos directly using this next
9:46
year's video editor. And now you can
9:49
play this video directly. So this will
9:51
save you a lot of time. If you're
9:53
looking forward for a video editor in
9:55
nextJS you can purchase the script. The
9:57
link is given in the description.