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

# Quickstart

> Render a document in about ten lines.

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm i @reviseio/editor
  ```

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

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

React, ReactDOM, Yjs, and y-protocols are peer dependencies. npm and pnpm
install them automatically; with Yarn, list them yourself. `jsdom` is an
optional peer, used only by the [server-side
primitives](/developer/docs/developer/docs/editor-sdk/guides/collaboration#seeding-from-your-own-server).

<Info>
  Requires React 18+ and Node 18+. The editor renders client-side only; in
  Next.js, use a `"use client"` component loaded with `next/dynamic` and
  `ssr: false`.
</Info>

## 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, ODT, RTF, Markdown, plain text, or HTML file; see
[supported formats](/developer/docs/developer/docs/editor-sdk/guides/formats).

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

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

  return (
    <ReviseEditor
      initialDocuments={[{ id: "contract-1", title: "Contract", source: file }]}
      onReady={(handle) => {
        // Editor is mounted. Set up subscriptions here.
        editor.current = handle;
      }}
      onDocumentReady={() => {
        // First document is open. Controllers are usable.
      }}
      onChange={(documentId, document) => {
        console.log(documentId, "now has", document.children.length, "blocks");
      }}
    />
  );
}
```

That's the whole integration. The editor handles parsing, layout, pagination,
input, undo, find, comments, and review.

<Note>
  The editor fills its container. Give the container a height: `100vh`, a
  fixed value, or a flex or grid track.
</Note>

## Load on demand

Import the editor where a document is opened rather than in your entry bundle:

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

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

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

Importing `@reviseio/editor/style.css` inside `DocumentPane` keeps the stylesheet on the
same path.

## Export

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

`exportDocx()` returns a `Blob`. Comments and tracked changes are preserved.
`whenReady()` waits for the document to finish opening.

## Create a blank document

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

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

## A complete app

[reviseio/sdk-demo](https://github.com/reviseio/sdk-demo) is a standalone
React app on the public package, with a Node service built on `@reviseio/editor/server`
([live demo](https://reviseio.github.io/sdk-demo/)).

## Next steps

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

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

  <Card title="Bring your own UI" icon="sliders" href="/developer/docs/developer/docs/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="/developer/docs/developer/docs/editor-sdk/guides/agent-tools">
    Hand the document to the model you already run.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.