Up next in 10
I Built this Next.js PDF Canvas Editor Passive Income 10$/Month Web App Using react-pdf in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-next-js-pdf-canvas-editor-passive-income-10-month-web-app-using-react-pdf-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 nextjs
0:05
PDF editor that I developed in the
0:07
browser so you can see I'm running it on
0:10
locally and uh so this application
0:14
allows you to actually select any PDF
0:16
document and edit it so let me just
0:19
select uh if I press this button I can
0:23
select any PDF documents so as I select
0:25
the PDF document you will see the PDF
0:27
document will display right here and we
0:29
have all these controls out there we
0:30
have the previous button we have the
0:32
next button and it actually shows you
0:34
the page number the active page number
0:37
so it actually calculates total number
0:39
of pages this is showing the page first
0:41
of the total Pages which is two and this
0:45
is a simple PDF viewer right here and we
0:48
have a set of controls out there so the
0:50
first control if you want to hide
0:52
something so let's suppose if you want
0:54
to blur something in the PDF document so
0:57
now let's suppose this text I want to
0:59
hide this so we can use this blur tool
1:02
which is available so just press this
1:04
tool and simply select the
1:07
portion and you can see the text has
1:10
been blurred you can do it one more time
1:14
and it this will add this white
1:15
background color so now this text is
1:17
completely hidden so nobody can see this
1:20
text and similarly we can do this on
1:23
multiple areas that you want to hide the
1:26
text in the PDF document so this is a
1:28
very important use case if you want to
1:32
hide something in the PDF document and
1:35
then we have the second tool which is
1:37
the text tool so if you want to add some
1:39
text in the PDF document you simply
1:41
click on that and here you can add your
1:43
own text like this modify this so after
1:48
modifying the PDF document so we have
1:50
the save PDF button right here so if you
1:53
click the button right you will see the
1:55
uh changes will be saved and the
1:57
download will be taken place and you can
2:00
see all the changes that you have done
2:02
is reflected back in the output file so
2:05
in this way you can easily modify your
2:07
PDF document using this Advanced editor
2:10
so it actually works in the browser this
2:12
is the most uh advantage of this editor
2:15
using it so if you are interested in
2:17
purchasing this source code the link is
2:19
given in the description so it is
2:21
actually using the latest version of uh
2:25
nextjs if you see that uh it is using
2:28
the 15.03 version and we are using some
2:31
third party dependencies for using for
2:33
making this editor first of all react
2:37
PDF PDF lib and also we are using
2:41
fabricjs which is the animation library
2:43
of JavaScript so it's a canvas based PDF
2:46
editor where you select the PDF file it
2:49
displays it right in the browser then we
2:51
have these set of controls out there so
2:54
the link is given in the description you
2:56
can go to my website procore.com and uh
2:59
purchase it after you purchase it you
3:01
will automatically be redirected to
3:03
Google Drive where you will actually get
3:04
the zip file and you just need to
3:07
extract the zip file which will actually
3:09
contain this directory structure so each
3:11
component is divided into you can see
3:13
the whole application is divided into
3:15
multiple components which are coded
3:17
inside
3:18
typescript so if you are a student
3:21
colleg goinging student this will be a
3:22
great starting point project right here
3:25
you will see you will get to know about
3:27
how I build this complete editor from
3:29
scratch
3:30
you will see each component is divided
3:32
into multiple files right here and now
3:35
to run this locally it's very easy so
3:37
once you download uh the source code
3:40
from Google drive you simply run the
3:42
command npmi to install the nodejs
3:45
modules which are mentioned in the
3:46
package.json
3:48
so this will create this node modules
3:51
folder and then you execute this command
3:53
npm run Dev so this will start the
3:56
development server Local Host 3,000
4:00
and you can see we are running this
4:02
application
4:04
locally
4:06
so application is quite simple you
4:09
select the PDF document that you want to
4:11
select then it will display and then you
4:14
can add text by simply clicking on that
4:17
you can navigate to The Second Page by
4:19
click the next page here also you can do
4:22
the same thing you can modify something
4:24
or hide something and you can
4:27
add click on save PDF and the modified
4:31
file you will
4:32
see the changes have taken place so it's
4:36
a very minimalistic PDF editor but it
4:38
does the job pretty perfectly it it's
4:41
very fast as well it's a static website
4:43
and you can place advertisements once
4:46
you purchase you can deploy this
4:47
application the deployment command is
4:49
quite simple mpm run build so if you
4:53
build out this project you can purchase
4:54
a domain name just uh deploy this very
4:58
easily and let me show you some passive
5:01
income that I'm earning from this tool
5:03
so if I have approved my domain on
5:05
iso.com you can see daily I'm earning
5:08
some passive income by placing
5:10
advertisements you can see that per day
5:12
and AdSense as well so I also have
5:14
AdSense approved as well so you can see
5:16
the day-to-day analysis of this you can
5:19
see per day basis I'm earning this
5:21
passive income so you can even do that
5:24
as well so after purchasing it you will
5:26
get full commercial right to actually
5:28
use this source code or modify the
5:29
source code as well so if you want to
5:31
actually modify this application to add
5:34
additional features so this is actually
5:37
the application you can directly
5:38
purchase it the link is given in the
5:40
description and thank you very much guys
5:43
for watching this video and also check
5:45
out my website free mediat tools.com
5:47
which contains thousands of tools
5:50
regarding audio video and image and I
5:52
will be seeing you in the next video
#Flash-Based Entertainment
#Business & Productivity Software
#Development Tools
#Other