Triiiceratops IIIF Viewer

A modern, lightweight IIIF viewer built with Svelte and OpenSeadragon. It is distributed as a web component that can be dropped into any HTML page or frontend framework.

View Live Demo

Features

• Compatible with IIIF presentation API versions 2–3
• Flexible Gallery: Explore all canvases in a manfifest in a flexible thumbnail gallery that can be a floating window or docked to any of the four sides of the viewer.
• Annotations: Handles IIIF annotatios.
• Theming: Theme support with Tailwind CSS and DaisyUI.
• Search: IIIF Search support.
• i18n: Internationalization support with Paraglide. Translations are provided for English and German (so far).

Current Limitations

• Does not fully support multiple images per canvas.
• Does not support IIIF collection navigation.
• IIIF Annotation Creation is not supported.

Usage

Web Component

The viewer is available as a web component that works in any framework or static HTML.

Via CDN:

<script type="module" src="https://unpkg.com/triiiceratops/dist/triiiceratops-element.js"></script>
<link rel="stylesheet" href="https://unpkg.com/triiiceratops/dist/triiiceratops-element.css">

  <triiiceratops-viewer manifest-id="https://iiif.wellcomecollection.org/presentation/v2/b18035723"></triiiceratops-viewer>

<style>
  triiiceratops-viewer {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

Svelte Component

If you are using Svelte, you can import the component directly.

Installation:

pnpm add triiiceratops

Usage:

<script>
  import { TriiiceratopsViewer } from 'triiiceratops';
</script>

<!-- Container must have height -->
<div style="height: 600px;">
  <TriiiceratopsViewer 
    manifestId="https://iiif.wellcomecollection.org/presentation/v2/b18035723" 
  />
</div>

Development

pnpm install

pnpm dev           # Start local demo server
pnpm build:all     # Build library, web component, and demo
pnpm test          # Run unit tests
pnpm test:e2e      # Run end-to-end tests

License

MIT