---
title: "Update view state in JavaScript PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/customizing-the-interface/viewstate/"
md_url: "https://www.nutrient.io/guides/web/customizing-the-interface/viewstate.md"
last_updated: "2026-05-15T09:08:03.720Z"
description: "Nutrient Web SDK encapsulates the entire view state inside an immutable data structure. This is accessible for you via the ViewState."
---

# View state in our JavaScript PDF viewer

Nutrient Web SDK encapsulates the entire view state inside an immutable data structure. This is accessible for you via the [`ViewState`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html). This object is a snapshot representation of the current state of the PDF viewer and can be updated using the [`Instance#setViewState`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setViewState) method. Since it’s an immutable data structure, it’s not possible to alter the view state without going through this setter:

### ES6+

```js

// You can update the `ViewState` by calling `setViewState` with the new view state.
const viewState = instance.viewState;
instance.setViewState(viewState.set("showToolbar", false));

// Or by passing in an updater that receives the current `ViewState` as an argument.
instance.setViewState((viewState) => viewState.zoomIn());

// This will NOT work because the `ViewState` is immutable.
instance.viewState.showToolbar = true;
instance.viewState.showToolbar; // => false

```

### JAVASCRIPT

```js

// You can update the `ViewState` by calling `setViewState` with the new view state.
const viewState = instance.viewState;
instance.setViewState(viewState.set("showToolbar", false));

// Or by passing in an updater that receives the current `ViewState` as an argument.
instance.setViewState(function (viewState) {
  return viewState.zoomIn();
});

// This will NOT work because the `ViewState` is immutable.
instance.viewState.showToolbar = true;
instance.viewState.showToolbar; // => false

```

The [`ViewState`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html) is implemented using the [Immutable.js] library. You can refer to the [`Immutable.Map`](https://immutable-js.com/) documentation to find out how to update the record. Here’s a list of common methods:

- `set()` Set a specific property:

  ```js

  viewState.set("currentPageIndex", 2);
  ```

- `merge()` Update multiple properties at once:

  ```js

  viewState.merge({
    showToolbar: false,
    viewportPadding: { horizontal: 0, vertical: 0 },
    scrollMode: NutrientViewer.ScrollMode.CONTINUOUS
  });
  ```

The benefit of having the complete application state encapsulated into a single data store is that it makes reasoning about the current state very easy; there’s no hidden state you need to be aware of. You can always snapshot the state and apply it at a different point in time to have the exact same visual representation of your document.

You can observe state changes using the [`viewState.change` event](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~ViewStateChangeEvent). This event will be emitted whenever the current view state changes either by the user (via clicking the UI) or via [`Instance#setViewState`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setViewState). Please refer to the [API documentation](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~ViewStateChangeEvent) to learn more about the emitting order of this `viewState.change` event and other more specific events.
---

## Related pages

- [Form Designer: Create and edit PDF form fields using JavaScript](/guides/web/user-interface/form-designer.md)
- [PDF form field date and time picker](/guides/web/user-interface/date-and-time-picker.md)
- [Custom overlays in our viewer](/guides/web/customizing-the-interface/creating-custom-overlay-items.md)
- [Create a custom toolbar in our JavaScript PDF viewer](/guides/web/user-interface/create-a-toolbar.md)
- [User interface customization in our JavaScript PDF viewer](/guides/web/user-interface.md)
- [Right-to-left](/guides/web/user-interface/rtl-languages.md)
- [Localization: Updating languages in our JavaScript PDF viewer](/guides/web/features/localization.md)
- [Create and customize redactions in our PDF viewer](/guides/web/user-interface/redaction.md)
- [Customizing the search UI in our PDF viewer toolbar](/guides/web/user-interface/search.md)
- [User interface troubleshooting](/guides/web/user-interface/troubleshooting.md)