---
title: "Annotations"
description: "Every annotation of a IIIF resource, by layer and by Canvas, to read, to find on the Canvas, and to hide from it."
url: https://clover.iiif.library.northwestern.edu/docs/annotations
version: "4"
---

# Annotations

\<Clover.Annotations /> (web components: \<clover-annotations>)10 kB added to a page with a Root, gzipped (web components: 30 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s annotations, by layer and by Canvas: to read, to find on the Canvas, and to hide from it.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>
```

## API reference

Inside a `Root` (web components: `<clover-root>`), it lists every Canvas’s annotations, and those of pages the Root’s `annotations` adds, by layer (AnnotationPages that share a label) and then by Canvas; with none, it renders nothing. An image’s own annotations, such as those of one image of a choice (an X-ray beside the natural light), are listed under it and drawn while it is the image chosen. Pressing one finds it on the Canvas, choosing its image if need be, and shows its layer again if it was hidden; the eye at the end of a layer’s heading hides the layer there, and lights the entries it hides while it is pointed at or focused. A still image’s OCR (`supplementing` text on its lines or words) is neither listed nor drawn: a [search](https://clover.iiif.library.northwestern.edu/docs/search) finds in it and draws its hits. A transcription of the whole page, captions and a recording’s text show as ever. In a box that scrolls, the Canvases in view come to its top as the reader moves. Where a layer gives the same words as separate annotations, one per language, it lists one language at a time, offered by their codes in its header: the Root’s `language` to start, else the reader’s. An annotation that tags a place (a GeoJSON feature, as a map on a page is tagged with where it shows) is listed by the place’s name, and picked, the Canvas opens a box of it, as it opens its information: the name over a [Map](https://clover.iiif.library.northwestern.edu/docs/map) of the place. Its other props, and its `ref`, go to its element.

**React**

| Prop           | Type                                    | Default | Description                                                         |
| -------------- | --------------------------------------- | ------- | ------------------------------------------------------------------- |
| `scope`        | `"view" \| "all"`                       | `"all"` | Every Canvas’s annotations, all fetched as it shows, or the view’s. |
| `renderEntry`  | `(entry: AnnotationEntry) => ReactNode` | —       | Your own rendering of an entry’s content.                           |
| `headingLevel` | `number`                                | `3`     | Its first headings: one below the heading over it.                  |
| `as`           | element type                            | `"div"` | The element to render.                                              |
| `className`    | `string`                                | —       | Added to `clover-annotations`.                                      |

**Web components**

### `<clover-annotations>`

The annotations, by layer and then by Canvas: each to pick, which frames it on the Body, with its region pictured.

| Name            | Type                                                                                                                              | Default | Description                                                                                                       |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `scope`         | `"view" \| "all"`                                                                                                                 | `all`   | Every Canvas's annotations, or only the view's.                                                                   |
| `heading-level` | `number`                                                                                                                          | `3`     | The level of its layers' titles, one under the heading it sits beneath. Past 6, each names what it heads instead. |
| `.renderEntry`  | `((entry: { id: string; canvasId: string; annotation: Record<string, unknown> }) => Node \| string \| null \| undefined) \| null` | —       | Your own drawing of an annotation's content: a node or text, in place of its bodies. A new node each time.        |

## Examples

### On a recording

On a recording, each annotation shows when it starts, and pressing it goes there. These follow the defendants through the film, in two layers; its captions are the [Transcript](https://clover.iiif.library.northwestern.edu/docs/transcript)’s.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>
```

### In several languages

Where a page gives its words once per language, a transcription and its translation, each an annotation of its own, Annotations offers their languages by code and lists one at a time. It starts on the Root’s `language`, here Arabic, and Arabic text is written right to left. Where the Root offers the languages to read the resource in (About’s), the set offers none of its own and follows that one choice. One annotation that gives its words in several languages at once, a `Choice` of them, shows the one in the Root’s language. This manuscript’s English is Ariela Marcus-Sells’s translation.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root
  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  language="ar"
>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  language="ar">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>
```

### Pages of your own

Give the Root `annotations`, an AnnotationPage or AnnotationCollection of your own, and its annotations are listed with the Manifest’s.

**React**

```jsx
<Clover.Root iiifContent={url} annotations={annotationPageUrl}>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  annotations="https://example.org/annotation-page.json"
>
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>
```

### Your own rendering

Use `renderEntry` (web components: `.renderEntry`) to draw an entry’s content yourself, from its read `bodies` or the `annotation` as published. The entry keeps its picture, its link, its button and its highlight. The items of a `Choice`, the same words in several languages, are each a body with the same `choice`: draw one of them. A place (a GeoJSON feature) is a body with `place` and its name as `label`.

**React**

```jsx
const renderEntry = (entry) =>
  entry.bodies
    .filter((body) => body.value)
    .map((body, index) => (
      <p key={index} lang={body.language}>
        {body.value}
      </p>
    ));
 
<Clover.Annotations renderEntry={renderEntry} />;
```

**Web components**

```html
<clover-annotations></clover-annotations>
 
<script type="module">
  document.querySelector("clover-annotations").renderEntry = (entry) => {
    const bodies = document.createDocumentFragment();
    for (const body of entry.bodies.filter((each) => each.value)) {
      const paragraph = document.createElement("p");
      if (body.language) paragraph.lang = body.language;
      paragraph.textContent = body.value;
      bodies.append(paragraph);
    }
    return bodies;
  };
</script>
```

## Previous versions

[Clover 3.x › Viewer › Information Panel](https://clover.iiif.library.northwestern.edu/docs/3.x/viewer#information-panel)

- The Annotations tab is now this part, placed anywhere.
- Captions are the [Transcript](https://clover.iiif.library.northwestern.edu/docs/transcript)’s.
- `annotationTabLabel` is a `Tab` (web components: `<clover-tab>`) of your own.