Quickstart

Install

npm i @reviseio/editor

pnpm add @reviseio/editor

yarn add @reviseio/editor yjs y-protocols

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.

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.

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.

DocumentPane.tsx

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.

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

Load on demand

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

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

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

import { createEmptyDocx } from "@reviseio/editor";

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

A complete app

reviseio/sdk-demo is a standalone React app on the public package, with a Node service built on @reviseio/editor/server (live demo).

Next steps

Architecture

What the component owns, and what stays yours.

Multi-document sessions

Opening, activating, and closing documents.

Bring your own UI

Turn off the ribbon and drive the editor from your own toolbar.

Tools for your agent

Hand the document to the model you already run.

Getting started

Guides

API reference

Install

Render a document

Load on demand

Export

Create a blank document

A complete app

Next steps

Architecture

Multi-document sessions

Bring your own UI

Tools for your agent

​Install

​Render a document

​Load on demand

​Export

​Create a blank document

​A complete app

​Next steps

Architecture

Multi-document sessions

Bring your own UI

Tools for your agent

Install

Render a document

Load on demand

Export

Create a blank document

A complete app

Next steps