Up next in 10
I Built this React PDF Editor Passive Income 10$/Month Web App Using jsPDF & Fabric.js in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-react-jspdf-fabric-js-adobe-acrobat-pdf-editor-passive-income-10-monthapp-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 PDF
0:05
editor that I developed inside react CH
0:09
uh it can be used as a nice little
0:10
passive income tool where you can
0:12
actually put advertisements and on a lot
0:13
of advertisement revenu so this is
0:15
actually the application I'm running it
0:17
on Local Host
0:19
8080 and this is a PDF editor something
0:22
like Adobe Acrobat you have seen it's a
0:26
very nice editor where you can edit PDF
0:28
documents so it's a free alternative to
0:31
that and you can see here you will
0:33
upload or select any PDF file so let me
0:36
select a PDF file here you will see the
0:38
PDF file all the pages will be loaded
0:41
here you'll get this nice little
0:43
notification and then you will have a
0:45
nice little editor right here where you
0:48
can actually draw something we can
0:49
annotate you can see that we can modify
0:53
it by putting underlines here you can
0:56
even change the color here from this
0:58
Color Picker you can pick any color of
1:00
your choice so you can see that you can
1:03
annotate then we have the second option
1:05
to actually add text so if you click the
1:08
add text button you will able to add
1:09
some text right here in the PDF
1:13
document you have seen these rich
1:16
controls out there you can make the text
1:18
bold
1:19
italic can even change or put links as
1:23
well so click on insert and you will see
1:26
the text will be inserted you can change
1:29
just the size of the text by increasing
1:34
it then we have the option to add shapes
1:37
we can add rectangle we can add circles
1:40
as well so this is rectangle then we can
1:42
even add
1:44
circles and we can fill these with
1:47
different colors so if you want to fill
1:55
out can just click the fill
1:58
color so you can fill out these shapes
2:01
with different colors then we have the
2:02
add image button so what this actually
2:05
do is actually you will be able to add
2:09
images so you can see you can able to
2:12
add images as well so you can adjust the
2:15
size of this image by these nice little
2:18
controls then if you want to hide
2:20
something in the PDF document we have
2:21
this nice little tool right here which
2:23
is white out so what this actually does
2:26
is actually you select the portion that
2:28
you want to hide and it will actually
2:30
put a white background right here so now
2:32
the you can't see the text here because
2:35
we uses this tool here you can change
2:37
the opacity of this tool the size of the
2:39
tool as well so then you have the save
2:41
button so to save the changes so page
2:44
one is edited here saved and now if you
2:47
want to export this changes click the
2:49
export button that is available right
2:52
here and the PDF file will be download
2:54
it with the modified changes right here
2:56
so only two pages are there so we made
2:58
the changes on the first page you will
3:00
see all the page all the changes that we
3:02
made are successfully exported to a PDF
3:05
document so this is a nice little tool
3:07
that guys I developed Adobe acrobate
3:09
clone in react CH and you can put
3:12
advertisements and earn a lot of Revenue
3:14
as well if you want to deploy this
3:16
website on your domain name
3:19
so you can go to the second page as well
3:22
you can see this is now the second page
3:23
you can also view the document right
3:26
here you can put any changes you can put
3:29
uh annotate it you can put shapes you
3:33
can add images so this is actually the
3:36
source code guys I have given the link
3:38
in the description of the video you can
3:40
directly purchase the full source code
3:42
here so after you purchase it you will
3:45
get a zip file which will actually
3:47
contain the full directory structure of
3:48
this react project let me show you which
3:50
dependencies we have used so we have
3:53
used some uh very famous open- Source
3:56
packages for building this first of all
3:58
we used uh the react which is if you see
4:03
we have used these react
4:07
packages and you can see we are using
4:10
the latest version which is 18 react 18
4:12
so it is compatible with the latest
4:14
version and then we have used some PDF
4:17
related packages JS PDF is one package
4:20
which is really popular for PDF
4:23
manipulation so it's a JavaScript
4:26
package open source library for
4:28
manipulating PDF then we have used also
4:31
fabricjs as well which is also a
4:33
JavaScript open source package for
4:35
manipulated graphics and we have also
4:38
used Tailwind CSS as well you can see
4:41
that so quite a number of packages so
4:43
you will see the full directory
4:44
structure of this so each component has
4:46
a specific file attached to it you will
4:48
see that so each UI component has a
4:51
specific file here so it's coded inside
4:54
typescript so if you know some kind of
4:56
coding knowledge you can modify the
4:58
source code as well and add some
4:59
additional features as well so this will
5:02
be the full source code you will get
5:03
after the payment you will see all the
5:05
pages are
5:08
there so now if you uh purchased it you
5:12
first of all need to install the modules
5:15
so just npmi and just this will create
5:18
this nodejs modules
5:21
folder and uh just execute this command
5:24
and after that you can easily run this
5:26
locally by executing the command which
5:28
is npm run
5:30
Dev so I've have already done this so
5:34
you after that you just need to run the
5:36
command here npm run Dev so this will
5:40
start the development
5:42
server you can see it will start your
5:45
application Local Host 8080 so you can
5:48
actually
5:51
go you can see that so application will
5:54
start right here and uh just select any
5:57
PDF document and you can see see it will
6:00
be
6:00
loaded and if you want to deploy this uh
6:04
the deployment process is very simple
6:05
you build your project by executing the
6:07
build command npm run build so this will
6:10
build all your assets into a single disc
6:13
folder so that you can actually upload
6:16
that folder whenever you are deploying
6:18
this application to any hosting it can
6:21
be a shared hosting it can be any
6:23
hosting so it's very easy so you can see
6:25
it is deploying it for production so in
6:28
this way
6:30
you can deploy this application really
6:32
easily and put advertisements and earn a
6:35
lot of passive income so you can see it
6:37
is rendering it so now it has created
6:40
this disc folder if you see it contains
6:43
the minified HTML then we have this
6:45
JavaScript files right
6:48
here so this folder you just need to
6:50
upload this and the application will
6:54
start and one more thing uh if you are
6:59
right watching this the link is given in
7:01
the description you can go to my website
7:03
Pro Cod store.com to directly purchase
7:05
the full source code of this project
7:07
which is PDF acrobat Adobe Acrobat PDF
7:10
editor clone in the browser and it's a
7:13
static app it works in the browser you
7:15
can use it unlimited number of time so
7:18
once you deploy this you can easily put
7:20
advertisements and user will come to
7:22
your website they will able to edit the
7:24
PDF very easily they need to Simply
7:28
select
7:30
the PDF file right here so whichever PDF
7:33
file they select you will see all the
7:35
pages will be loaded right here so it's
7:36
a 23 Pages we have the previous button
7:39
we have the next Button as well so go to
7:42
any page that that they want to modify
7:44
just add some
7:47
text they can even add images so it's
7:51
very simple to add all
7:55
these can see that so they can
8:00
they can add a watermark they can add a
8:02
text they can annotate anything you can
8:05
draw something highlight something you
8:07
can see that so all the operations are
8:09
supported completely you can see you can
8:11
hide something if you want to hide this
8:14
you can simply select the portion and
8:15
this will be hidden you can hide
8:18
multiple things like this just select
8:21
and it will be
8:22
hidden so guys the link is given in the
8:25
description you will get the full source
8:27
code you will be able to run it and you
8:29
will be able to understand how I build
8:31
this project from scratch and if you are
8:33
a developer it's developed in
8:36
typescript and
8:39
uh you can see that so let me show you
8:42
some passive income that I'm earning
8:43
from this I basically approved this uh
8:47
tool I basically deployed this tool on a
8:49
website that I own let me show you the
8:52
stats for that website uh I have iso.com
8:57
which is also a ad Network looks similar
8:59
to AdSense let me show you the data for
9:03
this the passive income data so you can
9:05
see on each day I'm earning this passive
9:07
income by putting advertisements such as
9:09
the tools like this that I showed you
9:12
you can even put advertisements and also
9:14
earn so this is also from coming from
9:16
ISO you can see each day purpose we are
9:18
earning this passive
9:20
income so if you're interested guys the
9:23
link is given in the description this is
9:25
a full PDF editor you will get after you
9:29
purchase it and uh we have used these
9:32
open source packages JS PDF if you know
9:34
it's a PDF document manipulation library
9:37
in JavaScript and also
9:39
fabricjs which is also a JavaScript
9:42
library related to Canvas so we have
9:45
used these open source packages to build
9:47
this awesome looking PDF editor so if
9:49
you're interested you can directly go to
9:51
the description and purchase the F
9:53
source code and I will be seeing you
9:56
guys in the next video please check out
9:57
my website as well free Med tools.com uh
10:01
which contains thousands of tools
10:02
regarding audio video and image and I
10:05
will be seeing you in the next video
#Business & Productivity Software