Up next in 10
Build a PDF.js PDF Editor With Flip Book Effect Using Turn.js & With Advanced Controls in Browser
Dec 13, 2025
Buy the full source code of the application at Paypal in USD Currency here:
https://procodestore.com/index.php/product/build-a-pdf-js-pdf-editor-with-flip-book-effect-using-turn-js-with-advanced-controls-in-browser/
Show More Show Less View Video Transcript
0:04
Uh hello friends today in this live
0:06
stream we will basically talk about a
0:08
advanced PDF editor with the the help of
0:12
PDF.js
0:15
library. So basically guys this is the
0:17
application that I developed here. You
0:19
will see that it basically have this
0:21
nice little effect out there which is
0:23
which is the flip book effect right
0:25
here. So you can basically have this
0:28
effect right here guys. So we are using
0:30
turn.js. This is basically the library
0:32
which is used to implement this flip
0:36
book effect. So if you just write turns.
0:38
So this is page flip effect. So you can
0:41
make any sort of flip book effect right
0:44
here. So you can see with the help of
0:46
this mouse you can basically turn the
0:49
pages right here. So whatever pages are
0:51
there inside this PDF document here you
0:53
will see that you can do like this. This
0:56
is from left to right, from right to
0:58
left. So this is basically the editor
1:00
guys. Various functionalities are
1:02
supported. You can search for the things
1:05
out there inside the page. Let's suppose
1:07
I want to search it. You can see
1:11
automatically syntax highlighting is
1:13
also there. You can highlight all here
1:15
like this with different colors. You
1:16
will see that match case all that stuff
1:19
is already built in. It's a fullyfledged
1:23
editor guys. You will see that it will
1:24
automatically do that for you also. You
1:27
can see that. So it shows you the total
1:30
number of pages which are present inside
1:32
the PDF document. So we are on the
1:34
eighth page. So you can go to the ninth
1:36
page, 10th page. So in the sidebar also
1:39
a short little preview of the pages are
1:41
also shown to you. So you can directly
1:43
go to a particular page inside the PDF
1:45
document. So if you just click it right
1:47
here, you will see that and right here
1:50
you can also go full screen. So you can
1:52
see you can even read the PDF document
1:54
as full screen. All the source code guys
1:57
is given in the description of this live
1:59
stream. You can basically get that. You
2:01
can see how easy it is to implement this
2:04
PDF editor. It is built using PDFJS
2:07
which is a PDF document library.
2:11
So you can see that this page flick
2:13
effect is there. So this is nice little
2:17
effect right here. we will see that we
2:18
can control this
2:21
and then basically you can also directly
2:23
open any sort of file here that you want
2:25
to do. You can pick any sort of PDF file
2:27
that you need to load here. So now you
2:29
can see this PDF file is loaded. So with
2:32
the help of this button you can click
2:34
this file picker and you can choose any
2:36
sort of PDF document that you want to do
2:38
this. So right here
2:48
so any sort of PDF documents you can
2:50
select here.
2:53
You can see that this is the only
2:56
contain two pages out there. This is the
2:57
first page. This is a second page. You
2:59
can see that
3:03
and also guys you can directly print
3:05
here also with the help of a button. So
3:07
if you click on this print button you
3:09
will see automatically this print button
3:11
will be there. So you will be able to
3:13
select which of the pages you want to
3:15
print here. You can even select color
3:17
print out or black and white. So
3:19
directly it is happening inside the same
3:21
editor guys. It's a fully fleshed editor
3:23
which does the all the things
3:25
automatically for you. Automatic zoom is
3:28
also supported guys. You will see you
3:29
can even zoom inside the documents as
3:31
well with the help of this plus icon
3:33
like this.
3:35
So this zoom level is also there. You
3:37
will see that automatically whichever
3:39
zoom level that you want to have presets
3:41
are also available.
3:46
So you can see that and some more
3:49
options are also there guys. You can
3:50
rotate your document clockwise. You can
3:53
see that counterclockwise also you also
3:57
have this text selection tool guys.
4:00
Basically you can select to uh the text
4:02
here with the help of this tool right
4:04
here.
4:06
And one one other tool is there which is
4:08
the hand tool. This is basically the
4:10
hand tool guys.
4:12
And with the help of this hand tool you
4:14
can move to any part of the document
4:17
with this hand tool.
4:20
And also we have horizontal scrolling.
4:23
So if you want the pages in the PDF
4:25
document to be in the vertical manner,
4:27
you can have vertical scrolling. And
4:29
same we have horizontal scrolling as
4:31
well. So now the pages will be in the
4:33
horizontal. You can see one after the
4:36
other. This is horizontal scrolling
4:39
and
4:41
you can see wrapped scrolling is also
4:43
present here.
4:45
And document properties it will show you
4:47
the document properties guys. The file
4:50
name, file size, creation date,
4:52
modification date, creator, reducer, all
4:56
these details will be printed out inside
4:58
this dialogue window. So all these
5:00
details uh all these options are there
5:03
inside this fully fleshed PDF editor
5:05
guys. You can go to the description and
5:07
you can basically get the source code if
5:10
you want that all the JavaScript HTML
5:13
code will be provided alongside with
5:15
this demo.
5:17
So thank you very much for watching this
5:19
video and I will be seeing you in the
5:21
next live stream.