Up next in 10
Build a Next.js Adobe Acrobat PDF Editor Clone in Browser Using PDF-LIB Library in TypeScript
0 views
Jun 19, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-next-js-adobe-acrobat-pdf-editor-clone-in-browser-using-pdf-lib-library-in-typescript/ 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/
View Video Transcript
0:00
guys welcome to this live stream so in
0:02
this live stream I'll show you a PDF
0:04
editor that I developed inside the
0:06
browser using Nex.js it's an Adobe
0:09
Acrobat PDF editor or viewer you may see
0:12
it opens your PDF documents and you can
0:15
read your PDF documents right in the
0:17
browser itself and also at the same time
0:19
you can even edit your PDF documents
0:21
right in the browser itself so this is
0:24
actually the application uh the demo of
0:26
the application looks like this uh I'm
0:29
running this on localhost 3000 and here
0:32
you just need to select a PDF file that
0:34
you want to edit so let me go to the
0:38
you can select any PDF document of your
0:41
choice as I selected this PDF file you
0:43
will see it will clearly show me how
0:46
many pages are there so it's total of
0:48
two pages we have the previous next
0:50
buttons here you can read your PDF file
0:53
directly in the browser and then we also
0:56
have the buttons for editing the PDF
0:58
files we have various tools here we can
1:01
blur sensitive information in the PDF
1:04
document we have the blur tool we also
1:06
have the erase tool as well if you want
1:08
to remove any text from the PDF file or
1:12
any object you can use the erase tool
1:15
then we also have the option to add a
1:17
text in the PDF document as well so we
1:19
have all these tools you just need to
1:21
activate these tools so if I click the
1:23
blur tool the this tool will be
1:26
activated now you just need to use your
1:27
mouse and simply tap on whichever data
1:30
that you want to blur out so as you can
1:32
see this tool has blurred out this text
1:37
and similarly you can blur some more
1:40
text
1:42
so in this easy way
1:45
you just need to use the mouse to blur
1:48
out the tools then we also have the
1:51
erase tools so this will actually remove
1:53
everything by adding a white background
1:56
so if I use the mouse here just you need
1:57
to drag the mouse on top of the element
2:01
so then again we need to go to the next
2:04
next page you will simply activate this
2:07
view mode now you can go to the next
2:10
page and then you can now let's suppose
2:13
I want to add some custom text we can
2:15
also have this custom text here let's
2:17
suppose a watermark so I can say
2:21
you can even have the color picker you
2:23
can change the color here
2:25
you can change the phone size you can
2:28
place accordingly
2:30
where you need to place it
2:33
you can increase the size here by using
2:35
these controls as well so once you are
2:37
happy click this and after that if you
2:40
are happy just click the save PDF button
2:43
so it will apply all the changes and
2:45
then download the PDF file in the
2:47
attachment so you can see all the
2:49
changes have been taking place so this
2:51
is a full project guys that I developed
2:53
in nextJS it's similar to Adobe Acrobat
2:56
it has all the tools directly in the
2:58
browser and uh this is the project if
3:01
you need the source code of this project
3:03
the link is given in the description and
3:05
you can directly purchase the full
3:06
source code of this project and once you
3:09
purchase it you will automatically be
3:11
redirected to Google Drive where you
3:13
will actually get the full source code
3:15
and let me show you the package.json
3:17
file so as you can see we are using the
3:19
latest version of uh next and react here
3:23
and for building this project we are
3:24
using two open-source packages which is
3:26
PDF lib and react pdf so these two open
3:31
packages open source packages that we
3:33
are using here
3:36
so if you are interested
3:40
in purchasing this you can uh uh the
3:45
link is given in the description you can
3:46
directly purchase the full source code
3:49
and uh
3:52
the link is given in the description so
3:54
if you are interested
3:56
in purchasing it the source code so once
4:00
you get the source code you can modify
4:01
the source code to add additional
4:02
functionalities as well and it's
4:05
developed inside JSX as you can see all
4:07
the application is divided into multiple
4:09
components and once you get the source
4:12
code just npmi command execute this will
4:16
create the node modules folder and then
4:17
say npm rundev so this will start your
4:21
development server on localhost 3000
4:24
so as you can see once you load your
4:26
application this will be the homepage
4:28
after that you select your PDF file here
4:32
and uh you can see this will load and
4:35
then we have all the options here all
4:38
these tools that I showed you the demo
4:40
so it's very easy to implement uh the
4:42
link is given guys in the description
4:44
you can purchase the full source code
4:47
you will get this zip file after you
4:49
from Google drive automatically once you
4:51
purchase it So
4:54
this is a complete tool if Thank you
4:58
very much for watching this video if you
5:01
are interested you can purchase the
5:03
source code and I will be seeing you in
5:06
the next live stream and six people are
5:09
watching the stream guys if you are uh
5:12
new to this channel please hit that like
5:14
button subscribe the channel as well
5:16
this is a full uh PDF editor tool that
5:18
I'm selling right here so it's a very
5:20
good tool here i have shown you the demo
5:22
here it's a very really very really very
5:24
really good tool here so once you load
5:27
your file here you can select your PDF
5:30
file here
5:32
and uh once the file has been selected
5:34
you can apply these modifications we
5:36
have various tools this is the blur tool
5:40
we also have the erase tool you just
5:41
need to activate the tools and then we
5:44
also have the tool for adding the text
5:46
as well so you can see
5:50
so you will get all this source code
5:52
once you purchase it the link is given
5:54
in the description so thank you very
5:57
much guys for watching this live stream