> 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/ui-customization/zoom.md).

# Zooming in WebViewer

Enhance your user experience with WebViewer's zoom level APIs. Learn how to retrieve, set, and customize zoom levels effortlessly for a seamless viewing experience on web. The Apryse Web SDK streamlin

WebViewer provides several APIs for working with the zoom level.

## Getting the zoom level

To get the current zoom level, you can use the [`getZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.getZoomLevel) API. It will return the current zoom level value in decimal. For example, if the returned value is 0.5, it means the current zoom level is 50%.

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

```js
WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // returns the value in decimal, ex. 0.5
    console.log(instance.UI.getZoomLevel());
  });
```

{% endcode %}

[UI.getZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getZoomLevel)
{% endtab %}

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

```js
WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // returns the value in decimal, ex. 0.5
    console.log(instance.getZoomLevel());
  });
```

{% endcode %}

[UI.getZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getZoomLevel)
{% endtab %}
{% endtabs %}

To get the maximum/minimum zoom level, you can use [`getMaxZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.getMaxZoomLevel) or [`getMinZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.getMinZoomLevel). The returned value is a decimal that represents the zoom level. For example, if the returned value is 2.5, it means a 250% zoom level.

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

```js
WebViewer(...)
  .then(instance => {
    // max zoom level
    // returns 99.99, indicates the maximum zoom level is 9999% in the viewer
    console.log(instance.UI.getMaxZoomLevel());
    // min zoom level
    // returns 0.05, indicates the minimum zoom level is 5% in the viewer 
    console.log(instance.UI.getMinZoomLevel());
  });
```

{% endcode %}

[UI.getMaxZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMaxZoomLevel) [UI.getMinZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMinZoomLevel)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    // max zoom level
    // returns 99.99, indicates the maximum zoom level is 9999% in the viewer
    console.log(instance.getMaxZoomLevel());
    // min zoom level
    // returns 0.05, indicates the minimum zoom level is 5% in the viewer 
    console.log(instance.getMinZoomLevel());
  });
```

{% endcode %}

[UI.getMaxZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMaxZoomLevel) [UI.getMinZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMinZoomLevel)
{% endtab %}
{% endtabs %}

## Setting the zoom level

To modify the zoom level with code, you can simply use the [`setZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.setZoomLevel) API. It takes percentage in a string or a number as parameter.

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

```js
WebViewer(...)
  .then(instance => {
    // set the zoom level with percentage
    instance.UI.setZoomLevel('150%');
    // set the zoom leve with a number
    instance.UI.setZoomLevel(1.5);
  });
```

{% endcode %}

[UI.setZoomLevel](https://sdk.apryse.com/api/web/UI.html#.setZoomLevel)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    // set the zoom level with percentage
    instance.setZoomLevel('150%');
    // set the zoom level with a number
    instance.setZoomLevel(1.5);
  });
```

{% endcode %}

[UI.setZoomLevel](https://sdk.apryse.com/api/web/UI.html#.setZoomLevel)
{% endtab %}
{% endtabs %}

To modify the maximum/mininum zoom level, you can achieve by using [`setMaxZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.setMaxZoomLevel) and [`setMinZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.setMinZoomLevel). Similar to the [`setZoomLevel`](https://sdk.apryse.com/api/web/UI.html#.setZoomLevel), both methods take percentage in a string or a number as parameter.

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

```js
WebViewer(...)
  .then(instance => {
    // set the max zoom level
    instance.UI.setMaxZoomLevel('150%') // or instance.UI.setMaxZoomLevel(1.5)

    // set the min zoom level
    instance.UI.setMinZoomLevel('150%') // or instance.UI.setMinZoomLevel(1.5)
  });
```

{% endcode %}

[UI.setMaxZoomLevel](https://sdk.apryse.com/api/web/UI.html#.setMaxZoomLevel) [UI.setMinZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMinZoomLevel)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    // set the max zoom level
    instance.setMaxZoomLevel('150%') // or instance.UI.setMaxZoomLevel(1.5)

    // set the min zoom level
    instance.setMinZoomLevel('150%') // or instance.UI.setMinZoomLevel(1.5)
  });
```

{% endcode %}

[UI.setMaxZoomLevel](https://sdk.apryse.com/api/web/UI.html#.setMaxZoomLevel) [UI.setMinZoomLevel](https://sdk.apryse.com/api/web/UI.html#.getMinZoomLevel)
{% endtab %}
{% endtabs %}

## Customizing the zoom step

A zoom step is the percentage increase/decrease when you click the zoom in/out button in the tool bar, with the mouse wheel scrolling, or keyboard shortcuts.

WebViewer provides APIs that allows user to inspect and customize the zoom step size.

To inspect the configuration of zoom step size, you can use the [`getZoomStepFactors`](https://sdk.apryse.com/api/web/UI.html#.getZoomStepFactors) API.

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

```js
WebViewer(...)
  .then(instance => {
    const zoomStepFactors = instance.UI.getZoomStepFactors();
    console.log(zoomStepFactors);
    // zoomStepFactors has the structure as follow:
    //  [
    //    {step: 7.5, startZoom: 0},
    //    {step: 25, startZoom: 80},
    //    {step: 50, startZoom: 150},
    //    {step: 100, startZoom: 250},
    //    {step: 200, startZoom: 400},
    //    {step: 400, startZoom: 800},
    //    {step: 800, startZoom: 3200},
    //    {step: 1600, startZoom: 6400},
    //  ]
  });
```

{% endcode %}

[UI.getZoomStepFactors](https://sdk.apryse.com/api/web/UI.html#.getZoomStepFactors)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    const zoomStepFactors = instance.getZoomStepFactors();
    console.log(zoomStepFactors);
    // zoomStepFactors has the structure as follow:
    //  [
    //    {step: 7.5, startZoom: 0},
    //    {step: 25, startZoom: 80},
    //    {step: 50, startZoom: 150},
    //    {step: 100, startZoom: 250},
    //    {step: 200, startZoom: 400},
    //    {step: 400, startZoom: 800},
    //    {step: 800, startZoom: 3200},
    //    {step: 1600, startZoom: 6400},
    //  ]
  });
```

{% endcode %}

[UI.getZoomStepFactors](https://sdk.apryse.com/api/web/UI.html#.getZoomStepFactors)
{% endtab %}
{% endtabs %}

In this example, the returned `zoomStepFactors` array indicates each zoom step is 7.5% when the zoom level is between 0% and 80%. Furthermore, each zoom step will be 25% when the zoom level is between 80% and 150%.

To change the zoom step, you can use the [`setZoomStepFactors`](https://sdk.apryse.com/api/web/UI.html#.setZoomStepFactors) API. For example, if you want the zoom step to be more precise as 5% between zoom level 0% to 200%, and 10% as the zoom step after zoom level 200%, simply pass the `zoomStepFactors` object describing the various zoom behaviors at various levels.

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

```js
WebViewer(...)
  .then(instance => {
    instance.UI.setZoomStepFactors(
      [
        {
          step: 5,
          startZoom: 0
        },
        {
          step: 10,
          startZoom: 200
        }
      ]
    );
  })
```

{% endcode %}

[UI.setZoomStepFactors](https://sdk.apryse.com/api/web/UI.html#.setZoomStepFactors)
{% endtab %}

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

```js
WebViewer(...)
  .then(instance => {
    instance.setZoomStepFactors(
      [
        {
          step: 5,
          startZoom: 0
        },
        {
          step: 10,
          startZoom: 200
        }
      ]
    );
  })
```

{% endcode %}

[UI.setZoomStepFactors](https://sdk.apryse.com/api/web/UI.html#.setZoomStepFactors)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The units of the `step` and `startZoom` parameters are percentages, ex. 5 means 5%. The `zoomStepFactors` array should always contain a `zoomStepFactor` object with `startZoom` set to 0. Otherwise, an error will be printed.
{% endhint %}


---

# 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/ui-customization/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.