Up next in 10
I Built this Next.js Advanced PDF Editor Passive Income 10$/Month Web App Using PDF-LIB in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-next-js-advanced-pdf-editor-passive-income-10-month-web-app-using-pdf-lib-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 advanced
0:06
PDF editor that I developed in next CH
0:09
uh it's a static page it's a static
0:12
website tool single page application
0:14
which works entirely in the browser no
0:16
server site code is required for this
0:18
and it's really fast PDF editor and you
0:21
can see I'm running it on locally Local
0:23
Host 3000 and it's a PDF editor so here
0:25
you need to Simply select your PDF
0:28
document that you are working with
0:30
you can
0:31
open so let me select a sample PDF
0:34
document that you want to edit here so
0:36
as you select the PDF document you will
0:38
see the PDF document will be rendered
0:41
right here and uh you will see this is
0:44
the first page it can navigate to the
0:45
second page as well so if you want to
0:48
make changes right here so we have I
0:50
made this controls out there which you
0:52
can add text you can add images as well
0:55
so there are buttons available so once
0:58
you click the add text button so you can
1:01
navigate to any location in the PDF and
1:03
you can just click on this so as as soon
1:06
as you click you will see this
1:07
notification appearing here you can
1:10
enter the text here and then click okay
1:12
so you will see the text will be added
1:14
in the PDF document add that location
1:17
and same goes with the image as well so
1:19
click the image button and at any
1:21
location if you want to Let's suppose I
1:23
go to the next page and then I add this
1:26
location I click it and this file picker
1:28
will open so here
1:30
as I select this JPG file here you will
1:32
see the image is added so after you just
1:36
modify the PDF there is a download
1:38
button here and if you want to click
1:41
this
1:41
button just click this button and you
1:44
will see the PDF file is downloaded and
1:48
if you open this you will see the
1:49
changes are reflected back this is the
1:51
text here this is the image so it's a
1:54
single page application developed in
1:56
nextjs and uh you can purchase this
2:00
source code the link is given in the
2:02
description
2:04
and after you purchase it you will be
2:07
automatically be redirected to Google
2:08
Drive here you get the zip file here and
2:12
after you extract the zip file you will
2:14
get this directory structure so you can
2:16
just see in the components folder each
2:19
component is coded inside
2:22
typescript and if I show you the
2:25
package.json file here so we are using
2:28
the latest version of next which is
2:31
14 and we are using Tailwind CSS for the
2:34
user interface and we are using this
2:36
open source package PDF lip which is a
2:39
PDF generation
2:41
Library so you can just see here if you
2:44
just type PDF lip in Google you will see
2:46
this is an open-source package for
2:49
manipulating PDF documents
2:53
so if you want to try the live demo link
2:56
Ive also deployed this on my website as
2:59
well free media tool tools.com so on the
3:01
checkout page you will see this demo
3:03
link here so you can even try this so
3:07
just select your file right
3:10
here
3:12
so and repeat the process
3:18
here so you'll see this is actually the
3:20
tool right here so simply click this and
3:23
you will be redirected to this tool here
3:25
there is also the second functionality
3:27
which is the merge option as well so you
3:30
can even merge multiple documents if you
3:33
have into a single one so there is a
3:35
second section
3:37
so here you need to
3:39
select multiple PDF so if I select these
3:43
two
3:44
files so you can see it actually merged
3:47
both these documents into a single one
3:49
so you can see the
3:54
pages and then you can simply click the
3:57
download button so it will merge both
3:59
these
4:00
documents into a single one so the
4:02
output file is downloaded so you can see
4:05
that so it also does the merging
4:07
functionality as Wells alongside with
4:09
the uh editing one to add text and
4:13
images so you can try this tool on my
4:18
website before purchasing it so if you
4:20
do like it then you
4:25
can can see that so
4:30
can go to the second page and here if
4:31
you want to add images just simply click
4:35
uh go to the location where you need to
4:37
add this and then click on that location
4:39
using the mouse as soon as you click it
4:42
you will see this file picker opened
4:44
automatically and then here you can
4:45
select the image so it will be added at
4:48
that exact location
4:51
so you can control the zoom level as
4:53
well by using the slider as well so you
4:55
can see that
5:03
so this is actually the next JS source
5:07
code you will get you can even modify
5:10
the source code as well and add
5:11
additional features on top of this as
5:13
well so you can see that it's very easy
5:15
to read if you are a developer you will
5:20
understand so you can see user
5:23
interface so the code is not minified so
5:27
code is written in a proper way so that
5:30
you can understand the code and modify
5:32
this as well so to add additional
5:35
features and if you want to deploy this
5:37
tool on your own domain name it's very
5:39
easy come to the terminal and uh if
5:42
you're running it for the very first
5:43
time you just need to say npmi so this
5:46
will actually install all the nodejs
5:48
modules and it will create this folder
5:50
here on the left hand
5:54
side you do need to do this after this
5:57
for running it locally npm run Dev so
5:59
this will start the development
6:02
server if you want to run it locally but
6:05
if you want to deploy this it's very
6:08
simple npm run build command so just run
6:11
the command it will create a next. next
6:16
folder and you just need a simple VPS or
6:22
a hosting which supports next years it
6:24
can't be deployed on a shared hosting
6:26
but you need a specialized hosting for
6:28
next years so you can easily deploy this
6:30
tool as well so I'm using a VPS virtual
6:33
private server for deploying this
6:35
application so it can't be deployed on
6:37
the shared
6:40
hosting so after you deploy this you can
6:42
put advertisements as well to ear
6:44
passive income as well so let me show
6:46
you some proof here you can see I'm
6:48
using AdSense and I'm earning some
6:50
passive income daily from this tool
6:53
so and also from iso.com as well you can
6:57
see that
6:58
so it's it's really easy you build the
7:00
tool you deploy this and you put
7:03
advertisements and the main thing is
7:06
that it doesn't use any API it's not it
7:10
doesn't have any kind of restriction you
7:11
can use it unlimited number of
7:14
time because it trunks in the
7:17
browser so as soon as you choose it you
7:20
have these two options available so the
7:22
tool is really fast as well so you can
7:25
try this tool on the website and then
7:28
you can purchase it and thank you very
7:30
much for watching this video and I will
7:32
be seeing you in the next one