How to Create HTML5 Page Flip from Your PDF Publication

Creating a HTML5 page flip from your pdf publications that works on mobile phone devices can be quite a challenge. It can take weeks to months if you are starting from scratch , but don't worry there are a few libraries out there that can hugely assist with this. If you are here to create great page flips either for your magazine or catalog then continue reading.


  1. 1
    Split your publication into individual pictures. There are various software programs that can do this for you online.
  2. 2
    Rename the converted images in the following format: [fileName]-[page_number].[format] e.g. (book-0.png).
  3. 3
    Insert the images generated from step 1 into a folder. Make sure you name the folder something you can remember, e.g. "book1".
  4. 4
    Create another folder. Rename the newly created folder to the name of your publication, e.g. "issue3".
  5. 5
    Put the folder containing the converted images into the folder created during the previous step.
  6. 6
    Get JavaScript HTML5 libraries that can do the page flip effect for you. A good library to use is "". If you decide to use livelypaper library, then copy the file livelypaper.js into the folder created in step 4. Then proceed to create an html file the file should have JavaScript code similar to the following ready(function() Lpflipbook({ filePath: "book", startPage: 0, endPage: 4, format: "png", fileName: "page" }); });
  7. 7
    Insert a div tag inside the html file.
  8. 8
    Done. Your flipbook should be ready. Upload the files to your web server!


  • The flipbook will only work if served from a webserver.

Article Info

Categories: Pictures | Software