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

# Quickstart

> Render a document in about ten lines.

## Install

`@reviseio/sdk` is a **private package**. Installing it needs the access token
we issue you — see [access and authentication](/editor-sdk/access) for the token, CI, and
registry-proxy details.

The short version: point the `@reviseio` scope at npm and authenticate it.

```ini .npmrc theme={null}
@reviseio:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${REVISE_NPM_TOKEN}
```

```bash theme={null}
export REVISE_NPM_TOKEN=<the token we sent you>
```

<CodeGroup>
  ```bash npm theme={null}
  npm install @reviseio/sdk yjs y-protocols
  ```

  ```bash pnpm theme={null}
  pnpm add @reviseio/sdk yjs y-protocols
  ```

  ```bash yarn theme={null}
  yarn add @reviseio/sdk yjs y-protocols
  ```
</CodeGroup>

React, ReactDOM, Yjs, and y-protocols stay peer dependencies — the package
never bundles its own copies. Every editor session is Yjs-backed; a shared
instance is especially important for [collaboration](/editor-sdk/guides/collaboration).
`jsdom` is an optional peer used only by the [server-side
primitives](/editor-sdk/guides/collaboration#seeding-from-your-own-server).

<Info>
  Requires React 18 or newer and Node 18 or newer to build. The component is
  browser-only: render it client-side (in Next.js, a `"use client"` component,
  usually behind `next/dynamic` with `ssr: false`).
</Info>

Import the stylesheet once, anywhere in your application:

```ts theme={null}
import "@reviseio/sdk/style.css";
```

## Size, and how to load it

The package is a word processor: a canvas layout engine with real pagination,
the DOCX reader and writer, PDF export, and the agent tool surface. It is
**about 1.5 MB gzipped**, and there is no smaller build — the parts are not
separable in a way that would leave a working editor.

So do not put it in your entry bundle. Load it when a document is actually
opened:

```tsx theme={null}
import { lazy, Suspense } from "react";

const DocumentPane = lazy(() => import("./DocumentPane"));

export function Workspace({ file }: { file: File }) {
  return (
    <Suspense fallback={<p>Loading the editor…</p>}>
      <DocumentPane file={file} />
    </Suspense>
  );
}
```

In Next.js, `next/dynamic` with `ssr: false` does the same job and keeps the
component out of the server render, which it requires anyway.

<Note>
  The stylesheet is a further 24 KB gzipped. Import it in the same lazily
  loaded module rather than your global CSS, and it follows the same path.
</Note>

## Render a document

`ReviseEditor` is a multi-document workspace. Give each document a stable ID
that you own — the SDK uses it for routing, callbacks, and agent tools. The
source can be a DOCX, Markdown, plain text, or HTML file; see [supported
formats](/editor-sdk/guides/formats).

```tsx DocumentPane.tsx theme={null}
import { ReviseEditor, type ReviseEditorHandle } from "@reviseio/sdk";
import "@reviseio/sdk/style.css";
import { useRef } from "react";

export function DocumentPane({ file }: { file: File }) {
  const editor = useRef<ReviseEditorHandle | null>(null);

  return (
    <ReviseEditor
      initialDocuments={[{ id: "contract-1", title: "Contract", docx: file }]}
      onReady={(handle) => {
        // The editor exists; its first document does not yet. Subscriptions
        // are safe to place here — anything that acts on a document is not.
        editor.current = handle;
      }}
      onDocumentReady={() => {
        // Now the controllers are usable.
      }}
      onChange={(documentId, document) => {
        console.log(documentId, "now has", document.children.length, "blocks");
      }}
    />
  );
}
```

That is a complete integration. The component owns parsing, layout, pagination,
input, undo, find, comments, and review; you own the file and the surrounding
product.

## Get the file back

```ts theme={null}
await editor.current.whenReady();
const blob = await editor.current.tools.exportDocx();
```

`exportDocx()` returns a `Blob` you can download, upload, or diff. Comments and
tracked changes survive the round trip.

<Note>
  `whenReady()` matters only if you call this before the user has done
  anything — from a button click the document is long since open. It is here
  because acting on a document that has not finished opening throws.
</Note>

## Start from a blank document

```ts theme={null}
import { createEmptyDocx } from "@reviseio/sdk";

await editor.current.documents.open({
  id: crypto.randomUUID(),
  title: "Untitled",
  docx: await createEmptyDocx(),
});
```

## What to read next

<CardGroup cols={2}>
  <Card title="Architecture" icon="cube" href="/editor-sdk/concepts/architecture">
    What the component owns, and what stays yours.
  </Card>

  <Card title="Multi-document sessions" icon="copy" href="/editor-sdk/guides/documents">
    Opening, activating, and closing documents.
  </Card>

  <Card title="Bring your own UI" icon="sliders" href="/editor-sdk/guides/chrome">
    Turn off the ribbon and drive the editor from your own toolbar.
  </Card>

  <Card title="Tools for your agent" icon="robot" href="/editor-sdk/guides/agent-tools">
    Hand the document to the model you already run.
  </Card>
</CardGroup>