> ## 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.

# Quickstart

> From install to a mounted editor in about 60 seconds.

This guide mounts a working editor against the managed cloud. If you plan to
run your own backend, everything below is identical except the `apiUrl` — see
[Self-hosting](/backend/self-hosting).

## 1. Install

```bash theme={null}
npm install @qirtaas/core
```

## 2. Create a client

Configure the connection **once**. `getToken` returns a short-lived embed token
that your backend mints from its secret API key (see
[Authentication](/backend/authentication)).

```ts theme={null}
import { createQirtaasClient } from "@qirtaas/core";

const qirtaas = createQirtaasClient({
  apiUrl: "https://api.qirtaas.io",
  // Called on init, before expiry, and on 401. Return a fresh embed token.
  getToken: async () => {
    const res = await fetch("/api/qirtaas-token");
    const { token } = await res.json();
    return token;
  },
});
```

<Note>
  Never put your `qrt_sk_…` secret key in the browser. `getToken` should call
  **your** backend, which performs the token exchange.
</Note>

## 3. Mount the editor

Give the SDK any element (or a selector) and it mounts the editor onto it.

```html theme={null}
<div id="editor"></div>
```

```ts theme={null}
const editor = qirtaas.mountEditor("#editor", {
  // Omit documentId to lazily create a document on first edit.
  documentId: "b1f2…",
  locale: "ar",
  theme: "light",
  onReady: () => console.log("editor ready"),
  onChange: (json) => console.log("content changed", json),
  onDocumentCreated: (id) => console.log("new document:", id),
});
```

That's it — the editor autosaves as the user types. See
[Editor](/sdk/editor) for all options, the returned instance methods, and
autosave control.

## Display a saved document

Use the read-only [renderer](/sdk/renderer) to show a document without editing:

```ts theme={null}
qirtaas.mountRenderer("#viewer", {
  documentId: "b1f2…",
  shareToken: "…", // public read; or use getToken / getSignature
  theme: "light",
});
```

## Using React or Vue?

Prefer the idiomatic component wrappers:

<CardGroup cols={2}>
  <Card title="@qirtaas/react" icon="react" href="/sdk/react" />

  <Card title="@qirtaas/vue" icon="vuejs" href="/sdk/vue" />
</CardGroup>