Embed Qirtaas for document reading

This tutorial continues the notes app from Document creation. After creating notes, you will now be able to render them as read-only for consumers. Reading uses <QirtaasRenderer> instead of the editor, and there are two ways to authorize a read: a share token for public documents, or the same embed token the editor uses for the author’s own documents. For applications where you want to share documents with any website visitor (ex: public reflections), you want to use share tokens.

const { share_token } = await qirtaas.setSharing(documentId, true);
// store it, or put it straight into a link

With that token stored, a public page is one prop:

src/SharedNote.tsx

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.

2. Reads with an embed token

To gate reads behind authorisation, use embed token (pass getToken) to the QirtaasRenderer.

src/ReadNote.tsx

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)}
    />
  );
}

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.

Want access control?

In both previous scenarios, you either allow blanket reads to everyone or to all your users. In some applications, you might have complex and dynamic ACLs. ACL with signatures allow you to support this.

Access control with signatures

Gate cross-user reads behind your own ACL with per-document HMAC signatures.

Get started

Tutorials

SDK

Auth

Self-hosting

AI

Embed Qirtaas for document reading

2. Reads with an embed token

Want access control?

Access control with signatures

​1. Public reads with a share token

​2. Reads with an embed token

​Want access control?

Access control with signatures

1. Public reads with a share token

2. Reads with an embed token

Want access control?