Up next in 10
Build a Micro-SaaS Web App: Timeline Video Editor Built with Next.js + FFmpeg WASM in Browser
Dec 27, 2025
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/
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: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 XJS. It's actually a
0:11
video editor with the help of which you
0:13
can edit your videos directly inside the
0:16
browser. So we are using ffmpg 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 fmfmppg web assembly
0:57
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:42
want the first 6 seconds in the video I
1:45
need to start this video. So we have
1:47
this button of split. So as I click the
1:50
split button, automatically it will
1:53
split the video into two parts. Now if I
1:56
don't 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:32
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:33
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 slide just place it.
4:00
Similarly, the text as well. You can
4:03
change the color of the text as well.
4:04
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:20
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 Nex.js
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:18
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:29
will automatically get the source code
6:31
from Google Drive automatically. So the
6:34
link is given in the description.