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

# Introduction

> Embed a full Islamic rich-text editor — Quran, hadith and matn insertion with Arabic RTL — into any web app.

Qirtaas is an embeddable editor for Islamic content. Drop one component into your
app and your users get a rich-text editor that can insert **Quran verses**,
**hadith**, and **matn (reference) quotes**, with full **Arabic RTL** support —
plus a read-only **renderer** for displaying saved documents.

The SDK is framework-agnostic. Use it from vanilla JS, or with the thin
[`@qirtaas/react`](/sdk/react) and [`@qirtaas/vue`](/sdk/vue) wrappers.

## Two editions, one editor

The editor component is identical everywhere. The only choice you make is which
**backend** powers the content and stores documents:

* **Self-host (Free, MIT)** — run the content backend yourself, or point the SDK
  at your own implementation of the `/v1` contract.
* **Managed Cloud** — we host the content backend, Quran/hadith data, and image
  storage. You get an API key and ship.

See [Self-host vs Cloud](/get-started/self-host-vs-cloud) for the full comparison.

## How it fits together

<Steps>
  <Step title="Install the SDK">
    Add [`@qirtaas/core`](/sdk/installation) to your frontend.
  </Step>

  <Step title="Mint embed tokens on your backend">
    Your server exchanges a secret API key for a short-lived embed token — see
    [Authentication](/backend/authentication). The secret never touches the browser.
  </Step>

  <Step title="Mount the editor / renderer">
    Create a client with [`createQirtaasClient`](/sdk/client) and call
    [`mountEditor`](/sdk/editor) or [`mountRenderer`](/sdk/renderer).
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" href="/get-started/quickstart">
    Install to mounted in 60 seconds.
  </Card>

  <Card title="Client API" icon="plug" href="/sdk/client">
    Configure the connection once with createQirtaasClient.
  </Card>

  <Card title="Editor" icon="pen-to-square" href="/sdk/editor">
    Mount the editor and handle content, autosave and events.
  </Card>

  <Card title="Authentication" icon="key" href="/backend/authentication">
    Server-side token exchange for embed access.
  </Card>
</CardGroup>