header image with InDesign logo and HTML5 logo

By creating a flipbook directly from InDesign—rather than from a secondary format like PDF—you’ll be able to take advantage of all the rich interactivity from InDesign that isn’t supported in PDF.

How to create an HTML5 Flipbook from InDesign in a nutshell

  1. Build your document with Adobe InDesign
  2. Add interactivity using InDesign’s built in panels (Buttons, Animation, Object States, Hyperlinks, Video, etc)
  3. Install in5 (InDesign to HTML5) and restart InDesign
  4. Export your document to HTML5 with in5 and choose Flipbook with Page Peel as the Page Format

To understand these steps in detail, continue reading below.

Short on time? Download these steps as a one-page cheatsheet.

Build your document with Adobe InDesign

InDesign's pages panel

If you’re a designer, then it’s likely that you already use InDesign.

InDesign is the world’s number one page layout tool.

If you’re a designer and you don’t know how to use InDesign, it’s time to start learning, because this knowledge will be expected of you in nearly any design job.

So why start building a page layout anywhere else?

Add Interactivity

InDesign's animation panel

Because you’re going to export directly from InDesign, you can take advantage of all of the interactivity built into InDesign.

  • Buttons and Form Elements
  • Animation
  • Timing
  • Hyperlinks
  • Audio
  • Video
  • Object States

in5 also supports Overlays (from DPS/AEM Mobile) and has additional interactive capabilities (like 3D Flip Cards).

Install in5 (InDesign to HTML5)

in5 is the export tool that will let you create a flipbook directly from InDesign.

To install in5

  1. Get in5 from the download page
  2. Unzip the package and double-click on the installer that matches your system (Mac/Win).
  3. Follow the onscreen instructions.
  4. Restart InDesign.

Export as an HTML5 Flipbook

Once in5 is installed, you can choose in5 > Easy Export Wizard and select the Flipbook option (then Pixel Perfect text).

flipbook option in easy export window

The Easy Export Wizard will then export your document with all the options associated with a digital flipbook magazine format.

flipbook with page peel option in the user interface of the export dialog

Alternatively, if you want to customize your export options more, you can choose in5 > Export HTML5 with in5… to export your document instead.

In this case, choose the Flipbook with Page Peel option from the Page Format menu before clicking OK to export.

When the export is done, you can choose Open in Default Browser to see your HTML5 flipbook.

Bonus: Responsiveness and Scaling to the Browser

Your flipbook will be responsive by default.

In narrow (portrait) browser windows, only one page will be shown.

In wider (landscape) browser windows, a two-page spread will be displayed.

If you’d also like to see your flipbook layout scale proportionally to the browser window, use the Desktop Scaling and Mobile Device Viewport Zoom settings found in the Advanced section of the in5 dialog.

desktop scaling with matching mobile viewport setting in UI

Now you have a beautiful, interactive flipbook that plays well on desktop and mobile devices. 🙂

If you want to get super-responsive and create separate layouts for different devices, check out the Responsive Layouts feature.

Want a quick way to remember how to create a flipbook?

Get the one-page cheatsheet

Join the newsletter & get the InDesign Flipbook Cheatsheet

Sign up now and I'll send you these steps as a 1-page cheatsheet.

As a subscriber, I'll also send you additional InDesign and HTML tips.

Powered by ConvertKit

Join the Conversation

  1. Kobe says:

    Hello,

    I downloaded In5 but I can’t use the flipbook page, because I have to pay for it..

    1. Justin says:

      You can use the Flipbook with the demo version (or the Starter license), but you’ll be limited to 5 pages of output at a time.

  2. Carter Ambar says:

    I’ve been hearing all this talk about Flash no longer being available, and HTML5 will be taking over. I’m really concerned since now Adobe is saying Flash will no longer be supported on Android versions beyond 4.0.

    1. Justin says:

      Yes, Flash is gone. Not going, but gone. Google Chrome isn’t even going to support it on the desktop. HTML5 is now a reasonable replacement.

  3. Christy says:

    Hi i used the flipbook book option and everything is OK but it isn’t using spreadpages but single pages, although I did export File > Export HTML5 with in5… to export the document and chose the Flipbook with Page Peel. Document is layed up as spread. What did I do wrong?

    1. Justin says:

      Hi Christy,
      The flipbook format is automatically responsive. When the browser is portrait, it will only display one page at a time. To see a two-page spread, widen the browser window (or rotate the device to landscape).

      1. Christy says:

        The screen is at full width and plenty of space to show the second page as spread but it isn’t doing it. I do notice that in the folder with the html files, you have the normal index.html file but also each page has its own html file (pg43 = 0043.html).

      2. Justin says:

        Ah, you’ve exported in the multi-page format, which doesn’t support the flipbook format. Change your output setting to Web and it should work as you expect.

      3. Robert says:

        Hi Justin,

        If I pay for a PRO License and my subscription expires after a year, will my Flip Book still continue to function with all the pages? Do I need to have in5 installed for it to work? or will my Flip Books continue to work with out it after my license expires?

  4. Christopher says:

    Hello,

    First of all i would like to congratulate you for your job!
    I downloaded trial version of in5 and I created a test flipbook. I notice that in the html files all the elements are img elements. Is there any way to maintain the original elements (span, div..)?

    P.S I am intrested in a full responsive flipbook..

  5. Medhavi says:

    Can we call this flipbook document created through Adobe indesign and HTML5 with in5 in AEM. I need to create such flipbook in AEM.

    1. Justin says:

      I don’t think you can control AEM navigation like that, but you can embed in5 content within an AEM project.

  6. In what ways can HTML / 5 be used for animation ?

  7. Mauray says:

    Wow! This is amazing.
    Before I pay please can you tell me:
    1. Is there a limit on the number of pages in the magazine? I currently have 120 pages that I want to convert.
    2. Can I do single pages and double page spreads?
    Many thanks

  8. Xenia says:

    Hi,

    I’ve downloaded the test version to see whether I can create a nicely looking flipbook out of my inDesign document.
    However, whenever I try to export my document as a HTML5 with in5 my inDesign crashes. Any idea why this would happen? Has this happened to anyone before? Maybe I installed a wrong version or something?

    Thanks for getting back to me!

    1. Justin says:

      Happy to help with this!

      This is a pretty rare occurrence, so we’d need to troubleshoot it directly with you. Please contact us here and include your InDesign package:
      https://ajarproductions.com/pages/contact.php?category=in5&software_issue=bug

      Let us know if you’re using other add-ons, like Wordsflow/Docsflow.

      Thanks!

  9. Shirley Anne King says:

    I want to convert my literacy pdf into inDesign so that words, phrases, and sentences will pop-up as I direct them, and I can connect an audio clip to what pops up. Is this possible?

    1. Justin says:

      in5 does not have Read Aloud functionality (unless you embed it from another tool). You might want to check out CircularFLO. I believe that it can do this in an EPUB.

  10. Fung says:

    All linked pdf and eps files in InDesign are in low resolution after export into HTML5 by in5. Is there any

    1. Justin says:

      InDesign treats those like images. To get better output, you can increase your image quality setting:
      https://ajarproductions.com/in5course/?lesson=imagequality

  11. Stephane Martineau says:

    Hi, it works so so. The image (that was optimized in 2K become too big for the browser, the pages are turning too fast. Anyways to change all that?

  12. Basanth says:

    Hi, I am testing In5 for Arabic book which will open from right to left, do we have option to switch the page turn ?

  13. Tonya says:

    I downloaded the trial version of in5 for the page flip and interactive features in InDesign and really liked it, so I just purchased it.

    However, I want to show my client before going further, but can’t do that without uploading the assets folder and html file to my/their website. Is there a simple way to show them a sample before moving forward?

    I don’t have ready access to where these files need to be placed on my website and just want to show my client something quickly.

    1. Justin says:

      So glad to hear that you’re really liking in5! 🙂

      For quick review, I’d recommend Tiiny Host. Here are the notes from a webinar we did with them (includes a link to the webinar and discount codes): https://ajarproductions.com/webhost/in5-tiinyhost-handout.pdf

      You can use their free trial and your content will stay online for 7 days. Should work well for a quick review.

      1. Denise says:

        I have my domain names hosted on another platform already. This was sometime ago. Thank you for letting me know about this hosting company.

  14. Mark Critchley says:

    Hello, when making a flip book, does the accessibility side stay true? We are wanting to use a HTLM flipbook for a 100 page document. There will be appropriate tagging h1-h6, alt text, bookmarks etc.

  15. Mark Critchley says:

    Also can alt text be applied to moving elements, animations, videos?

  16. Gerardo says:

    Hola, hay alguna opción de idioma en español?
    Gracias

    1. Justin says:

      No. Lo siento.

Leave a comment

Your email address will not be published. Required fields are marked *