---
title: "Viewer content state (3.x)"
description: "Reading the Viewer's current IIIF content state, as JSON and base64. Clover 3.x (@samvera/clover-iiif), the earlier version, kept for reference."
url: https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/viewer/content-state
version: "3.x, the earlier version, superseded by Clover 4"
---

> This page documents **Clover 3.x**, `@samvera/clover-iiif`, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: [Get started](https://clover.iiif.library.northwestern.edu/docs).

## Viewer (Content State)

This is a helper page to demonstrate the retrieving the current IIIF Content State of a Viewer component.

A temporal `PointSelector` without annotation body text appears as a timestamp-only seek control in the Annotations tab. Points at `0` seconds are supported. If body text is supplied, it appears alongside the timestamp.

IIIF Manifest or Collection

IIIF Manifest or Collection

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

### Current Content State

This section displays the raw JSON and base64 encoded JSON of the IIIF Content State for this Viewer instance. Preview the current content state of the Viewer component, which includes information about the currently displayed canvas, zoom level, and other relevant details. This can be useful for debugging or for saving the state of the viewer.

[Preview Content State →](https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/viewer)

**Body text**

Enter any body text to see how it is displayed in the viewer. Text longer than a few hundred characters may not display correctly, because browsers limit URL length.

**base64 Encoded JSON**

**Raw JSON**

### Demo Usage

```jsx
export const handleContentStateCallback = ({ encoded, json }) => {
  console.log({
    encoded, // base64 encoded JSON
    json, // raw JSON
  });
};
 
<Viewer
  contentStateCallback={handleContentStateCallback}
  options={{
    canvasHeight: "640px",
    openSeadragon: {
      gestureSettingsMouse: {
        scrollToZoom: false,
      },
    },
    showIIIFBadge: false,
  }}
/>;
```