Configuration reference


export interface Config {
  previews: PreviewConfiguration[];
  behaviorPresets: string[];
  defaultPreview: string | null;
 
  urlState?: {
    getSearchParam: (key: string) => string | null;
    replaceSearchParam: (key: string, value: string | null) => void;
  };
 
  editorConfig: {
    All?: EditorConfig;
    Manifest?: EditorConfig;
    Canvas?: EditorConfig;
    Annotation?: EditorConfig;
    AnnotationPage?: EditorConfig;
    AnnotationCollection?: EditorConfig;
    Range?: EditorConfig;
    Collection?: EditorConfig;
    ContentResource?: EditorConfig;
  };
 
  editorFeatureFlags: {
    enableMultiImageCanvases?: boolean;
    enableMultiMediaCanvases?: boolean;
  };
 
  // Internationalisation options
  i18n: {
    defaultLanguage: string;
    availableLanguages: string[];
    advancedLanguageMode: boolean;
  };
 
  // Options when exporting from Vault.
  export: {
    baseIdentifier: string | null;
    version: 3 | 2;
  };
 
  creators: Record<string, Record<string, unknown>>;
 
  plugins?: {
    apps?: Record<
      string,
      {
        enabled?: string[];
        disabled?: string[];
        settings?: Record<string, Record<string, unknown>>;
      }
    >;
  };
}
 
export interface EditorConfig {
  singleTab?: string;
  fields?: string[];
  hideTabs?: string[];
  onlyTabs?: string[];
}

Host-managed URL state

By default, the manifest preset reads and replaces its canvas and leftPanel search parameters using the browser History API. Hosts with their own router can keep that router as the sole history writer:


const config: Partial<Config> = {
  urlState: {
    getSearchParam: (key) => router.state.location.search[key] ?? null,
    replaceSearchParam: (key, value) =>
      router.navigate({
        to: ".",
        replace: true,
        search: (previous) => {
          const next = { ...previous };
          if (value === null) delete next[key];
          else next[key] = value;
          return next;
        },
      }),
  },
};

Default config


const DEFAULT_CONFIG: Config = {
  previews: [],
  behaviorPresets: [
    "auto-advance",
    "no-auto-advance",
    "repeat",
    "no-repeat",
    "unordered",
    "individuals",
    "continuous",
    "paged",
    "non-paged",
    "facing-pages",
    "multi-part",
    "together",
    "sequence",
    "thumbnail-nav",
    "no-nav",
    "hidden",
  ],
  defaultPreview: null,
  editorConfig: {},
  newTemplates: null,
  i18n: {
    advancedLanguageMode: false,
    availableLanguages: ["en", "cy", "nl", "fr"],
    defaultLanguage: "en",
  },
  editorFeatureFlags: {
    enableMultiImageCanvases: true,
    enableMultiMediaCanvases: true,
  },
  uploadBackends: [],
  plugins: {
    apps: {},
  },
  export: {
    baseIdentifier: null,
    version: 3,
  },
};

IIIF Browser collection

The IIIF Browser has no default collection unless the host configures one. The same setting applies when browsing for content or for a Manifest:


const config: Partial<Config> = {
  creators: {
    "@manifest-editor/iiif-browser-creator": {
      defaultCollection: "https://example.org/iiif/collection.json",
    },
  },
};

Example configuration

Limits which tabs are available on Manifests and Canvas editors.


const compatConfig: Partial<Config> = {
  editorConfig: {
    Manifest: {
      // singleTab: "@manifest-editor/overview",
      onlyTabs: [
        //
        "@manifest-editor/overview",
        "@manifest-editor/metadata",
      ],
      fields: ["label", "summary", "metadata", "rights", "requiredStatement", "rendering"],
    },
    Canvas: {
      singleTab: "@manifest-editor/overview",
      fields: ["items", "label", "metadata", "annotations"],
    },
  },
};

Plugin configuration

Plugin configuration is stored under config.plugins.apps[appId]. For the packaged React component, the app id is manifest-editor.


const config: Partial<Config> = {
  plugins: {
    apps: {
      "manifest-editor": {
        enabled: ["@example/plugin"],
        settings: {
          "@example/plugin": {
            mode: "automatic",
          },
        },
      },
    },
  },
};

See Plugins for plugin settings, lazy plugins, worker-backed plugins, and plugin creation.