Preview

Previews are a way to create short-lived URLs that can be shared with others.

In order for Previews to work, you need to provide an endpoint to save to.

We offer a package that makes it easy to set up a preview server that can be either a memory store or a custom implementation.

Usage with NextJS

npm i @manifest-editor/iiif-preview-server

To use the preview server with NextJS, you first need to create an endpoint in your app/ directory.

For example: app/iiif/[...slug]/route.ts

import { createIIIFPreviewNextApiHandler } from "@manifest-editor/iiif-preview-server/next-app-router";
 
const routes = createIIIFPreviewNextApiHandler({
  apiPath: "/api/iiif",
});
 
export const dynamic = "force-dynamic";
 
export const GET = routes.GET;
export const POST = routes.POST;
export const PUT = routes.PUT;
export const DELETE = routes.DELETE;
export const HEAD = routes.HEAD;
export const OPTIONS = routes.OPTIONS;

Then you can add the following preview configuration to use it in your editor:

{
  id: "iiif-preview",
  type: "iiif-preview-service",
  label: "IIIF Preview",
  config: {
    url: "/api/iiif/store",
  },
},

Now the other previews that you configure will use this endpoint to save and load data.

If you want to implement the preview server yourself, you can read the RFC here

Adding custom viewers

Here is the default configuration that you can use and adapt:

const previews: PreviewConfiguration[] = [
  {
    id: "theseus",
    type: "external-manifest-preview",
    label: "Theseus",
    config: {
      url: "https://theseusviewer.org/?iiif-content={manifestId}&ref=manifest-editor",
    },
  },
  {
    id: "universal-viewer",
    type: "external-manifest-preview",
    label: "Universal viewer",
    config: {
      url: "https://uv-v4.netlify.app/#?iiifManifestId={manifestId}",
    },
  },
  {
    id: "mirador-3",
    type: "external-manifest-preview",
    label: "Mirador 3",
    config: {
      url: "https://projectmirador.org/embed/?iiif-content={manifestId}",
    },
  },
  {
    id: "annona",
    type: "external-manifest-preview",
    label: "Annona",
    config: {
      url: "https://ncsu-libraries.github.io/annona/tools/#/display?url={manifestId}&viewtype=iiif-storyboard&settings=%7B%22fullpage%22%3Atrue%7D",
    },
  },
  {
    id: "clover",
    type: "external-manifest-preview",
    label: "Clover",
    config: {
      url: "https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content={manifestId}",
    },
  },
  {
    id: "delft-viewer",
    type: "external-manifest-preview",
    label: "Delft viewer",
    config: {
      url: "https://delft-viewer.netlify.app/#manifest={manifestId}",
    },
  },
  {
    id: "iiif-preview",
    type: "iiif-preview-service",
    label: "IIIF Preview",
    config: {
      url: "/api/iiif/store",
    },
  },
  {
    id: "raw-manifest",
    type: "external-manifest-preview",
    label: "Raw Manifest",
    config: {
      url: "{manifestId}",
    },
  },
];

Configuration Resource creators