View state in our JavaScript PDF viewer

Nutrient Web SDK stores the full viewer state in an immutable data structure. Access this state with ViewState.

ViewState represents a snapshot of the current PDF viewer state. Update it with the Instance#setViewState method.

Because ViewState is immutable, you can’t change it directly. Use setViewState to apply changes.

// 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

// 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

Nutrient Web SDK implements ViewState with Immutable.js(opens in a new tab). Refer to the Immutable.Map(opens in a new tab) documentation for supported update patterns.

Use these common methods to update the view state.

• Use set() to set one property.

  viewState.set("currentPageIndex", 2);

• Use merge() to update multiple properties at once.

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

A single state object helps you reason about the current viewer state. You don’t need to track hidden state across separate objects.

You can snapshot the state and apply it later. This restores the same visual representation of the document.

Use the viewState.change event to observe state changes. Nutrient Web SDK emits this event when the user changes the UI or when your code calls Instance#setViewState.

Refer to the ViewStateChangeEvent API documentation for event order details and related events.