---
title: "Root"
description: "Loads a IIIF resource and holds its current view: every other part goes inside a Root and reads from it."
url: https://clover.iiif.library.northwestern.edu/docs/root
version: "4"
---

# Root

Loads a IIIF resource and holds its current view. Every other part goes inside a Root and reads 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.Label as="h3" />
  <Clover.Body />
  <Clover.Items />
</Clover.Root>
```

**Web components**

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

## API reference

Give it `iiifContent` (web components: `iiif-content`): a Manifest, a Collection, a Canvas or a content state, as a URL or an object, in Presentation 2, 3 or 4. The parts inside it show that resource and move through it together: choose a thumbnail in `Items` (web components: `<clover-items>`), and the `Body` (web components: `<clover-body>`), the `Label` (web components: `<clover-label>`) of the Canvas and the `Panel` (web components: `<clover-panel>`) follow. It renders a `div` of your own layout, and announces each move to assistive technology.

Its most used props are `iiifContent` (web components: `iiif-content`), `canvasId` (web components: `canvas-id`) with `onCanvasChange` (web components: `clover-canvas-change`) (the current Canvas, controlled), `language`, `request` (web components: `.request`) and `highContrast` (web components: `high-contrast`). Every prop is in [Composing layouts](https://clover.iiif.library.northwestern.edu/docs/composing#root), with how to lay its parts out. The Viewer and its templates are each a Root and its parts, and take the same props.

## A Root inside a Root

A Root can hold another, as a context of its own. Each part reads its nearest parent Root, as a web component’s element reads its nearest parent `clover-root`: the inner Root loads its own resource and keeps its own place in it, and announces its own moves. Nothing passes between them. Choosing a thumbnail in the inner Root’s `Items` (web components: `<clover-items>`) moves the inner Root alone, and its `request` (web components: `.request`) and `language` are its own. Use it to show a second resource in the same layout: a related Manifest, say, beside the one the page is about.

Two things are the page’s, not either Root’s. The page’s language is read once, at the outer Root. And the higher-contrast mode of the outer Root holds for everything inside it, the inner Root too. Full screen takes the Root its control is in, the inner one for the inner Root’s parts.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Label as="h3" />
  <Clover.Body />
  <aside>
    <Clover.Root iiifContent={related}>
      <Clover.Label as="h4" />
      <Clover.Items />
    </Clover.Root>
  </aside>
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
>
  <clover-label as="h3"></clover-label>
  <clover-body></clover-body>
  <aside>
    <clover-root iiif-content="https://example.org/related/manifest.json">
      <clover-label as="h4"></clover-label>
      <clover-items></clover-items>
    </clover-root>
  </aside>
</clover-root>
```

## Next

- [Composing Layouts of your own, from the parts and hooks.](https://clover.iiif.library.northwestern.edu/docs/composing)
- [Body The current view.](https://clover.iiif.library.northwestern.edu/docs/body)
- [Items Thumbnails that move through it.](https://clover.iiif.library.northwestern.edu/docs/items)
- [Panel Everything the resource says of itself.](https://clover.iiif.library.northwestern.edu/docs/panel)
- [Primitives One part for each IIIF property.](https://clover.iiif.library.northwestern.edu/docs/primitives)
- [Viewer A Root laid out by a template.](https://clover.iiif.library.northwestern.edu/docs/viewer)