Appearance

Theme

The theme prop sets the editor theme independently of the host page. Several editors on one page can use different themes, and a dark editor can sit in a light application.

<ReviseEditor theme="dark" initialDocuments={docs} />

Without theme, the editor follows the host page.

The theme applies to the editor and its canvas only. It does not change the surrounding page.

Colors

Three surfaces have their own colors. Set each with a prop or with a CSS custom property on the editor root.

Prop	CSS variable	Surface
`canvasBackground`	`--revise-canvas-background`	The area behind the page
`pageBackground`	`--bg-page`	The page
`pageBorderColor`	`--page-border`	The outline around each page

<ReviseEditor
  canvasBackground="#b9c6bf"
  pageBackground="#faf6ef"
  pageBorderColor="#42524f"
  initialDocuments={docs}
/>

All three accept any CSS value, including gradients for the canvas:

<ReviseEditor canvasBackground="linear-gradient(#1b2430, #0b0e14)" />

pageBackground also applies inside the canvas. Image placeholders, container fills, and table cell backgrounds use your color instead of white.

Fonts

Add your application’s fonts to the font picker. The DOCX family name and the browser font stack are set separately:

<ReviseEditor
  fonts={[
    {
      family: "Counsel Sans",
      label: "Counsel Sans",
      cssFamily: "'Counsel Sans', Arial, sans-serif",
      fontWeight: 500,
    },
  ]}
  initialDocuments={docs}
/>

family is stored in the document and written to .docx. cssFamily is used only to render the font in the browser.

The SDK does not load font files. Load them with @font-face or a stylesheet. A family that is not loaded renders in a fallback font and still exports correctly.

Zoom

Zoom accepts any positive scale or "fit-width":

<ReviseEditor defaultZoom="fit-width" initialDocuments={docs} />

editor.zoom.setZoom(1.25);
editor.zoom.fitWidth();

const { zoom, scale } = editor.zoom.getState();

zoom is the requested value. scale is the actual canvas scale. For "fit-width", scale is computed from the widest page and updates when the container or the comments stack changes. An expanded comments stack reduces the available width. A numeric zoom stays fixed, and the editor scrolls horizontally. Subscribe to zoom changes:

useEffect(() => editor.zoom.subscribe(setZoomState), [editor]);

Performance

Word-level diffing, agent text anchoring, and document statistics have Rust/WASM implementations. They are off by default:

<ReviseEditor wasmHotPaths initialDocuments={docs} />

The binary is included in the package. There is nothing to host or configure. If WebAssembly is unavailable, the editor uses the TypeScript implementations. Both produce the same output.

Container size

The editor fills its container. Give it a sized parent:

<div style={{ height: "80vh" }}>
  <ReviseEditor initialDocuments={docs} />
</div>

className and style are passed to the editor root.

Getting started

Guides

API reference

Theme

Colors

Fonts

Zoom

Performance

Container size

​Theme

​Colors

​Fonts

​Zoom

​Performance

​Container size

Theme

Colors

Fonts

Zoom

Performance

Container size