Up next in 10
Build Next.js Wondershare Filmora Clone Video Timeline Editor Using FFMPEG WASM in Browser Using TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-next-js-wondershare-filmora-clone-video-timeline-editor-using-ffmpeg-wasm-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
Hello guys, welcome to this live stream.
0:02
So in this live stream I will show you I
0:04
built out a Wondershare Filmora clone
0:07
video editor with timeline in Next.js.
0:10
So let me show you the demo of the
0:12
application. I've also given the link
0:14
where you can purchase the full source
0:16
code.
0:17
This is a fully fleshed Next.js project
0:19
here as you can see. Once you purchase
0:21
you will get this directory structure.
0:24
All the components are divided into its
0:26
multiple. This is a button component.
0:28
This is the edit editor component. So
0:31
everything is divided into its
0:32
appropriate file. So all the source code
0:35
files are coded inside TypeScript. As
0:37
you can see right here. And if I show
0:39
you the package.json file here it's
0:42
actually built using FFmpeg web assembly
0:45
library.
0:46
And we are also using Remotion as well.
0:50
Which is a really popular
0:52
library for video inside
0:56
React and Next.js. So if I show you we
0:58
are using the latest version of Next.js.
1:00
This is a fully fleshed Next project.
1:03
Now if I show you
1:06
once you land on this you basically get
1:08
this interface.
1:10
A welcome screen. So here you click on
1:13
get started. And here you can create
1:15
multiple projects as you can do inside
1:18
Wondershare Filmora.
1:20
You click on add project and you
1:22
basically give it a name here. Let's
1:24
suppose I say first. Click on create. As
1:27
soon as your project is created simply
1:29
click on this and now the timeline will
1:32
open as supposed to many edit video
1:34
editors which are very much popular like
1:37
Filmora, Wondershare Filmora. So it
1:40
directly works in the browser. No need
1:42
to install any sort of third party
1:43
application. So right here using this
1:46
button here add media you basically add
1:48
your video files, image files, audio
1:51
files. Any sort of files. So basically I
1:54
added this video here.
1:56
And I click click the plus icon to add
1:58
the video to the canvas. Hello guys,
2:01
welcome to this video. So So it's very
2:02
easy to add the video as you can see the
2:04
video has been successfully added. Now
2:07
we can basically perform splitting
2:09
operation using this timeline. Simply
2:11
select the video. Here you can adjust
2:14
any property. Here you can adjust the
2:16
width, the height of the video.
2:20
You can even basically
2:22
if you want to lower the
2:24
audio you can even do that.
2:26
So
2:27
using the slider you can adjust the
2:29
volume.
2:30
Really simple. And then if you want to
2:32
do any sort of splitting operation
2:34
simply
2:35
you have the split button. And you click
2:37
the split button and now the video will
2:39
be splitted into two parts.
2:41
So now if you don't want this part you
2:43
can actually click the delete button.
2:45
Everything is go away. Now we only got
2:47
this first two seconds.
2:50
So it's really simple to cut and split
2:52
videos which are really long and you
2:54
don't want entirety. Then we also have
2:57
the option to add text. If you see click
3:00
the text button. If you want to add some
3:02
kind of watermark you can even add that.
3:06
Just click add text.
3:08
And now for the positioning you can
3:10
basically adjust using these sliders.
3:13
Just select
3:15
the text.
3:21
So using this XY position you can uh
3:32
So it's really simple here you can see
3:34
that.
3:40
And
3:42
these are the visual properties. If you
3:44
want to change the color of the text you
3:46
can even do that as well. So it's really
3:48
simple.
3:51
And then we get this here. So if you
3:54
want to move the positioning of the text
3:56
you can basically adjust just select the
3:57
text and in the right hand side corner
3:59
of the screen you can manipulate the
4:01
X position, Y position to adjust it
4:03
properly.
4:05
And
4:07
same goes with images as well. Go to
4:09
library and if you want to add any sort
4:11
of image in the timeline simply select
4:13
the image.
4:14
And just add this to the timeline. So
4:16
now the image will also get added.
4:19
You basically select the image and
4:21
if you want to adjust its opacity you
4:24
can even do that.
4:26
You can also
4:30
if you want to adjust
4:33
its width and height you basically
4:37
So it's really simple as you can see.
4:40
Then we also have the export button.
4:43
You can remove elements from the
4:44
timeline. Simply select them and you can
4:46
delete them as well.
4:51
Like split and then delete. Then if you
4:54
want to export this you click the export
4:55
button. And here from the quality you
4:57
can adjust the quality as well. 480p,
5:00
720, 1080p, full HD quality, high
5:03
processing speed, everything. Click on
5:05
render. And now using FFmpeg web
5:08
assembly library and Remotion library
5:11
all the
5:13
files will be exported. So you just need
5:16
to wait for some time as the processing
5:19
is taking place. Once it completes your
5:22
video will be downloaded. So this is a
5:24
fully fleshed video
8:09
editor like Wondershare