Up next in 10
Build a Micro-SaaS Web App: Timeline Video Editor Built with Next.js + FFmpeg WASM in Browser
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-micro-saas-web-app-timeline-video-editor-built-with-next-js-ffmpeg-wasm-in-browser/
Show More Show Less View Video Transcript
0:01
Uh hello guys, welcome to this uh live
0:03
stream. So in this live stream I will
0:05
actually show you I built out a micros
0:08
web application in nextJS. It's actually
0:11
a video editor with the help of which
0:13
you can edit your videos directly inside
0:15
the browser. So we are using FMPG web
0:18
assembly. So I am running this
0:20
application in the browser. I'm showing
0:22
you the demo. So this is actually the
0:24
directory structure of the whole nextjs
0:26
project. If you're interested in
0:28
purchasing this source code, I have
0:30
given the link in the description. After
0:33
purchasing it, you will get the source
0:34
code from Google Drive. Let me show you
0:37
the demo of the actual video editor.
0:39
It's a micro web software as a service
0:43
SAS app. You can see each component is
0:46
divided into its own TypeScript file.
0:48
It's fully customizable. You can add
0:50
more features on top of this project. We
0:53
are using the latest version of next and
0:55
we are also using FMPG web assembly
0:58
library. So let me show you the demo. So
1:00
once you load the application it the
1:02
interface looks something like this.
1:04
Then you click add project and you
1:06
basically give it a name and just click
1:09
create. After creating that project this
1:13
timeline based video editor will open.
1:16
So here first of all you have the option
1:18
to add your
1:20
video whatever video you are editing and
1:23
after click plus and the video will get
1:25
added in the timeline as you can see and
1:28
now you can play the video like this
1:31
using this nice little timeline you can
1:33
adjust various settings regarding this
1:35
video
1:38
and now if you want to split the video
1:40
at any duration let's suppose I only
1:43
want the first 6 seconds in the video I
1:45
need to cut this video. So we have this
1:47
button of split. So as I click the split
1:50
button, automatically it will split the
1:54
video into two parts. Now if I don't
1:56
want this part, I can delete this.
1:58
Simply click the delete button. And now
2:01
that portion is successfully deleted. So
2:04
now the video is only 6 seconds long.
2:06
And now we also have the option to add
2:09
text and images as well. So if you're
2:13
interested in this project guys, the
2:14
link is given in the description. You
2:16
can directly purchase the source code.
2:18
If you click text and now if you want to
2:21
add this, you click that add text button
2:24
and you can adjust
2:27
whatever using these nice little slider
2:30
here. So you can just see here now if
2:33
you play the video the watermark will be
2:35
successfully added. You can change it to
2:38
anything. So it's a micros web
2:41
application which allows easily for you
2:45
to actually deploy this.
2:48
You can even add multiple text as well.
2:50
So you can very easily add multiple
2:52
text. So if you don't want to you can
2:54
delete this instead that you can.
2:58
So this is really easy guys to edit your
3:01
videos directly in the browser without
3:03
having any sort of video editor. You can
3:05
use this application. Similarly, you can
3:07
go to library and if you have a image
3:10
file, you can even add that image as
3:12
well. Similarly, you can just see here
3:14
how easy it is.
3:18
Again, you basically adjust
3:23
these sliders comes in handy by which
3:26
you can adjust.
3:34
And if you look at this image here, you
3:37
can adjust the properties here of this
3:39
image.
3:43
You can control the width and the height
3:46
using these sliders here very easily.
3:54
X position, Y position, everything you
3:56
can control here. You can just see here
3:59
using these sliders. Just place it.
4:01
Similarly, the text as well. You can
4:03
change the color of the text as well.
4:05
You can just see here how easy it is,
4:08
opacity, everything you can control
4:10
right here. So I should highly invest
4:15
your money guys. You can definitely
4:16
purchase it. If you face any sort of
4:18
problem, I will help you. It's very easy
4:21
for you to deploy this project. So now
4:23
if you want to export this video here,
4:26
you basically have this export button
4:29
and you click the export button. You can
4:31
change the resolution, processing speed,
4:33
everything you can control here. Click
4:34
the render button and now the ffmppg
4:37
will do the processing directly in the
4:39
browser. So once it reaches the 100%
4:41
your video output video will get
4:43
downloaded. So you just need to wait for
4:45
some time.
4:48
So it will save you a lot of time guys
4:50
because I built this project from
4:52
scratch. It's a micro web SAS app and
4:56
you can earn a lot of revenue. If you
4:58
deploy this using your own domain name,
5:01
people will come to your web
5:02
application. They use the web
5:04
application. You can even uh just
5:07
integrate a subscription based model.
5:09
The user will be able to use your
5:11
application by paying some kind of
5:13
subscription fees or you can actually
5:16
put advertisement and earn a lot of
5:18
revenue as well. So it's a micros web
5:21
application.
5:24
So we are running it on local host. It's
5:26
very easy for you to deploy this. As you
5:28
can see it's a fullyfledged NexJS
5:31
project. So NexJS is really a very
5:34
famous framework. So
5:38
in the
5:41
in the modern world this application
5:43
will suit really well. So now you can
5:45
see once the processing completes it
5:47
shows you the output video. You can just
5:49
see the text and image is successfully
5:52
added and now you can click the save
5:55
video button to actually download the
5:57
output video.
6:03
So this project is really good guys. It
6:05
can split it can cut your video
6:07
directly. It can add text add images.
6:11
It's an complete video editor project in
6:14
nextJS. So main thing is that it
6:16
directly it doesn't have a back end. It
6:19
is a single page application directly
6:21
executes it in the browser. So again if
6:24
you face any problem after purchase you
6:27
can contact me. But after purchase you
6:30
will automatically get the source code
6:31
from Google Drive automatically. So the
6:34
link is given in the description.