> 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/documentviewer/documentviewer.md).

# Overview of the DocumentViewer

Discover how to work with documents using the DocumentViewer object in WebViewer SDK. Learn about manual instantiation, adjusting layout and zoom, and more. Start optimizing your document viewing expe

The WebViewer SDK provides an important object, the [DocumentViewer](https://sdk.apryse.com/api/web/Core.DocumentViewer.html). When loaded, the WebViewer instance provides a DocumentViewer object, along with other [objects and namespaces](/web/what-is-webviewer/usage.md), that is wired to the viewer that was just mounted. The DocumentViewer allows you to work with documents without working in detail with WebViewer Core.

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

```js
WebViewer(...)
  .then(instance => {
    // The documentViewer is wired to the mounted viewer
    const { documentViewer } = instance.Core;

    // Change to the second page when a document loads
    documentViewer.addEventListener('documentLoaded', () => {
      documentViewer.setCurrentPage(2);
    });
  });
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [DocumentViewer.setCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setCurrentPage__anchor)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    // The docViewer is wired to the mounted viewer
    const { docViewer } = instance;

    // Change to the second page when a document loads
    docViewer.on('documentLoaded', () => {
      docViewer.setCurrentPage(2);
    });
  });
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [DocumentViewer.setCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setCurrentPage__anchor)
{% endtab %}
{% endtabs %}

## Manual Instantiation

The DocumentViewer class is found in the [Core namespace](/web/what-is-webviewer/usage.md#core-namespace). You can instantiate it without any additional parameters but you should set the viewer and scroll view elements that it should work with. This is only necessary when creating your own custom UI which you can read more about in our [guide](/web/ui-customization/core.md#creating-your-own-ui-using-webviewer-core).

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

```js
const documentViewer = new Core.DocumentViewer();
```

{% endcode %}
{% endtab %}

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

```js
const documentViewer = new CoreControls.DocumentViewer();
```

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

## Get Started

[Working with documents](/web/documentviewer/working-with-documents.md) Working with documents using the DocumentViewer object

[Adjusting layout and zoom](/web/documentviewer/adjusting-layout-zoom.md) Setting the viewing layout using the DocumentViewer object

[Adjusting layout and zoom](/web/documentviewer/interacting-with-tools.md) Showing how to use the default tools with the DocumentViewer object


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/web/documentviewer/documentviewer.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.