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.
1. Install
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).
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;
},
});
Never put your qrt_sk_… secret key in the browser. getToken should call
your backend, which performs the token exchange.
3. Mount the editor
Give the SDK any element (or a selector) and it mounts the editor onto it.
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),
});
Display a saved document
Use the read-only renderer to show a document without editing:
qirtaas.mountRenderer("#viewer", {
documentId: "b1f2…",
shareToken: "…", // public read; or use getToken / getSignature
theme: "light",
});
Using React or Vue?
Prefer the idiomatic component wrappers:
