> ## Documentation Index
> Fetch the complete documentation index at: https://sdk.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](/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
  ```

  ```bash pnpm theme={null}
  pnpm add @reviseio/sdk
  ```

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

React and ReactDOM stay your peer dependencies — the package never bundles its
own copy.

<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";
```

## 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](/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) => {
        editor.current = handle;
      }}
      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}
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.

## 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="/concepts/architecture">
    What the component owns, and what stays yours.
  </Card>

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

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

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