> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/advanced/reader-mode.md).

# Reader mode

Enhance your reading experience with Reader mode, a feature that makes documents more flexible and easier to read. Learn how to enable and use Reader mode in WebViewer for a seamless reading experienc

Reader mode, also known as reading or reflow mode, makes the document more flexible and easier to read. Apryse is able to extract the reflowable layout of each page in a PDF document as HTML format, and then combine them into one single view. It also supports zooming to increase the font size and page navigation to jump to a particular page.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-9c3daf4b4092bb61aa68c9a28194618e53d8072b%2F5acfd3c3dc4dad71652f051c7bab2ca336e2b253-2678x1304.png?alt=media)

## How to enable Reader mode feature

Reader mode is available from WebViewer v7.1, and this feature is disabled by default currently. To enable it, you need to set the constructor option `fullAPI: true`, and you also need to enable the reader mode button in the UI.

For example:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(
  {
    path: '...',
    initialDoc: '...',
    fullAPI: true
  },
  document.getElementById('viewer')
)
  .then(instance => {
    instance.UI.enableElements(['readerPageTransitionButton']);

    ...
  });
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(
  {
    path: '...',
    initialDoc: '...',
    fullAPI: true
  },
  document.getElementById('viewer')
)
  .then(instance => {
    instance.enableElements(['readerPageTransitionButton']);

    ...
  });
```

{% endcode %}
{% endtab %}
{% endtabs %}

## How to get into Reader mode in WebViewer

Click the `View Controls` button, then under `Page Transition` section click the `Reader` button.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-13b56aa78404631d0db639587483b94ec6bcc362%2Fad7c4084b605375e910133da92af0dc702df3166-498x422.png?alt=media)

## Loading reader mode outside of WebViewer's default UI

Apryse implements reader mode using the [webviewer-reading-mode](https://www.npmjs.com/package/@pdftron/webviewer-reading-mode/) module in the default UI. However this module can be loaded independently outside of WebViewer's UI as well. It takes a [PDFDoc](https://sdk.apryse.com/api/web/Core.PDFNet.PDFDoc.html) object, [PDFNet](https://sdk.apryse.com/api/web/Core.PDFNet.html) and it can display the document in reader mode in the DOM element you specify.

For example:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <script src="./lib/core/webviewer-core.min.js"></script>
  <script src="./lib/core/pdf/PDFNet.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./lib/webviewer-reading-mode.js"></script>
</head>

<body>
  <div id="wv-reader-mode" style="height: 500px;width: 1000px;border: 1px solid grey;"></div>

  <script>
    Core.setWorkerPath('./lib/core');
    const wvReadingMode = WebViewerReadingMode.initialize(PDFNet);

    PDFNet.initialize(undefined, 'ems').then(() => {
      const main = async () => {
        try {
          wvReadingMode.render(
            PDFNet.PDFDoc.createFromURL("./TestFile.pdf"),
            document.getElementById('wv-reader-mode'),
            {
              pageNumberUpdateHandler: (pageNum) => {
                console.log(`Current page number: ${pageNum}`);
              }
            }
          );
        } catch (err) {
          console.log(err);
        }
      };
      PDFNet.runWithCleanup(main);
    });
  </script>
</body>

</html>
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <script src="./lib/core/CoreControls.js"></script>
  <script src="./lib/core/pdf/PDFNet.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./lib/webviewer-reading-mode.js"></script>
</head>

<body>
  <div id="wv-reader-mode" style="height: 500px;width: 1000px;border: 1px solid grey;"></div>

  <script>
    CoreControls.setWorkerPath('./lib/core');
    const wvReadingMode = WebViewerReadingMode.initialize(PDFNet);

    PDFNet.initialize(undefined, 'ems').then(() => {
      const main = async () => {
        try {
          wvReadingMode.render(
            PDFNet.PDFDoc.createFromURL("./TestFile.pdf"),
            document.getElementById('wv-reader-mode'),
            {
              pageNumberUpdateHandler: (pageNum) => {
                console.log(`Current page number: ${pageNum}`);
              }
            }
          );
        } catch (err) {
          console.log(err);
        }
      };
      PDFNet.runWithCleanup(main);
    });
  </script>
</body>

</html>
```

{% endcode %}
{% endtab %}
{% endtabs %}

The module also supports APIs like `goToPage`, `setZoom`, etc. More [details about the APIs](https://www.npmjs.com/package/@pdftron/webviewer-reading-mode/).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/advanced/reader-mode.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
