Up next in 10
Build a React.js PDF Editor to Split,Merge,Delete & Export Pages to Image Using PDF-LIB in Browser
Dec 13, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-ultimate-pdf-editor-to-splitmergedelete-export-pages-to-image-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
to this uh video. So in this video I
0:02
actually show you a free tool that I
0:06
developed and deployed it on my website
0:08
freemediatools.com. So this tool is
0:11
ultimate PDF editor. Uh if you just uh
0:14
let me show you the landing page of the
0:15
tool. So free media tools if you go to
0:18
the website at the very bottom this is a
0:21
tool ultimate pdf editor. It is coded
0:24
inside reacts and it uses PDF lib
0:27
library. And if you go to it, this will
0:29
be the landing page that you will see.
0:31
It's the ultimate PDF editor. You can
0:33
basically merge your PDF documents,
0:36
multiple PDF documents. You can split
0:38
PDF document into multiple pages. Then
0:41
you can also convert your pages into
0:43
images as well, individual pages. Then
0:46
you can delete pages. You can convert
0:47
your PDF file to text file. So drag and
0:50
drop feature is there. You need to
0:51
simply drag and drop your actual PDF
0:54
file. Select your PDF file and then the
0:56
live preview will be seen by you. You
0:58
can see that on the left hand side. So
1:00
you can navigate to any page in the PDF
1:02
document using this nice little PDF
1:05
preview live preview that you will see.
1:07
And based upon this we have different
1:09
options. We can merge PDF. We can split
1:12
this PDF into multiple pages and we can
1:14
delete pages in this PDF document or we
1:18
can convert this into text file. If you
1:20
want to convert this page into a image,
1:24
let's suppose I click this button
1:25
convert to JPG. So you will see all
1:28
these pages one by one will be converted
1:31
and you can see that. So one by one all
1:34
these pages will be converted. You will
1:36
see that
1:38
you can see that if you see all these
1:41
pages if you can open one page so
1:47
it has various pages. So one by one you
1:49
will see all these pages will be
1:51
converted. So you just need to refresh.
1:54
So if you just open this individual page
1:59
you can see that the page was converted
2:01
to p image. So it totally depends upon
2:05
how many pages are there inside. So if I
2:07
select it's a 32 mgabytes file. So
2:12
if you click this all these pages will
2:14
be converted. So you just need to wait
2:16
for the pages to complete. So then we
2:18
have the functionality for deleting
2:20
pages. So if you click this delete
2:22
pages, you will actually get a file. Let
2:25
me take a example which contains less
2:28
pages. Let me take an example
2:31
of this. So now you can see it contains
2:34
the first page, second page, third page.
2:36
So total pages in this will be I think
2:39
is four pages are there in the PDF
2:41
document. So if I want to convert this
2:44
into PDF text file. So all the text
2:47
which is written right here in this PDF
2:48
is converted into a text file. If you
2:51
try to open this you will actually see
2:53
all the text that you see is now being
2:55
converted to actual text file. So in
2:59
this way you can do it. And now if you
3:01
want to actually split this file you can
3:04
actually put a comma. You can see the
3:07
format 1 by 3. You need to page enter
3:10
page ranges. Let's suppose I want to
3:12
split this one to three 1-3.
3:17
So what does mean? It will actually
3:19
create a new PDF document which will
3:21
contains these three pages. So if you
3:22
click okay, you need to give the page
3:25
name. You can see click on okay. Now if
3:28
you if you three it has splitted my PDF
3:31
document. If I open this now you will
3:34
see this will contain the first page,
3:36
second page, third page. So total pages
3:38
is three pages. So in this way you can
3:40
split pages in the PDF document. Let's
3:43
suppose now if you want to
3:46
create multiple PDF based upon the
3:49
pages. Click on split PDF. So now what
3:52
we need to do we need to create two PDF
3:54
documents which will contain the pages
3:56
one to two and you need to put a comma
3:59
if you want to generate multiple. So one
4:01
to two and then we need the pages from 3
4:05
to four. So what this mean guys?
4:08
Basically it will split the pages into
4:11
two parts. First part will contain the
4:13
first and the second page and the third.
4:15
Second part will contain the pages from
4:17
third to fourth. So now if you click
4:19
okay this will be the two page two PDF
4:22
files will be generated. You can see
4:24
that this is a split one
4:28
split two. So if you open this now this
4:31
will contain two pages and the next one
4:35
will contain the next two pages. So it
4:37
will now contain two PDF documents which
4:39
will contain splitted the pages into two
4:42
documents. Similarly, if you click the
4:44
delete pages button, you again need to
4:46
mention the range. So you can you can
4:49
actually but just uh delete pages from
4:52
the PDF document. So you can say one I
4:56
don't want the first page put a comma
4:58
and I don't want a third page. So this
5:01
is a format 1, 3. So it will actually
5:04
remove these pages from this PDF
5:05
document edited PDF.
5:10
So now a PDF file will be downloaded but
5:13
it will not contain those pages. So it
5:15
will only contain two pages. The first
5:17
and the third pages has been removed. So
5:19
in this case you can actually remove
5:22
pages from the PDF document very easily.
5:25
And now lastly if you want to actually
5:27
merged multiple PDF document you need to
5:30
select multiple document. So what we can
5:33
do
5:35
we can select
5:39
multiple documents these two documents
5:41
that we select. So we have selected the
5:43
two documents we can simply say merge
5:46
PDF. So it will say enter the order of
5:50
PDF to merge by their numbers. So 1 2
5:53
the order is very important. If you say
5:55
2, 1, then the second PDF document will
5:59
actually come first. So click on okay.
6:02
Now the two PDF documents will be
6:04
successfully merged. This as you can see
6:07
the two documents are successfully
6:09
merged with one another. So the
6:10
resultant PDF document will contain five
6:13
pages. So in this case you can take as
6:16
many PDF documents then you can merge
6:18
it, split it, delete pages, convert to
6:21
PDF and also click on convert to JPG.
6:26
So as you click it, you will basically
6:28
see
6:30
all these pages will be converted to a
6:33
image file. You can see that. So this is
6:36
a PNG image file. So the page has been
6:38
successfully converted. And actually I
6:41
coded this inside ReactJS which is
6:44
actually a framework of JavaScript. We
6:46
have this file app.js. And if I show you
6:49
the package.json file, we are actually
6:51
using this PDF lib package. If you need
6:54
this full ultimate PDF editor source
6:56
code guys, the link is given in the
6:58
description. You can go to my website
6:59
procordstro.com. You can purchase the
7:01
full source code. The link is given in
7:03
the description. At the checkout page, I
7:05
have given the link of my tool here. You
7:08
can directly check out this tool before
7:10
purchasing it. You can use this tool. If
7:12
you are happy, then you can purchase the
7:14
full source code and you will get a zip
7:17
file from Google Drive. After you make
7:19
the payment from my website, you will be
7:22
automatically redirected to after you
7:24
after you make the payment to Google
7:26
Drive where you can actually download
7:27
the full source code. So once you
7:29
download guys, you need to open this
7:31
folder and simply type npmi. So this
7:34
command will allow you to install all
7:37
the modules which are there in the p
7:39
package.json file. So after this there
7:42
are two commands. If you want to run
7:44
this project locally inside your
7:46
machine, then you can type a command
7:48
called as npm rundev. So this will run
7:52
the development server and run your
7:54
application lo sorry npm run start sorry
7:58
npm run start. So this will start your
8:00
application locally on port number 3000.
8:04
So it will start the development server.
8:06
You will see that localhost 3000. Now
8:09
you can repeat the same process.
8:12
You can see that
8:15
click on convert to JPG. So multiple
8:17
pages will be multiple images will be
8:19
created. Each page it will get take the
8:21
screenshot. It will convert your page
8:23
into the image file. You can split the
8:25
PDF document one to three
8:29
you can see that
8:34
you can delete the individual pages. 1
8:37
35
8:40
sorry the pages you just need to make
8:43
sure how many pages are there in the PDF
8:45
document so I think there are only four
8:48
pages so you just need to mention the
8:49
pages that you don't want 1, two and now
8:54
the resulting PDF will only contain two
8:56
pages. So the two pages have been
8:57
successfully removed. So in this case
8:59
guys you can see that all the operations
9:01
are working. You can try out the full
9:03
demo. The link is will given at the
9:05
checkout page. You can try the demo
9:07
before purchasing it. And these are the
9:09
app.t CSS app.js.
9:12
So in the package.json, we are actually
9:14
using the PDF lib library. If you don't
9:16
know about PDF lib is actually a
9:19
open-source JavaScript library for
9:22
manipulating PDF documents to actually
9:24
carry out these conversions. So for
9:26
splitting, for deleting pages, for
9:28
merging PDF documents. So this is a very
9:31
good library in the client side using
9:33
JavaScript. You can also uh run it on
9:37
the server side as well using NodeJS but
9:40
uh specifically it's used on the client
9:42
side. It's a great alternative to JSPDF.
9:44
So we are using this library inside our
9:46
ReactJS project. So you can even build
9:50
this application. There is a build
9:52
command. If you want to deploy this
9:53
application, you can simply type the
9:55
command npm run build and on the left
9:58
hand side a dist folder will be created
10:01
if you want to purchase a domain name
10:02
and then you need to simply deploy this
10:04
code onto your hosting plan. [snorts] So
10:06
this will work with any hosting any
10:08
client side hosting that you purchase on
10:10
digital ocean or hostinger any ordinary
10:13
hosting it will work and you can use
10:15
this tool you can if you're applying for
10:18
a job if you are a student this will be
10:20
very helpful for you. So you will be
10:22
able to learn step by step how I
10:24
developed this project. You can also
10:25
modify this project as well and you can
10:28
earn a lot of revenue as well from
10:30
Google and ISOIC by placing
10:31
advertisements as well. It's a great
10:33
opportunity guys. The link is given in
10:35
the description. You can go to my
10:36
website and purchase the full source
10:38
code. You'll see that it has created the
10:40
build folder and it contains it
10:42
index.html file the minified code right
10:45
here.
10:47
This is actually the minified sisjs and
10:50
minified javascript. So here you can
10:53
deploy this code. So this is pdfjs work
10:56
of code right here.
10:58
So this was the overall project guys. If
11:01
you are interested the link is given in
11:03
the description and please hit that like
11:05
button, subscribe the channel as well
11:07
and I will be seeing you guys in the
11:10
next video. Until then thank you very
11:12
much.