Skip to Content
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.

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.

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 →

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.

Demo Usage

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,
  }}
/>;