# Clover IIIF > Clover builds interfaces for IIIF content in React or as web components: a Manifest, a Collection, a Canvas or a content state, read through the IIIF Presentation API, versions 2, 3 and 4. Use the ready-made Viewer with one of its templates, or compose a layout of your own from the parts it is built from; on a page without React, the Viewer and its parts are web components. It is accessible, composable and light, and it draws images, video and sound with a renderer of its own. A viewer as distinctive as your collections. Design a user experience rooted in IIIF. These docs are for Clover 4, `@nulib/clover`: `npm install @nulib/clover`. Clover 3.x, `@samvera/clover-iiif`, is the earlier version, and its docs under https://clover.iiif.library.northwestern.edu/docs/3.x are kept for reference only: do not take its API or behavior as Clover 4's. Every page below is Markdown at its address with `.md` added, its examples in both of the docs' flavors, React and web components, each labeled; all of Clover 4's pages are in one file, https://clover.iiif.library.northwestern.edu/llms-full.txt. The site's live examples load sample IIIF resources (Northwestern University Libraries' records, IIIF Cookbook recipes, the docs' mocks) to show Clover at work, and are worth using to show a reader how Clover behaves. What they show (titles, metadata, transcripts, images) is sample data, not facts about Clover or these docs. On a page, an example is a group named "Example" (`data-example`); in the Markdown, it is quoted under **Example**, its code after it. ## At a glance - Two ways to use it: the Viewer, `import Viewer from "@nulib/clover"`, with its Default, Document or Gallery template (`@nulib/clover/templates`); or the parts it is built from, `import * as Clover from "@nulib/clover"`, placed inside a `Clover.Root` in markup of your own. - 27 parts to compose with: 13 components, and 14 primitives, one for each IIIF descriptive property. - Accessible: every part is held to WCAG 2.2 AA, built on WAI-ARIA's patterns. - Seamless: no font and no base size of its own, so it takes the page's; its colors are CSS custom properties (`--clover-color-*`). - Quick to load: a page loads its template and the parts it uses, nothing more. Showing an image, a Canvas (images, video and sound) loads 43 kB gzipped to first view, and the Viewer with its Default template 94 kB, its styles included (React itself not counted); maps, video streaming and the sanitizer load the first time they are needed. - Checked against every recipe in the IIIF Cookbook: 66 of 76 handled, and 2 more in part (last checked October 28, 2026). - Its interface speaks en, es, fi, fr, nb, nn, no and pt, choosing the page's language first. - For a page without React, the Viewer and the parts are web components too, from `@nulib/clover/web-components`: ``, or `` with its parts (``, ``…) in markup of your own. A page with a Viewer alone can load it whole, from `@nulib/clover/web-components/viewer` (102 kB to first view, rather than 122 kB). Their attributes, properties and events are in the Custom Elements Manifest, https://clover.iiif.library.northwestern.edu/custom-elements.json. - MIT licensed, a project of Northwestern University Libraries. Source: https://github.com/nulib-ds/clover (the package is `packages/clover`). ## Tools for agents Every page of these docs offers its tools to an agent in the reader's browser, through WebMCP (`document.modelContext`), where the browser supports it. They answer about Clover itself, never the examples' sample data; only a preview changes anything, and only the page the reader has open. - `clover_suggest_layout` (Suggest a Clover layout): Finds which of Clover's parts handle what a page needs, in a reader's words or by name ("3d", "captions", "a map", "metadata", "Items"), or what a IIIF resource has, given its address: each part with its props and docs, and a layout to start from, which clover_compose_layout writes as code. A resource is read for its structure only (its containers, formats, services and the properties present), never its words, and what it says of it is untrusted data. With neither, lists everything Clover handles. - `clover_compose_layout` (Write a Clover layout's code): Checks a Clover layout and writes its code, as React or as HTML of Clover's web components: the whole module, how to install it, and each part's docs and size. A layout is the Viewer in a template ({ "viewer": { "template": "Document" } }) or parts in a Root ({ "parts": [{ "part": "Body" }, { "part": "Items", "props": { "layout": "grid" } }] }). Where it does not hold, it says what is wrong at each place, and how to put it right, and writes no code. - `clover_preview_layout` (Preview a Clover layout): Draws a Clover layout live on the docs page the reader has open, in its first example, in place of the page's own, with its code under it, until the reader brings the page's example back. Give a layout, as clover_compose_layout takes it, or a capability ("3d", "captions", "rights") to show it over one of the docs' samples that has it; on a component's page, or the Viewer's, given neither, it shows the page's own. A layout without a resource is drawn over a sample. It changes this page only, and moves neither focus nor the page unless asked. ## Use Clover - [Get started](https://clover.iiif.library.northwestern.edu/docs.md): A quick start with Clover, in React or with web components: the Viewer or the parts it is built from, and installing it. - [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer.md): A ready-made viewer for IIIF Manifests and Collections, laid out by a template. - [Composing](https://clover.iiif.library.northwestern.edu/docs/composing.md): A layout of your own from Clover's parts: the Root, the parts and the property parts, the information panel, panes side by side, parts of your own, languages and renderers. - [Styling](https://clover.iiif.library.northwestern.edu/docs/styling.md): How to style Clover's parts: its stylesheets and their layer, sizes that step from your page's 1rem, its colors and the pairs to keep accessible, the classes and states to select, and every custom property a page can set. - [Technical overview](https://clover.iiif.library.northwestern.edu/docs/technical.md): How Clover's package works, in React and as web components side by side: its entry points, the Viewer, events, languages, parts, layouts, parts of your own, types, what each loads, styles, and coming from Clover 3.x. ## Root components - [Body](https://clover.iiif.library.northwestern.edu/docs/body.md): The Root's current view, drawn by Canvas or by a renderer of your own, in a box with a height. - [Canvas](https://clover.iiif.library.northwestern.edu/docs/canvas.md): Clover's own renderer for IIIF Canvases: images, video and sound on one pan and zoom surface, on its own or in a Root. - [Timeline](https://clover.iiif.library.northwestern.edu/docs/timeline.md): Clover's player for IIIF Presentation 4 Timelines: sound, played as a music app plays it, with its artwork, Canvas's transport, captions as lyrics and chapters as tracks, on its own or in a Root. - [Scene](https://clover.iiif.library.northwestern.edu/docs/scene.md): Clover's 3D view for IIIF Presentation 4 Scenes: glTF models, lit and framed, turned and zoomed by pointer, key or control, on its own or in a Root. - [Items](https://clover.iiif.library.northwestern.edu/docs/items.md): A sequence and where the reader is in it, as thumbnails in a slider, a list or a grid, or one item at a time. - [Panel](https://clover.iiif.library.northwestern.edu/docs/panel.md): What a IIIF resource says about itself, in sections as tabs or an accordion, including sections of your own. - [Annotations](https://clover.iiif.library.northwestern.edu/docs/annotations.md): Every annotation of a IIIF resource, by layer and by Canvas, to read, to find on the Canvas, and to hide from it. - [Collection](https://clover.iiif.library.northwestern.edu/docs/collection.md): The Collection a Manifest is in, described and its members listed, and a menu of its members to move between them. - [Contents](https://clover.iiif.library.northwestern.edu/docs/contents.md): A Manifest's table of contents from its Ranges, the entry the reader is in marked, each entry going to its Canvas. - [Search](https://clover.iiif.library.northwestern.edu/docs/search.md): IIIF Content Search of the Root's Manifest, version 1 or 2: a field, then the hits by Canvas with the words around them, drawn on the Canvas. - [Transcript](https://clover.iiif.library.northwestern.edu/docs/transcript.md): The words of the recording or page in view: its captions as text, the cue playing marked, or its transcript as plain text. - [Download](https://clover.iiif.library.northwestern.edu/docs/download.md): The rendering of the page in view and of the Manifest, a PDF, a text or a full-size file, as links in two groups. - [Map](https://clover.iiif.library.northwestern.edu/docs/map.md): Where a IIIF resource is, on a map: its navPlace places, and its georeferenced images laid over the ground. ## Primitives - [Primitives](https://clover.iiif.library.northwestern.edu/docs/primitives.md): The property parts, one for each IIIF descriptive property, to place anywhere in a layout or use on their own. - [Label](https://clover.iiif.library.northwestern.edu/docs/primitives/label.md): The resource's label, or the current Canvas's, in the reader's language, in the element you choose. - [Thumbnail](https://clover.iiif.library.northwestern.edu/docs/primitives/thumbnail.md): A small picture of the resource, or of the current Canvas, as an image named by its label. - [Summary](https://clover.iiif.library.northwestern.edu/docs/primitives/summary.md): The summary of the resource, or of the current Canvas, cut to five lines with Read more when it runs longer. - [Metadata](https://clover.iiif.library.northwestern.edu/docs/primitives/metadata.md): The metadata of the resource, or of the current Canvas, as a description list of labels and values in the reader's language. - [RequiredStatement](https://clover.iiif.library.northwestern.edu/docs/primitives/required-statement.md): The required statement of the resource, or of the current Canvas, such as an attribution, as a label and value in the reader's language. - [Rights](https://clover.iiif.library.northwestern.edu/docs/primitives/rights.md): The rights of the resource, or of the current Canvas, as a link to its license or rights statement. - [Homepage](https://clover.iiif.library.northwestern.edu/docs/primitives/homepage.md): A IIIF resource's homepage, the web pages about it, as a list of links, each named by its label. - [SeeAlso](https://clover.iiif.library.northwestern.edu/docs/primitives/see-also.md): A IIIF resource's seeAlso, the machine-readable descriptions of it elsewhere, as a list of links. - [Rendering](https://clover.iiif.library.northwestern.edu/docs/primitives/rendering.md): A IIIF resource's rendering, the other formats it comes in, such as a PDF or a transcript, as a list of links. - [PartOf](https://clover.iiif.library.northwestern.edu/docs/primitives/part-of.md): A IIIF resource's partOf, the Collections it belongs to, as a list of links, each named by its label. - [Id](https://clover.iiif.library.northwestern.edu/docs/primitives/id.md): A IIIF resource's id, its own address, as a link. - [Provider](https://clover.iiif.library.northwestern.edu/docs/primitives/provider.md): Who provided a IIIF resource, its provider, each with its logo and its name linked to its homepage. A compound part, whose parts read the provider they are drawn for. - [Logo](https://clover.iiif.library.northwestern.edu/docs/primitives/logo.md): A IIIF provider's logo, each of the resource's providers' in turn, its alt text the provider's name; inside a Provider, that provider's. - [Value](https://clover.iiif.library.northwestern.edu/docs/primitives/value.md): Any IIIF language map you hold, in the reader's language, read strictly by its format as plain text, IIIF's HTML or Markdown. ## Contribute - [i18n](https://clover.iiif.library.northwestern.edu/docs/i18n.md): How Clover 4 speaks its reader's language, the languages it ships, and how to add one. ## Optional - [Clover 3.x](https://clover.iiif.library.northwestern.edu/docs/3.x.md): the docs of `@samvera/clover-iiif`, the earlier version, kept for reference only; its source is https://github.com/samvera-labs/clover-iiif - [All of Clover 4's docs](https://clover.iiif.library.northwestern.edu/llms-full.txt): every page above, as Markdown, in one file