> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qirtaas.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Qirtaas for document reading

> Display saved documents read-only with the renderer: own-document reads with embed tokens, public reads with share tokens.

This tutorial continues the notes app from
[Document creation](/tutorials/document-creation): users can author notes, and
now you add a clean **read view** — the document displayed without a toolbar
or editing chrome — plus a public share view.

Reading uses `<QirtaasRenderer>` instead of the editor. The renderer's auth is
**per read**, and which credential you use depends on who is reading:

| Reader                                    | Auth                                        | Covered in                                  |
| ----------------------------------------- | ------------------------------------------- | ------------------------------------------- |
| The document's author                     | `getToken` (same embed token as the editor) | this tutorial                               |
| Anyone with the link                      | `shareToken`                                | this tutorial                               |
| Another signed-in user, gated by your ACL | `getSignature`                              | [Access control](/tutorials/access-control) |

The first two need **no backend change at all** — the token endpoint from the
creation tutorial already covers own-document reads, and share tokens carry
their own authorization.

## 1. Frontend — the read view

Mount `<QirtaasRenderer>` with the same `getToken` the editor uses. An embed
token authorizes reads of *that identity's own* documents, so this works for
the author viewing any note from their `listDocuments()` list:

```tsx title="src/ReadNote.tsx" theme={null}
import { QirtaasRenderer } from "@qirtaas/react";
import { getToken } from "./qirtaas";

export function ReadNote({ docId }: { docId: string }) {
  return (
    <QirtaasRenderer
      key={docId} // renderer props aren't live — remount per document
      documentId={docId}
      getToken={getToken}
      locale="ar"
      theme="light"
      onError={(code) => console.error("render failed:", code)}
    />
  );
}
```

Unlike the editor, the renderer sizes to its content — no bounded-height
container required.

<Warning>
  Mount **one** Qirtaas embed at a time when their connections differ — the
  SDK's HTTP transport is shared per page, so a second renderer with a
  different auth source takes over the connection from the first. For the note
  *list*, keep rendering plain `listDocuments()` data and mount the renderer
  only on the detail page. See [Client](/sdk/client#one-live-embed-per-page).
</Warning>

## 2. Frontend — switch between reading and editing

A common pattern is a read view with an "Edit" button for the owner. Because
read and edit are different mounts, just swap components:

```tsx theme={null}
export function NotePage({ docId }: { docId: string }) {
  const [editing, setEditing] = useState(false);

  return editing ? (
    <EditNote docId={docId} />   // <QirtaasEditor> from the creation tutorial
  ) : (
    <>
      <button onClick={() => setEditing(true)}>Edit</button>
      <ReadNote docId={docId} />
    </>
  );
}
```

Both mounts use the same embed token, so they can coexist with a plain swap —
each component destroys its embed on unmount.

## 3. Public reads with a share token

A document explicitly shared by its author carries an opaque **share token**
that resolves it publicly — no key, no signature, no login. If your app stores
a note's share token, a public page is one prop:

```tsx title="src/SharedNote.tsx" theme={null}
import { QirtaasRenderer } from "@qirtaas/react";

export function SharedNote({ shareToken }: { shareToken: string }) {
  // No documentId needed — the token resolves the document.
  return <QirtaasRenderer shareToken={shareToken} locale="ar" theme="light" />;
}
```

Anyone holding the token can read the document, so treat it like any
capability URL: only surface it through an explicit "share" action.

## Where you are

Authors can read their own notes cleanly and share individual documents with
the world — still on a single backend endpoint. The remaining case — *other
signed-in users* reading a document when **your app** decides who's allowed —
needs neither of these credentials, and it's where your backend re-enters the
picture:

<Card title="Access control with signatures" icon="lock" href="/tutorials/access-control">
  Gate cross-user reads behind your own ACL with per-document HMAC signatures.
</Card>