---
title: "Rendering"
description: "A IIIF resource's rendering, the other formats it comes in, such as a PDF or a transcript, as a list of links."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/rendering
version: "4"
---

# Rendering

\<Clover.Rendering /> (web components: \<clover-rendering>)0.7 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The other formats the resource comes in, such as a PDF or a transcript, as a list of links.

> **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.Rendering of="canvas" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/transcripts/manifest.json">
  <clover-rendering of="canvas"></clover-rendering>
</clover-root>
```

## API reference

Reads `rendering` from the Root’s resource and renders a `ul`: a link to each format, named by its label or else its address, with its `format` after it. It renders nothing while there is none, and its other props go to the `ul`. [`Download` (web components: `<clover-download>`)](https://clover.iiif.library.northwestern.edu/docs/download) lists the view’s and the resource’s together, in two groups.

**React**

| Prop        | Type                      | Default      | Description                                                        |
| ----------- | ------------------------- | ------------ | ------------------------------------------------------------------ |
| `of`        | `"manifest" \| "canvas"`  | `"manifest"` | Whose `rendering`: the resource’s, or the Canvas the reader is on. |
| `value`     | `{ id, label, format }[]` | —            | Formats to show instead of the Root’s, as IIIF gives them.         |
| `className` | `string`                  | —            | Added to `clover-rendering`.                                       |

**Web components**

### `<clover-rendering>`

The rendering: alternate formats, such as a PDF of the whole object, as a list of links, each with its format.

| Name     | Type                                                                                         | Default    | Description                                                                                 |
| -------- | -------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"`                                                                     | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                    |
| `value`  | `string (a URL or JSON)`                                                                     | —          | Renderings, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `string \| Array<{ id: string; label?: Record<string, string[]>; format?: string }> \| null` | —          | As a property: Renderings, instead of the root's.                                           |

## Examples

### The current Canvas

Beside a `Body` (web components: `<clover-body>`), `of="canvas"` lists the formats of the Canvas in view, and changes as the reader moves. Each page of this newspaper links its own text.

> **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.Body />
<Clover.Rendering of="canvas" />
```

**Web components**

```html
<clover-body></clover-body> <clover-rendering of="canvas"></clover-rendering>
```

### Outside a Root

Give it `value`, the formats as IIIF gives them, and it needs no `Root` (web components: `<clover-root>`).

> **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.Rendering
  value={[
    {
      id: "https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/transcript.txt",
      type: "Text",
      label: { en: ["Transcript in plain text format"] },
      format: "text/plain",
    },
  ]}
/>
```

**Web components**

```html
<clover-rendering
  value='[{"id":"https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/transcript.txt","type":"Text","label":{"en":["Transcript in plain text format"]},"format":"text/plain"}]'></clover-rendering>
```

## Previous versions

[Clover 3.x › Rendering](https://clover.iiif.library.northwestern.edu/docs/3.x/rendering)

- `rendering` is `value`: inside a `Root` (web components: `<clover-root>`), leave it out.
- For the Canvas in view, `of="canvas"`.
- Always a `ul`: no `as`.