> 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/adjusting-layout-zoom.md).

# Adjusting layout and zoom using the Document Viewer

Discover how to adjust layout and zoom effortlessly with the Document Viewer. Explore APIs for changing display modes, setting zoom levels, and enhancing your viewing experience. The Apryse Web SDK st

The [DocumentViewer](https://sdk.apryse.com/api/web/Core.DocumentViewer.html) class and object helps to facilitate rendering the document in the default UI and as well as a custom UI. It also provides the APIs to adjust aspects of the viewing experience, such as switching to single page mode or changing the zoom level.

## Display Modes

Working with display modes refers to working with how the document is displayed in the viewer. This refers to the `Page Transition` and `Page Layout` options in the viewing options of the default WebViewer UI.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-765decf4b4d5f8ce2589f75c92c66ba33b57e8bf%2F5477670f49d9aab51ff3ae9917aa4a5a41cadf2e-212x378.png?alt=media)

There are a few modes supported by default:

* `Single` - Displays one page at a time.
* `Continuous` - Displays all the pages in a scrolling view in one column.
* `Facing` - Displays up to two pages at a time, side by side.
* `FacingContinuous` - Displays all pages in a scrolling view in two columns.
* `Cover` - Displays all pages in a scrolling view in two columns. The first row has a single page in the second column.
* `CoverFacing` - Same as the Cover display mode except that it is not a scrolling view.
* `Custom` - Any custom display mode.

These values are found in an enumeration called [`DisplayModes`](https://sdk.apryse.com/api/web/Core.html#.DisplayModes) under the `Core` namespace.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const mode = Core.DisplayModes.Continuous;
```

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

[DisplayModes](https://sdk.apryse.com/api/web/Core.html#.DisplayModes)

## Reading the current display mode

The DocumentViewer provides an API to read the current display mode. This is done through the `DisplayModeManager` and calling the `getDisplayMode` API.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const displayModeManager = documentViewer.getDisplayModeManager();
const mode = displayModeManager.getDisplayMode();
```

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

[DocumentViewer.getDisplayModeManager](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getDisplayModeManager) [DisplayModeManager](https://sdk.apryse.com/api/web/Core.DisplayModeManager.html) [DisplayModeManager.getDisplayMode](https://sdk.apryse.com/api/web/Core.DisplayModeManager.html#getDisplayMode__anchor)

## Setting the display mode

Just like reading the display mode, there is a `setDisplayMode` API to set the display mode. We can use the `DisplayModes` enumeration to help.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
documentViewer.addEventListener('documentLoaded', () => {
  const displayModeManager = documentViewer.getDisplayModeManager();
  displayModeManager.setDisplayMode(new Core.DisplayMode(documentViewer, Core.DisplayModes.Single));
});
```

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

[DisplayModeManager.setDisplayMode](https://sdk.apryse.com/api/web/Core.DisplayModeManager.html#setDisplayMode__anchor) [Core.DisplayMode](https://sdk.apryse.com/api/web/Core.DisplayMode.html#main) [Core.DisplayModes](https://sdk.apryse.com/api/web/Core.html#.DisplayModes)

## Zooming into content

Alongside changing how a document is viewed, the DocumentViewer also allows you to change the zoom level programmatically. This is done with the `zoomTo` API function:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
documentViewer.zoomTo(1.5); // Zoom amount: 150%
```

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

[DocumentViewer.zoomTo](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#zoomTo)

In some cases, you may want to zoom towards the cursor location. This is possible as well with the `zoomToMouse` API without having to work too much with coordinates. It does take additional parameters to offset the zoom to avoid any toolbars or scrollbars as necessary.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
documentViewer.zoomToMouse(
  1.5, // Zoom amount: 150%
  0,   // Optional: Offset from the mouse X location
  0,   // Optional: Offset from the mouse Y location
);
```

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

[DocumentViewer.zoomToMouse](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#zoomToMouse)

The DocumentViewer also handles page rotations as well. You can read more about in our [page rotation guide](/web/page-manipulation/rotate.md).

{% hint style="info" %}
Zooming in and out triggers the [zoomUpdated](/web/events/viewer-events.md#display-events) event.
{% endhint %}

## Customizing the scroll view element

If you have built a custom UI, chances are you already have your own scroll view element to customize. If you want to further customize the scroll view element from the default WebViewer UI, this is completely possible by calling the `getScrollViewElement` API:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const scrollView - documentViewer.getScrollViewElement();
scrollView.style.borderColor = '#FF0000';
scrollView.addEventListener('scroll', (event) => {
  // Do something on scroll
});
```

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

[DocumentViewer.getScrollViewElement](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getScrollViewElement)

## Next steps

Read more on how to make your own [custom UI](/web/ui-customization/core.md) with your own features!


---

# 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/documentviewer/adjusting-layout-zoom.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.