Up next in 10
I Built this Canva AI Video & Image Passive Income (10$/Month) Timeline Editor Static App in Browser
Mar 12, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-canva-ai-video-image-passive-income-10-month-timeline-editor-static-app-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:00
uh hello guys welcome to this video so
0:02
in this video I will show you a canva
0:04
clone video timeline and MH editor that
0:07
I built inside the browser and it is
0:09
entirely built inside HTML CSS and
0:12
JavaScript and it's a static app which
0:15
runs without server you can access this
0:18
at this URL free mediat tools.com
0:21
videoeditor and it's a passive income
0:24
tool that I developed and you can earn a
0:26
lot of money by placing advertisements
0:28
right here
0:30
and this is actually the live demo you
0:32
can simply go to this URL free mediat
0:34
tools.com videoeditor this is my website
0:38
right here and this is actually the tool
0:40
similar to canva canva also provides you
0:43
for editing images videos directly
0:45
inside browser so this is actually the
0:49
you can change the canvas color using
0:51
this Color Picker and here you can
0:54
actually make YouTube thumbnails you can
0:55
edit your videos directly in the browser
0:58
and here you can change the canvas
1:00
settings such as the width and the
1:01
height so by default it set to 180 180
1:05
let me change it to
1:08
1280 and 720 so as soon as you change
1:11
the dimensions you will see the canvas
1:13
will be updated and from this you can
1:15
change the color of the canvas right
1:17
here and
1:20
then now we have the option to
1:23
actually click the template section
1:25
right here so as soon as you select the
1:28
templates you will be able to to select
1:30
uh
1:31
templates as well so this is actually
1:34
the timeline that you see right
1:36
here so this is actually the timeline
1:39
editor and here you can add text right
1:42
here by going to the text menu and then
1:45
you can actually add your text control
1:48
it with your mouse right
1:55
here let's see
2:00
so you can place this text
2:03
accordingly and then we have set of
2:05
options you can click the plus icon
2:07
right
2:08
here to add another thing and if you
2:11
want to remove it you can just simply
2:13
click the cross icon and you will see
2:15
the timeline
2:17
appearing and by default it appears for
2:19
5 Second and
2:22
uh here you can change the color of the
2:25
text
2:30
you can see that so you can align the
2:32
text in the left position center right
2:37
can underline
2:38
it change to italic bold it so all these
2:42
things you can do this and then we also
2:45
have set of emojis you can place you can
2:48
put shapes right here as well
2:50
so can control this color of
2:57
it and using this timeline line you can
3:00
actually control when this shape
3:05
basically so you can see it appears
3:10
at this actually this timeline allows
3:13
you to place your objects greatly and
3:16
also let me show you if I this website I
3:19
have approved using Google AdSense and
3:21
ISO so Google AdSense if you see I'm
3:24
earning a lot of passive income daily by
3:26
placing advertisements this is the
3:28
day-to-day
3:30
data right
3:32
here and also we have the iso Network as
3:35
well so you will see it is giving me
3:37
passive income you can
3:40
see every day so if you the link is
3:44
given in the description if you need the
3:46
source code of this canva video image
3:49
timeline editor you can go to my
3:52
description where I given the full
3:54
source code of this project so this is
3:57
entirely built is a static tool so once
3:59
you purchase it you will be redirected
4:02
to the Google Drive where you will
4:03
actually get a zip file which will if
4:06
you extract the zip file you will get
4:08
this directory structure so each file
4:11
will contain you'll see this is actually
4:13
the CSS code right here of this editor
4:16
this
4:17
is the JavaScript code which is there so
4:19
we have used some open-source packages
4:21
for this for building this entire video
4:24
timeline editor this is the main file
4:26
here
4:27
index.html so you you can directly open
4:30
with live server so you can test it out
4:34
locally so now this editor will open you
4:37
will see now it is open directly locally
4:39
I'm opening it so once you get the
4:42
source code you will be able to modify
4:43
the source code as well so you will get
4:45
to see how I developed this so you can
4:47
see it's entirely 2,000 lines of code
4:51
this is the HTML code and this is
4:53
actually the JavaScript packages that we
4:56
used here and it doesn't use server side
4:59
at all so it runs at a static site you
5:01
can easily deploy this to a shared
5:03
hosting plan as well so hostinger you
5:06
can choose any basic hosting you can
5:08
deploy all these files to deploy this
5:10
Editor to your website and this will
5:12
appear like this and you can even hire a
5:15
developer to Simply customize the Lo and
5:17
fail of that so once you can rank on
5:20
Google you will see all these templates
5:23
will be
5:24
there and you can play this once you are
5:28
interested you will see this download
5:29
button right here and you can download
5:32
this as a webm video animated GI file or
5:36
an
5:37
image so let me all just download this
5:40
as a image so we have different option
5:43
we can download this as a webp JPG PNG
5:47
let me download this as
5:49
a so in this way it's a complete image
5:53
video timeline editor if you
5:55
see we can even download this as a
5:58
animated gift
6:01
so this will actually create the GI file
6:04
right here if you see it is creating it
6:06
then it will export this as a GI
6:08
file so you will see that so we can even
6:12
export this to a video as well you'll
6:14
see you have three options video give or
6:16
image so video as well it will create
6:19
this rendering this video you'll see and
6:22
then the video will be created and you
6:25
will be able to play the video so it's a
6:27
fully timeline editor and uh it's a
6:31
great static tool for passive income
6:34
once you can actually deploy this on
6:37
your website you just need to get the
6:39
approval of Google AdSense or ISO or any
6:41
AD Network and you can place
6:43
advertisements and earn a lot of Revenue
6:45
so you can see that so these are
6:48
different layers having in this template
6:50
here text
6:52
shapes and you can align this to any
6:56
Dimensions we have set of Dimensions
6:58
which are there 16 by 9 we can actually
7:01
one click you can 9x 16 4x3 this is for
7:06
different social media networks 12x 80
7:09
is for YouTube this is for Instagram so
7:12
you can align this accordingly and uh if
7:16
you want to clear the canvas there is a
7:18
clear button as well so once you click
7:20
this button all the things will be
7:22
deleted and the nice thing is that at
7:24
the checkout page I've given the link
7:26
where you can try this tool first of all
7:28
by visiting this this website so just
7:30
try this if you are interested in
7:32
purchasing it so first of all try this
7:34
tool just use it and if you are
7:37
interested then only you can purchase it
7:40
and here you can upload your custom
7:41
images so here you can
7:49
actually select your own images that you
7:56
need so you'll see that so you can place
7:59
the image
8:01
let me change
8:03
the you can place your custom
8:05
images and then convert those images
8:08
into video so this is one image that I
8:12
added right
8:15
here you can see the timeline so this
8:18
image appears for 4 seconds and you can
8:21
even change this duration by going to
8:23
this duration by default each image that
8:27
you add is it appears for 4 second let
8:29
me change this value to two so now this
8:32
only appears for 2 second this
8:38
image and now if I want to add another
8:41
image I will simply say you need to add
8:43
another image so this can be let's
8:53
suppose another image that we added so
8:55
this should appear after
9:03
you can see that
9:05
so these are two different images you
9:08
can control this using this nice little
9:11
timeline editor that we
9:20
got can see how how easy it is
9:42
so if you want to clear the canvas you
9:44
can click the clear
9:49
button here you can control it
10:04
and by default guys this this templates
10:07
if you go to the template section if I
10:10
deployed this on free media sometimes
10:12
you will get this error the templates
10:14
will not be loaded so you will see in
10:16
the local version these templates will
10:18
be rimed available so don't need to
10:20
worry about it sometimes the hosting
10:23
will not allow us to render those
10:25
templates but in the local version you
10:26
will see all the templates are perfectly
10:29
appearing
10:31
so the code is the code is correct so if
10:36
you see in the the in this version if
10:39
the template doesn't
10:41
appear you don't need to worry about it
10:43
because in the local version the source
10:45
code that you will get the templates
10:47
will be rate available so if you go to
10:49
the templates we have third party
10:51
templates right here you can even create
10:53
your own templates as well so you can
10:56
import export everything you can do and
10:59
this is actually a fully timeline editor
11:01
you will see that so you can export your
11:03
images into video it will render this
11:08
video so you can try this by visiting
11:11
that URL i al also give give the link in
11:15
the description of this video so you can
11:17
try this if you are interested then you
11:19
can go to my website trod store.com and
11:22
purchase this
11:23
tool and after purchasing you will be
11:25
redirected to Google Drive where you
11:27
will actually get this source code
11:29
it doesn't require any server it simply
11:32
works in the browser and it's some like
11:35
canva
11:36
clone you will see this full source code
11:40
you will
11:42
get you just need a simple editor and
11:45
simply open with live server to Simply
11:47
open this project locally so it will
11:49
simply run in the browser so thank you
11:51
very much for watching this video and I
11:54
will be seeing you in the next video
#Flash-Based Entertainment
#Online Media
#Multimedia Software
#Online Goodies
#Clip Art & Animated GIFs
#Video Sharing
#Advertising & Marketing