Up next in 10
Build a Next.js Canva & Adobe Timeline Video Editor Clone in Browser Using FFMPEG WASM in TypeScript
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-adobe-timeline-video-editor-clone-in-browser-using-ffmpeg-wasm-in-typescript/
Show More Show Less View Video Transcript
0:01
Uh hello guys, welcome to this live
0:03
stream. So in this live stream I will
0:05
show you I basically built out a NexJS
0:08
uh Canva and Adobe timeline video editor
0:12
directly inside the browser. So I'm
0:14
running this inside NexJS uh on local
0:17
host. Let me show you the demo from
0:20
scratch here. So once you load the
0:21
application, you will see the screen.
0:24
This is actually the video editor with
0:26
timeline. So here you have the option to
0:29
import the video file that you want to
0:31
edit directly in the browser. So once I
0:33
select the video file, you can add that
0:35
video inside the timeline. So it's
0:38
actually a single page application. No
0:40
back end is there. Everything is
0:42
processing directly in the browser. So
0:44
this is actually the directory structure
0:45
of the full project in uh Nex.js. It's
0:48
fully functional. All the files are
0:50
customizable. You can actually customize
0:54
each section of the source code or add
0:56
additional features as well. So I have
0:58
given the source code. You can directly
0:59
purchase it. After you purchase it, you
1:02
will see this directory structure. So we
1:04
are running this project locally as you
1:05
can see on localhost 3000.
1:09
So
1:11
it's very easy to deploy this as well.
1:13
So it comes with its own video player.
1:15
So here you can uh preview the video
1:19
and uh now inside the right hand side
1:22
corner of the screen you actually can
1:25
manipulate the speed of the video as
1:27
well. So let's suppose you want to
1:29
decrease the speed. So you can use these
1:31
sliders
1:33
to actually manipulate the speed. So you
1:37
can change the speed here. You can even
1:40
change the volume, opacity, rotation,
1:42
scale level. You can zoom in in the
1:44
video at you can just see here.
1:48
So how easy it is to zoom in as well to
1:51
decrease the speed as well. So you will
1:53
just see here
1:56
after you do this we also have blur
1:58
effect as well. You can blur out the
2:01
video as well. So brightness, contrast,
2:05
saturation everything you can control
2:07
rotation as well. You can rotate the
2:09
video as well. So all these effects are
2:12
there. Apart from that, if you want to
2:14
replace the audio, you can also replace
2:16
the audio right here. So, this will
2:18
replace the audio as well. After you
2:21
have done, you have the button of
2:23
export.
2:24
We also have the option to add text as
2:26
well. So, you simply click the add text
2:28
button.
2:30
So, right here, if you want to add a
2:32
watermark, you can actually, it's really
2:35
simple. So, here you can actually
2:38
provide a watermark right here. So all
2:41
the processing is directly happening in
2:43
the browser. Here you will see you can
2:45
also increase the size.
2:54
So you can just place it. So now if you
2:57
just want to export this video, you can
2:59
easily do that by clicking the export
3:01
button. Click that export and right here
3:04
you can select the format GIF, MP4. You
3:08
can also manipulate the width and the
3:09
height of the video and frame rate. You
3:12
can select here and click on export. So
3:15
now it will actually encode your video
3:18
using ffmpg web assembly library. All
3:21
the processing is happening directly in
3:24
a application. It's a single page
3:25
application. There is no back end to it.
3:28
So it becomes really easy for you to
3:30
deploy this. So you can easily purchase
3:33
it guys. This is a Canva and Adobe
3:35
timeline video editor clone. So no need
3:39
to use Canva or Adobe. You can use
3:40
instead this by purchasing this. You can
3:43
easily deploy this application and start
3:46
a software as a service. User will come
3:49
to the tool website. They can edit your
3:51
videos and you can also earn a lot of
3:53
revenue by placing advertisement or
3:57
integrating a software as a service
3:59
model inside this tool.
4:02
So every file is you can see it's coded
4:06
inside Typescript. So it becomes easy
4:07
for you to customize it. And we are
4:09
using FMPG web assembly library. And we
4:12
are using the latest version of next and
4:15
react. As you can just see right here,
4:16
it's a fully functional project.
4:20
And uh
4:23
the encoding will take some time
4:24
depending upon the size of the video
4:28
and once it completes it will download
4:32
everything as a video file. So you just
4:36
need to wait for some time as it
4:38
finishes as as it reaches 100%. So
4:42
if you don't know we are using this
4:44
library which is a really famous library
4:47
fmpp web assembly. So this is a really
4:53
awesome library which allows you to
4:55
directly use fmpp directly in the
4:57
browser. So we are using this for
5:00
building this nextjs video editor.
5:06
So once it reaches 100% guys it will
5:08
download the video. So if you're
5:10
interested in this script the link is
5:13
given you can directly purchase it.