Up next in 10
Buy the full source code of application here:
https://procodestore.com/index.php/product/react-js-canva-clone-image-pdf-graphics-editor-using-fabric-js-canvas-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you a React
0:04
Canva clone that I developed using the
0:07
uh Polo Tono SDK. So as you can see, I
0:12
am running this application on localhost
0:14
3000. If you don't know about this SDK,
0:17
Polo Tone,
0:19
it's a famous SDK for building out
0:22
graphical applications. So if you just
0:25
search for this, this is their official
0:27
website. And uh I have used this
0:32
I have integrated their editor to build
0:34
out a complete coding applications. So
0:37
this is actually a reacts project. Here
0:40
you can see these are all the source
0:41
code files. If you need the full source
0:44
code the link is given in the
0:45
description. You can directly purchase
0:46
it. After purchasing it you will get
0:48
this zip file and these are all the
0:51
source code files inside ReactJS. You
0:53
can even add additional features as
0:55
well. So let me just go through the
0:57
application. So once you load this, you
1:00
will basically
1:02
add additional pages as well like this.
1:05
As you can see, you can change the
1:08
canvas color. Just select solid color.
1:12
We have the ability to add icons, text,
1:14
everything you can add there. It's a
1:17
complete Canva clone. All the features
1:19
are available for you. You can even
1:22
integrate your own icons as well. You
1:24
can even uh add your own images as well.
1:28
So simply select whatever image that you
1:31
want to add here. You can adjust the
1:32
size of the image like this.
1:36
So you can just see you can add
1:38
elements, remove elements.
1:42
So
1:44
you can basically remove elements by
1:47
having clicking the remove and then you
1:50
can add your own images. Then we have
1:52
the ability to add your text as well.
1:56
So it make makes it very much easy for
1:59
adding your text. Then we also have the
2:01
export functionality. So if you do need
2:03
to export this to a image file, click
2:05
the download PNG button. So here you can
2:08
make your thumbnails. You can even
2:10
export this to PDF as well. So as you
2:13
can see the it will export this to a PDF
2:17
file as well. So all these features are
2:19
available. You can also export this to a
2:21
HTML GIF file. All these export options
2:24
are available. So we have used this in
2:27
polono SDK inside ReactJS for building
2:30
this Canva clone. [snorts] If you do
2:32
need the source code of this, the link
2:34
is given. You can directly purchase it.
2:36
This is the full directory structure of
2:38
the ReactJS project. As you can see the
2:41
application is divided into multiple
2:43
components here. This is for download
2:45
button, file, menu, subscription model,
2:47
top bar. These are various sections of
2:50
this application.
2:53
And once you download the source code,
2:56
uh it's very easy. You simply need to
2:59
have NodeJS installed. After that,
3:01
simply say npm run start. So this will
3:04
start your application
3:06
locally at localhost 3000. And you will
3:10
also be able to deploy this application
3:12
as well. It's very simple. So it will
3:15
actually start your application at
3:17
localhost 3000 and you also have various
3:21
templates as well. You can individually
3:27
select whatever template that you want
3:29
to edit. You can edit the text of the
3:31
template. If you don't like the color,
3:34
you can even change the color. You can
3:36
customize all these templates to make
3:39
your social media graphics very easily.
3:42
You can replace the image as well. You
3:44
can apply effects as well. Different
3:46
kinds of effects, blur, brightness,
3:49
everything are there.
3:51
And we also have the option to animate
3:54
the text as well. So if you click
3:56
animate, you can basically rotate the
3:59
text and then click.
4:03
So all these features are available. The
4:05
photographs are powered by Unsplash API.
4:08
It is coming through icons as well. Icon
4:11
finder. So various kinds of APIs are
4:13
integrated inside this project and here
4:16
you can select your own images as well.
4:18
So if you want to
4:23
remove this just put your own image
4:25
right here you can even do that as well.
4:28
So it's very easy.
4:36
So definitely check out this Canva clone
4:38
editor. Uh the link is given in the
4:41
description. You can purchase the source
4:43
code.