Quickstart

Install

@reviseio/sdk is a private package. Installing it needs the access token we issue you — see access and authentication for the token, CI, and registry-proxy details. The short version: point the @reviseio scope at npm and authenticate it.

.npmrc

@reviseio:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${REVISE_NPM_TOKEN}

export REVISE_NPM_TOKEN=<the token we sent you>

npm install @reviseio/sdk yjs y-protocols

pnpm add @reviseio/sdk yjs y-protocols

yarn add @reviseio/sdk yjs y-protocols

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. jsdom is an optional peer used only by the server-side primitives.

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).

Import the stylesheet once, anywhere in your application:

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:

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.

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.

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.

DocumentPane.tsx

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

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.

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.

Start from a blank document

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

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

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

Size, and how to load it

Render a document

Get the file back

Start from a blank document

What to read next

Architecture

Multi-document sessions

Bring your own UI

Tools for your agent

​Install

​Size, and how to load it

​Render a document

​Get the file back

​Start from a blank document

​What to read next

Architecture

Multi-document sessions

Bring your own UI

Tools for your agent

Install

Size, and how to load it

Render a document

Get the file back

Start from a blank document

What to read next