Canvas Panel

Canvas Panel is a user interface component that renders a IIIF Canvas. It is the core component in many of the viewing and annotation tools that we build.

Canvas Panel is a user interface component that renders a IIIF Canvas. It is the core component of many of our viewers, editors and annotation tools.

It can be used to create a very simple IIIF viewer in just a few lines of code. And it also makes the creation of new and varied viewing experiences for IIIF much faster.

Historically, digital object viewers make use of an underlying deep zoom library like OpenSeadragon or Leaflet to render book pages, paintings and maps in a smooth deep zoom interface. But a IIIF Canvas is often more complex than just a single image. There might be many images, layered on top of each other and/or in different parts of the scene. There may be textual and other forms of data in the scene, such as comments and transcriptions, from humans or OCR processes.

Canvas Panel aims to be the component that takes care of every possible layout scenario that a IIIF Canvas can support, with a simple but powerful API to build applications that interact with that layout. This makes building viewers easier, because the IIIF Presentation API, in the form of the Canvas resource, has provided a standardised way of describing the layout - therefore, the complex business of managing that layout can be encapsulated in a component with a friendly API.

For static scenes, this makes development simple. Just as you would pass a tile source to a deep zoom viewer like OpenSeadragon, you can pass a IIIF Canvas to Canvas Panel and it will render it. For more complex applications, that require ongoing communication between the Canvas and its containing application (events in the Canvas and events in the containing viewer require each to react to the other), Canvas Panel aims to encapsulate the complexities to provide as clean a development experience as possible.


Canvas Panel is compatible with all versions of the IIIF Presentation API, including 3.0. Internally, it always uses version 3.0, converting incoming resources to that format.

More on Canvas Panel

Canvas Panel on GitHub

The Canvas Panel Site contains demos and documentation.

There is also a Developer Stories narrative that we are using to understand the interaction patterns that Canvas Panel needs to support.

Help us develop Canvas Panel further

Canvas Panel already provides a shortcut to viewer construction. We'd like it to support every possible scene that a IIIF Canvas can offer. If you have some specific requirements for the road map, get in touch!