Up next in 10
Build a Next.js Canva & Adobe Photoshop Clone Image Editor in Browser Using TypeScript
Mar 13, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-canva-adobe-photoshop-clone-image-editor-in-browser-using-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:03
in this video, I'll show you I built out
0:05
a NexJS uh Canva clone or Adobe
0:08
Photoshop clone editor directly in the
0:11
browser. So it can be a great clone. So
0:14
right here, this is actually the
0:15
interface of the editor similar to
0:18
Canva, Photoshop. So we are running this
0:20
application locally. So you basically
0:24
first of all select a image file
0:25
whatever image file you want to edit. So
0:28
after I select that image file, it will
0:30
be added in the canvas right here. Now
0:32
you can actually control the placement
0:34
and size of this image using your mouse
0:37
very easily. And on the left hand side,
0:40
you have a bunch of options. You can
0:42
crop your image by clicking the crop
0:44
button. And you can just see how easy it
0:46
is to actually crop the image using
0:49
these buttons. And then we the second
0:52
tool we have is the text. We click on
0:55
this and we we can basically click on
1:00
this button add text box. Here we can
1:02
manipulate the size color of the text
1:04
background color everything. So once you
1:07
click the text will be added. Now you
1:10
can edit the text.
1:13
So really easily you can manipulate the
1:16
color of the text as well.
1:18
Uh then after that we have options here
1:20
to export this to a PNG, JPG, WEBP file.
1:24
So it's basically coded directly inside
1:26
NextJS. So I have given the code you can
1:29
directly purchase the full source code.
1:31
I've given the link in the description
1:33
of the video. So it's actually made
1:35
inside uh NextJS. As you can see
1:39
we are using the latest version to build
1:41
out this Canva clone or Photoshop clone
1:44
editor. So all the files are divided
1:47
into its appropriate TypeScript files
1:50
here. As you can see everything which
1:52
customizable. So once you get the source
1:54
code you will be able to add to the you
1:57
can even modify or change any of these
1:59
settings inside the code and you will
2:01
able to see how I coded this. And once
2:05
you click the export button you have
2:07
this download button appearing right
2:09
here. You can click download and then it
2:11
will export everything into a single
2:14
image file. PNG image file. As you can
2:16
see, you can even export this to a JPG.
2:20
So, this will export this to a JPG file
2:23
here.
2:26
So, you can see that and WEBP file as
2:29
well. We can even see change the quality
2:31
as well.
2:33
So, if you want to add a background
2:36
color, you can add this.
2:39
Just choose a color here.
2:44
So [snorts] it's really easy. You can
2:45
just see.
2:49
Then we also have if you want to draw
2:51
something you can use this pencil I
2:53
pencil tool here. So just click the
2:56
pencil icon and now you can draw
2:58
something on the image here. You can
3:00
draw anything right here. You can change
3:02
the color everything you can using this
3:05
color picker. So the color is
3:07
customizable. You can even add any sort
3:09
of shape as well.
3:11
So it's really easy. We also have the
3:14
eraser tool as well to erase something.
3:16
Then we can even apply some effects to
3:19
the image here. Brightness, contrast
3:21
level, saturation. So all these effects
3:24
buttons are available.
3:26
You can manipulate the brightness,
3:28
contrast level, saturation, and black
3:30
and white effect you can apply.
3:36
So it's an all-in-one image editor tool
3:40
which offers you multiple operations and
3:42
it's directly developed in nextJS. We
3:44
are running it application locally here.
3:47
It's very easy to run this locally and
3:49
also you can deploy this to a real
3:51
domain name as well. So it's a single
3:54
page application. All the processing is
3:55
happening directly in the browser. So
3:58
there is no back end to this
4:00
application. So it's a single page front
4:03
end application.
4:05
which offering you all these controls
4:07
out there. So once you select the image
4:09
then you can either crop you can add a
4:13
text box really easily. So
4:20
so once you start the you basically
4:23
select the image
4:28
and once the image is selected then you
4:30
can make modifications. So, it's an
4:32
all-in-one image editor. So, you can
4:35
select aspect ratio, you can draw
4:37
anything on the screen, you can place
4:39
this image accordingly.
4:41
So, if you're interested guys, I've
4:43
given the link in the description. You
4:45
can definitely check this out.
4:51
So, this is actually the brush size you
4:53
can control.