Up next in 10
Build a PHP 8 Canva Clone PDF Editor in Browser Using HTML & Javascript + LIVE Deployment & Hosting
Feb 28, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-php-8-canva-clone-pdf-editor-in-browser-using-html-javascript-live-deployment-hosting/
Live Demo of App:
https://marksheetgenerator.com/pdfeditor/
Show More Show Less View Video Transcript
0:00
Uh hello guys in this video I'll show
0:02
you I built out a Canva clone kind of a
0:05
PDF editor directly inside PHP
0:08
and inside HTML CSS and JavaScript. So
0:11
we are running it on exam control panel
0:13
locally and in this video I will also
0:15
show you live deployment and also I will
0:19
be deploying on the shareo shared
0:21
hosting plus a domain name as well. So
0:23
we are running it this locally. As you
0:26
can see this is the PDF editor where you
0:29
can edit your PDF files similar to
0:31
Canva. So this is actually the full
0:33
directory structure of this PDF editor.
0:36
So if you need the source code of this,
0:37
the link is given in the description.
0:39
You can directly purchase it. So after
0:42
you purchase it, you will get the source
0:44
code from Google Drive automatically. So
0:46
once you uh uh download the source code,
0:50
this is actually the main file if you
0:52
want to run it locally. So we are having
0:54
this exam control panel
0:57
and uh we are running it localhost PDF
1:01
editor. This is the interface which
1:02
looks something like this. So here you
1:04
simply select whatever PDF file you want
1:06
to select
1:08
and after that the PDF will load. Right
1:11
here you have all the tools right here
1:12
to actually select add text images.
1:16
So right here you can see the actual PDF
1:19
file render. You can actually have all
1:22
the pages here. This is a dark mode as
1:25
well. Then we have this functionality to
1:28
add text here image.
1:30
So once you click the add text button.
1:33
So here you can add text increase the
1:35
phone size as well.
1:39
So you can just see here it's very easy
1:42
and then you also have the ability to
1:45
actually annotate using the pen tool.
1:49
You can change the color as well.
1:52
You can go to the next page do the
1:54
modification similarly. So select the
1:58
pen tool.
2:00
You also have the ability to actually
2:02
select
2:14
So here you can add image images as
2:17
well. Adjust the size
2:22
and then you also have ability to draw
2:25
signature as well. Insert digitally
2:27
sign.
2:32
After you make the modification, you can
2:34
export your PDF. You will see all the
2:36
changes will be reflected back here.
2:39
So you can add additional features as
2:42
well. Once you purchase a source code,
2:44
you will have actually a full source
2:45
code. You can see it's divided into its
2:47
appropriate PHP files.
2:50
It's also using HTML, CSS, JavaScript.
2:53
So it's very easy to for you to deploy
2:56
as well. Let me just deploy it to a real
2:58
domain name. So we have this marksheetg
3:01
generator.com website. So this is my
3:03
website. So I will simply upload this
3:06
live.
3:08
So once you are inside the
3:12
you simply go to your shared hosting. So
3:15
public html folder and right here you
3:18
create a new folder right here. Let me
3:20
call this as PDF editor.
3:23
So after selecting that you actually
3:26
upload all the files of that.
3:30
So once you purchase it it's easy for
3:32
you to deploy this as well. Go to exam
3:35
ht docs. This is the folder that you
3:38
will get after you purchase it. Simply
3:41
need to select this folder. Now what you
3:43
can do you can upload entire folder. So
3:48
just
3:52
select this entire folder, click on
3:54
upload and upload all the files. So it
3:56
will actually upload.
4:02
So here you actually I think I already
4:05
created this folder.
4:08
So
4:09
sorry let me delete this folder for from
4:11
here.
4:16
I think I already have this folder. So
4:19
what I will do I will simply upload this
4:22
entire folder.
4:25
Simply upload. So so once you do this
4:29
that folder will be uploaded. As you can
4:31
see PDF editor it has all the files
4:34
here. Now you can easily access it
4:37
inside marksheet generator.com
4:41
since it is a ph P php based website
4:44
app. You can directly access it at
4:47
marksheetg generator.com/pdfed
4:50
editor. So now you can see it is
4:51
successfully deployed and
4:54
I have given the link in the description
4:56
in the video. You can actually try this
4:58
before purchasing it. So you can
5:01
actually try out the live demo here. So
5:03
once you load the PDF file you can see
5:06
again you can add text
5:10
you can annotate change the color
5:12
everything you can do
5:18
this is a select tool and here you can
5:20
see
5:22
so here you actually can select the
5:25
images as well so and then you click
5:28
export and then you just need to select
5:32
the location and
5:37
so the PDF is successfully modified. So
5:40
it's actually a Canva clone PDF editor
5:42
entirely built in PHP and also I have
5:46
deployed this to a real domain name plus
5:48
to a shared hosting. So if you're
5:51
interested in purchasing it, you can the
5:55
link is given in the description. If you
5:57
still face any problem, I will
5:59
definitely help you in deploying and
6:01
running this application. You can add
6:03
additional features as well. And this is
6:06
actually the main file here. So you can
6:08
see that this is actually all the source
6:10
code.
6:17
So it's well documented. You will get
6:19
step-by-step instruction on how to run
6:21
and deploy this application once you
6:24
purchase it. So the link is given.
6:28
It has all the features right here
6:29
inside the toolbar to add text, images,
6:32
annotate
6:35
and then you have the export button as
6:37
well. So
6:42
I've given the link to try this demo
6:46
this application live. You can also zoom
6:49
in, zoom out
6:54
and it's completely responsive as well.
6:56
It basically runs perfectly on desktop,
6:58
mobile, tablet, all the devices. So you
7:01
will not face any problem in running
7:04
this. So you can actually earn a lot of
7:07
passive income from this tool by
7:09
purchasing a domain name and actually
7:13
deploying this. Uh this will actually
7:16
make you a lot of revenue as well and
7:19
you can modify it, add additional
7:21
features as well. You can do all sort of
7:23
stuff.
7:34
So definitely try this.