Up next in 10
Build a React.js Adobe Acrobat PDF Editor Editor in Browser Using PDF-LIB & pdfjs-dist Library in TS
Dec 7, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-adobe-acrobat-pdf-editor-editor-in-browser-using-pdf-lib-pdfjs-dist-library-in-ts/
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 uh welcome to this video.
0:02
So in this video I'll show you a Adobe
0:05
Acrobat
0:06
clone that I developed which is actually
0:09
a PDF editor directly in the browser
0:11
which allow you to uh annotate or
0:14
highlight any sections of your PDF
0:17
document and edit those sections. So I'm
0:19
running this application on local host
0:21
as you can see it's developed inside
0:23
ReactJS
0:25
and this is actually the interface of
0:27
the application similar to Adobe
0:28
Acrobat.
0:30
It's a fully completely offline browser
0:33
based editor. So here you first of all
0:35
will select your PDF file whichever PDF
0:38
file you want to
0:40
uh edit. Once you select the PDF file
0:43
all the pages will be loaded. So as you
0:46
can see for example in this PDF file
0:48
there are two pages. So both the pages
0:50
are rendered. So this is you can read
0:53
your PDF documents as well. Now you also
0:56
have basic controls such as zoom in zoom
0:59
out all these controls. Then apart from
1:01
that we have controls similar to Adobe
1:04
Acrobat. We can add text images. We can
1:07
annotate.
1:09
Let me show show you one by one. So once
1:12
you click the text button, you will be
1:14
able to control the size
1:18
by using this slider
1:21
and just add something here. You can
1:24
even change the color of the text as
1:26
well. Now you can basically write once
1:28
again
1:30
like this. Once you make the changes,
1:32
you can go to the next page. So here you
1:35
basically can annotate something by
1:37
using the draw tool. Now you can draw
1:40
something like this, annotate something,
1:42
highlight something. Right here we also
1:45
have uh option to add different kinds of
1:48
shapes. Oval shape, circle shape, uh
1:52
check shape, cross shape. Then we also
1:55
have the option to actually add image.
1:58
So once you click the option to add
2:00
image,
2:02
you basically will select your image.
2:10
So basically you can place wherever you
2:12
want to place your image. You can even
2:15
adjust the size as well. So it's really
2:17
easy guys. I developed this application
2:20
in ReactJS. All the source code I've
2:22
given in the description of the video.
2:24
You can directly purchase the full
2:25
source code. So once you purchase it,
2:28
you will automatically get a zip file
2:30
from Google drive automatically.
2:32
So this is the full directory structure
2:34
of this project here. Each and every
2:36
code is uh divided into the TypeScript
2:39
file here. Each and every component is
2:41
divided as you can see. And if I show
2:44
you the package.json file, we are using
2:46
React here, the latest version. And we
2:48
are also using PDF lib and react- PDF.
2:53
These are the two uh external libraries
2:56
that we are using. PDF lib which is a
2:58
javascript pdfbased generation library
3:01
and also react pdf pdfjs disc as well we
3:06
are using. So these three external
3:08
libraries that we are using which are
3:10
completely open source.
3:12
So once you are happy making those
3:15
changes we have this button available to
3:18
us save PDF. you basically can save your
3:21
modified PDF. So it will actually have
3:25
all the changes that you have done like
3:28
adding text uh highlighting text adding
3:31
images all those changes will be
3:33
reflected back in the output file here.
3:35
So once you come to the application it's
3:37
a single page application all the
3:39
processing directly happens in the
3:41
browser. So you just need to select your
3:44
PDF file whichever PDF file that you are
3:47
editing. After you select that PDF file,
3:50
you can even read that PDF file as well
3:52
by using this uh PDF viewer. And at the
3:56
same time, you can also make changes
3:59
similar to Adobe Acrobat. You can
4:01
annotate something using this color
4:04
picker. You can actually change the to
4:07
any color. For example, I want to change
4:10
to this color. So, you can just see you
4:13
can navigate to the next page, highlight
4:15
something again. You can use the text
4:18
tool to add the text. Enter it and then
4:22
the text will be placed again. You can
4:25
add multiple text. Just click it and
4:29
then the text will be added. So this is
4:31
a full demo that I'm showing you guys
4:33
the application. If you are interested,
4:35
you can directly purchase it for adding
4:38
the image. You can actually place it
4:40
using your mouse, adjust the size. And
4:44
then we also have the tool right here to
4:47
this tool which actually will hide
4:50
something. Read to eraser tool. So if
4:54
you want to erase something from the PDF
4:56
document, you can place it and now
4:58
everything is now hidden. So you can't
5:01
see anything right here. So now if you
5:04
want to hide something, you can use this
5:06
tool. Just you basically can hide
5:09
something. After that you can click the
5:12
save PDF button. So I've given the link
5:14
you can directly purchase the full
5:16
source code of this project to actually
5:20
edit your PDF files directly in the
5:22
browser. It's coded inside React PDF
5:24
lib. We are using React PDF PDFJS.
5:28
These are the libraries that we are
5:30
using. It's a full project. It's coded
5:33
inside Typescript. So once you get the
5:35
source code you will be able to modify
5:37
the source code or add additional
5:38
features on top of it as well. So this
5:41
is a complete react project. So I have
5:44
given the link you can directly purchase
5:46
the full source code.