Up next in 10
Build a React.js Canva Ultimate Image & PDF Editor Clone in Browser Using Node.js & Express
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-react-js-canva-ultimate-image-pdf-editor-clone-in-browser-using-node-js-express/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this uh
0:02
tutorial. So in this tutorial, I will
0:04
actually show you a ultimate Canva clone
0:07
uh image and PDF editor that I developed
0:10
inside my website freemediatools.com.
0:13
So I basically built a tool right here
0:16
and if you visit free mediatools.com,
0:18
you will actually find this tool which
0:20
is Canva clone ultimate image and PDF
0:23
editor. So if you go to this tool uh the
0:27
interface will look something similar to
0:29
Canva you will basically if you visit
0:31
canva.com
0:33
if you visit their editor it is same to
0:36
same you will see that uh the menu
0:38
remains the same the logo if you see
0:41
this is actually the side menu all these
0:43
things all the shapes all the images are
0:45
there so these are the images that you
0:49
can select it is all coming from pixels
0:53
unsplash API so you You can see that
0:55
these are the different text that you
0:56
can use and uh these are all the
0:59
elements that you can see. You can
1:00
delete elements, you can add more pages
1:02
as well. So if you click this add page
1:04
button, a new page will be added. So
1:06
this is the official Canva editor. If
1:08
you want to create a design so if you
1:12
visit the Canva editor, it it will look
1:14
something like this. You will see very
1:16
similar. This is our own tool right
1:18
here. So this is I made this tool using
1:22
uh ReactJS, NodeJS and Express. And if I
1:26
just uh show you the images panel, you
1:29
can upload your own images as well.
1:30
Simply upload. And here you can select
1:33
your own custom PNG or JPG images which
1:36
are there inside your computer. So you
1:39
can drag and drop. It's very feasible.
1:41
You can see the interface. It's very
1:43
much like Canva right here. You can add
1:45
multiple images. You can add text as
1:48
well. So you can just
1:52
edit your images. You can see that just
1:55
you can resize your images like this. So
1:59
it is drag and drop. And then if you
2:01
want to add some text as well, you can
2:02
even add the text as well. So simply
2:05
drag your text and right here double
2:07
click and just edit your text.
2:12
So it is very simple. So you'll see that
2:14
you can drag and drop in which in
2:17
whichever position you want to place
2:18
your text. So once you are done, if you
2:21
want to export this design to a PNG
2:24
file, you can have this export button
2:27
ready. If you click this export button,
2:29
[snorts] your image will be downloaded
2:32
as a PNG image. And if you try to open
2:34
this uh okay, I think this is the first
2:38
page. So what you need to select here go
2:40
to the file menu. And here you will
2:42
select export page two as PNG. And now
2:46
your only the second page will be
2:47
exported. And now you can see the image
2:49
is successfully exported to a PNG file.
2:52
And now if you want to export this to a
2:54
PDF file as well, you can even do that.
2:56
The select this option all pages as PDF.
3:01
So now all the pages that you design
3:04
will be converted to PDF.
3:06
So
3:08
if I show you basically delete this
3:10
page. So only a single page is there.
3:13
And if you now
3:21
so you can even locally run this
3:23
application. If you see we are running
3:26
this application localhost
3:29
5173. I think we are also running this
3:32
application now. Okay. We can start this
3:36
locally. Uh the application is
3:38
available. So the link is given guys of
3:41
the source code. If you want to purchase
3:43
this, I have given the link in the
3:45
description. So you can go to my website
3:49
procodestore.com and you will actually
3:50
get after payment you will be redirected
3:52
to Google Drive where you will actually
3:54
get this zip file. [snorts] And the very
3:56
first thing you need to do after you get
3:58
the zip file, you need to extract all
3:59
the content. And this will be the actual
4:02
API folder which will be the back end
4:03
code which will be written in NodeJS and
4:05
Express. You will see that and this is
4:08
the front end which is written in
4:09
Typescript and ReactJS. So the job is
4:12
very simple. You need to open the folder
4:14
and first of all install the ReactJS
4:17
modules. So just type this command npmi.
4:20
So this will create this node modules
4:22
folder and it will install all the
4:24
modules of this ReactJS front end.
4:29
So this will hardly take 15 to 20
4:32
seconds depending upon your computer
4:34
speed. And uh after that you need to
4:36
navigate to the API folder to actually
4:39
install all the backend modules.
4:42
So this will just complete right here.
4:46
So before purchasing it on the check out
4:48
page I have given the live demo link so
4:50
you can try out the application before
4:52
purchasing it. Now you can go to the
4:55
navigate to the API folder and then
4:57
execute the same command which is npmi.
5:00
So this will also install all the
5:01
modules which are mentioned in the
5:03
package.json file. You will see that we
5:05
are using these dependencies.
5:08
And uh if you see this is our app.js
5:10
file. And uh now I basically written a
5:14
script in the package.json JSON file in
5:16
this folder concurrently. So it will
5:19
actually start your backend server and
5:21
the front end server concurrently at the
5:23
same time. So just navigate to the root
5:26
folder and just type this command npm
5:28
run start. So this will actually start
5:31
the front end and the backend server at
5:33
the same time. So now your server is
5:36
listening 5173. You just need to
5:39
navigate to this endpoint localhost
5:42
5173. So now your application will open
5:45
locally on the local host 5173.
5:49
So you can go to file here and you can
5:51
just see if you want to pick export this
5:53
to a PNG file you will see your ex
5:57
design has been exported to PNG. If you
6:00
want to export it to PDF so now now the
6:03
same thing will be exported to the PDF
6:05
file as well.
6:12
So this is actually
6:17
it will be exported. So
6:20
I don't know why it is not working on my
6:21
machine but you can try. So this is
6:23
actually the fully fleshed editor. You
6:25
can see all these images are coming
6:27
through uh
6:31
unsplash and pixels and all these
6:34
shapes. You can also see you can add new
6:36
page as well.
6:39
So you can see that
6:42
you can add all these shapes and
6:43
basically you can change the color as
6:45
well any color you can see. So you can
6:49
see that guys we have developed this
6:51
Canva clone from scratch. We haven't
6:53
used any third party dependency. It is
6:55
all written in Typescript, ReactJS,
6:57
NodeJS and Express. So we haven't used
6:59
any third party library or third party
7:02
uh subscription library. We have written
7:04
this from scratch. So you can use this
7:07
as unlimited
7:08
number of times. So there is no need to
7:11
replace any API key or you don't need to
7:13
actually go to any third party website
7:15
or develop your account. So it is
7:17
written entirely in from scratch. So you
7:20
can see that uh you can also
7:24
control the opacity as well. All these
7:26
things you can individually lock the
7:28
elements as well. So there is a lock
7:30
option. Now this position is has been
7:32
fixed because we have locked this
7:34
position or you can unlock as well. And
7:37
then these are the multi-layers. So the
7:39
these are different layers. You can see
7:41
that you can just
7:44
if you add multiple elements on the
7:47
page. So this is actually the text that
7:49
you have added. So you can control the
7:53
positioning of the text. You can also
7:55
control the font. So various fonts are
7:58
available. So you can see that all these
7:59
phones are available from Google phones.
8:02
So you can see as you drag down multiple
8:04
phones will be there. You [snorts] can
8:06
change to whichever phone that you like.
8:13
So you can see that just select and
8:15
automatically it will change. You will
8:17
see that. And uh after this you can even
8:20
change the background color as well to
8:22
whichever background color you want. You
8:24
can see that. So gradient
8:27
here you can change individually select
8:30
your favorite color from the color
8:31
picker. Similarly for the gradient as
8:33
well. So after you are done you can
8:35
simply place your text.
8:38
And uh now for changing the text color
8:41
there is this option right here.
8:45
You can change to any color of your
8:47
choice.
8:50
You can see that. Simply select the text
8:52
and now the color will be changed.
8:56
So you can see that. So this
9:01
so you can control this uh accordingly
9:03
guys. Uh to actually make it is very
9:06
useful for making any sort of thumbnails
9:08
you're making for social media websites
9:10
such as Facebook, Instagram, YouTube
9:12
thumbnail. You can also make you can
9:14
control the alignment of the text. You
9:15
can place it in the center left
9:17
position.
9:18
So the link is given guys you can
9:20
directly purchase it and from my website
9:23
you will get this directory structure. I
9:24
have shown you step by step how to
9:26
actually start this application on local
9:28
host. You can even deploy this this
9:31
application as well. If you see there
9:34
are various effects all this box shadow
9:37
effect you can see that all these
9:40
effects is there thickness you can
9:42
control offset direction of the shadow.
9:46
So I'm not comfortable in uh making
9:50
thumbnails. So I can't show you all the
9:53
features. So if you are a pro in
9:54
developing thumbnails, you can try this
9:57
application. So you can go to my link uh
10:00
free media tools/canva
10:02
ultimate editor. So you can try out this
10:04
tool before purchasing it. Just see all
10:08
the features which are there. You can
10:10
see that.
10:13
So you can as you can see if you want to
10:16
have multiple pages click on add page.
10:18
So now you can have multiple pages as
10:20
well. So the there are uh templates also
10:23
available. So if you want to use these
10:25
templates simply click on them and it
10:28
will also you can edit these templates
10:30
replace it with your own company name.
10:32
If you want to make a logo as well you
10:34
can also do it. Simply change the text
10:36
right here and then click on export and
10:38
it will actually export this to a
10:41
PNG file image file. [snorts]
10:44
So you can also see the live preview as
10:46
well by clicking the preview button from
10:48
the file menu. And uh
10:55
then you can also control the opacity as
10:58
well positioning
11:01
as well. If you and if you have multiple
11:04
elements, multiple things you can
11:07
control it the positioning of it by
11:10
going to position and then
11:13
you can see by the mouse you can control
11:16
the positioning. So this is
11:19
multi-layered editor. So if you have
11:21
multiple elements, you can control their
11:24
position
11:25
like this.
11:29
So these are all the images coming from
11:31
third party website and you can also
11:34
search for if you want to get computer
11:37
related images simply select.
11:47
So the support for your own images are
11:49
also there. So you can select your own
11:52
images which are there.
11:59
Simply drag and your image will be
12:00
there.
12:02
So it's ultimate editor guys uh for
12:04
actually building any sort of things.
12:06
And if you want to
12:09
download this design to a JSON file, you
12:11
can even do that as well. So if you want
12:13
to save your work, let's suppose you can
12:16
see it your design has been saved as a
12:19
JSON file. Now you can import this
12:21
design as well by simply importing it.
12:25
So you can import this design directly.
12:31
So if you save it, you can import it as
12:34
well by selecting the design that you
12:40
so
12:44
I think we saved it using file name. So
12:48
yeah,
12:51
you need to import the same file that
12:53
you downloaded. You will see file
12:54
3.json. So you need to import the same
12:57
file.
13:04
So then you can even
13:06
if you want to have a custom size. So
13:10
1280 by 720. If you are building a
13:12
YouTube thumbnail, click on create new
13:14
design. So you will see your canvas will
13:16
be resized. The width will be 1280 and
13:19
the height is 720. So you will see that.
13:21
So now you can control the canvas size
13:24
by going to file create new design or
13:26
you have various templates as well. If
13:28
you want to develop a Facebook post. So
13:31
if you select it automatically the
13:33
canvas will be resized then we have
13:36
Facebook cover Instagram post. So all
13:38
these social media networks have
13:40
pre-made sizes. So we have configured it
13:42
automatically for you. But still if you
13:45
want to make a custom size you can
13:46
provide the width and the height right
13:48
here and click on create new design and
13:51
you will be see. So
13:55
it's a very good editor guys. You will
13:57
see that
14:00
each and everything you can control and
14:02
customize right here and uh full source
14:06
code you will get and if you still face
14:08
any problem you can contact me on my
14:10
email address and phone number which is
14:11
given on my website. So
14:15
this was the
14:17
editor guys. So if you are interested
14:20
the link is given in the description of
14:22
this live stream. So you can check out
14:26
these are the different templates which
14:27
are there. If you go to the template
14:29
section these will be different
14:32
templates which are pre-esigned for you.
14:35
So not a lot but still I think it's uh
14:40
12 templates are there. So if you want
14:42
to
14:44
use any of these templates simply click
14:46
on it and it will show the live preview.
14:48
You will see that. So now you can
14:49
individually just change the text. You
14:52
can see that you can change your text.
14:57
All these elements are customizable. You
14:59
will see that
15:03
uh you will see that all these from the
15:06
position as well. Simply go to the
15:08
position and in the template all the
15:11
elements right here. You can also
15:13
replace this image as well accordingly.
15:19
Control the opacity of this image. You
15:21
will see that and here the text property
15:25
you can change it increase the font size
15:27
of the text you can change to itallic
15:29
you can underline the text uppercase
15:33
you can apply various effects to this
15:35
text you can change it apply some shadow
15:38
you will see that so each and every
15:42
sha uh effect is there guys you will see
15:44
that
15:49
So
15:51
then we also have these uh different
15:54
kinds of frames available alphabetically
15:57
numbers as well. So if you want to use
15:59
these frames you can even use that as
16:01
well. So
16:08
it can be a mini Canva clone. I it is
16:11
not the full Canva clone but still it
16:14
has the most features that Canva
16:16
support. So it's a good editor.
16:20
You can see that now the PDF is working.
16:23
I still Yeah. So if you go to export
16:26
this page as PDF. Now if you open this
16:30
PDF file, you will see that the PDF has
16:32
been successfully exported. So
16:36
this is just my internet connection was
16:38
not working. So now you can try this on
16:42
your own computer. Now the PDF is also
16:44
working. You will see that. So if you
16:46
want to export this into a PNG file or
16:48
you can export this to a PDF file as
16:50
well. All the two options are working.
16:53
So the source code guys is given in the
16:56
description. You can directly purchase
16:57
it from procodestore.com. The link is
16:59
given. And uh before you purchase it, I
17:02
have on the check out page. I have given
17:03
the live demo link. You can navigate
17:06
manually as well by going to free media
17:08
tools Canva ultimate editor and try this
17:11
before purchasing it. And still if you
17:14
have problems after purchase you can
17:16
contact me and I will help you setting
17:18
up this project. And uh if you want to
17:20
deploy this project it's very simple by
17:23
purchasing domain name you can simply
17:26
build this project react chase project
17:29
by simply executing npm run build. So
17:32
this will create a dist folder like
17:34
this.
17:37
You can see that the project project is
17:39
building. It will create this dist
17:41
folder.
17:44
like [snorts] this. So this will create
17:46
the minified code for you. So you will
17:49
see that
17:51
the project has been built. It will
17:53
create this assets folder which will
17:55
contain the minified CSS and the
17:57
JavaScript code. And that's all. So this
17:59
is the front end code will be there. And
18:02
now this is the back end code. So now
18:04
you just need to upload the API folder
18:06
into your hosting plan and then this
18:09
dist folder.
18:12
So still if you have issues in
18:14
deployment after you purchase it you can
18:17
contact me. I will help you deploy this
18:20
application to a real domain name. So
18:22
thank you very much guys for watching
18:23
this video. Please hit that like button,
18:26
subscribe the channel and I will be
18:28
seeing you in the next live stream.