Up next in 10
WebAssembly 3.0 is Here: Build a Real-Time Video Editor with Next.js FFMPEG WASM Saas Web App in TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/webassembly-3-0-is-here-build-a-real-time-video-editor-with-next-js-ffmpeg-wasm-saas-web-app-in-ts/
Show More Show Less View Video Transcript
0:00
Guys, welcome to this uh video. So, in
0:02
this video, I'll show you I built out a
0:04
video editor in NextJS uh using a web
0:07
assembly 3 web assembly if you know that
0:11
uh it's actually a library which allows
0:14
you to use fmpg web assembly directly in
0:17
the browser. So, they have released
0:19
their 3.0 version. So, I used this
0:22
latest version inside this nextjs
0:25
project which actually is a video editor
0:27
project. You will see the here you can
0:29
edit your videos directly in the
0:31
browser. It's a single page application
0:32
indexjs.
0:34
This is the overall directory structure
0:36
of this project and it's actually using
0:38
this ffmpg web assembly library as you
0:40
can just see right here. It's also using
0:42
the latest version of next and react. If
0:45
you're interested in this purchasing it,
0:47
I've given the link of the project. Uh
0:49
you can directly purchase the source
0:51
code after you get the source code from
0:53
Google drive. So we are running this
0:56
project locally. So let me first of all
0:58
show you the actual demo. You first of
1:00
all get started.
1:04
You can create multiple projects. Uh you
1:07
just give it a project name. Click on
1:09
create.
1:11
After that you will be redirected to a
1:13
timeline based editor. So here you first
1:15
of all select your video file that you
1:17
want to get added. So you basically add
1:20
your video
1:22
and then we have these you can add text
1:25
images you can cut your video directly
1:28
using this timeline. Let's suppose I
1:30
only want to cut the first 6 seconds. So
1:32
I will simply click the split button. So
1:34
it will divide the video into two parts.
1:36
And now this part I don't need. I can
1:38
simply delete this. Here you can also
1:41
change the properties of the video such
1:43
as the volume, the width, height,
1:46
everything. And then you can even add
1:48
text as well. So you will just see here
1:52
how easy it is to actually add the text
1:55
here.
1:57
Then you also have the option to
1:59
actually change the text here. Color
2:07
and here you can even change the
2:08
position here. X Y position everything.
2:13
Same goes with the images as well. So
2:15
you select whatever image file that you
2:17
want to edit
2:26
and then you can adjust the width and
2:29
the height of the image as well. So
2:30
simply place at whichever location that
2:34
you want to. So everything is there you
2:36
can control here. And lastly, if you
2:38
want to export this video, you click the
2:40
export button and then here you can
2:43
manipulate the resolution, quality,
2:45
processing speed of the video. And then
2:47
it will show you this fmpg progress bar.
2:51
So it will exactly tell you how much
2:54
time is remaining. So it is processing
2:55
your video frame by frame. Uh this is
2:59
actually using this web assembly 3.0
3:02
version inside this nextjs.
3:06
So if you're interested uh you can
3:09
actually get this full source code. You
3:11
can add more features on top of this
3:13
video editor and you will get to know
3:16
how I coded this.
3:20
So it's actually a single page
3:22
application. It doesn't have a back end.
3:24
So it's running directly in the browser.
3:34
So once it completes you will actually
3:37
see the output video containing all your
3:39
edits.
3:46
So each and every project have a unique
3:48
ID. So you can create multiple projects
3:50
here. So I showed you earlier.
4:09
So now it completes here. You will see
4:11
this is your output video. [snorts] So
4:13
in this easy way you can even download
4:15
as well. This is your output video which
4:18
has been created edited the text and the
4:21
image. So if you like it the link is
4:24
given in the description.