Appearance

Theme

The embed takes its theme from the theme prop rather than from the host page’s own class, so several editors on one page can differ, and a dark editor can sit inside a light application.

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

Omit it and the editor follows the host page.

The theme is scoped to the editor’s own subtree, including the canvas. It never restyles the page around it.

Colours

Three surfaces are separately tunable. Each is a prop, and each is backed by a CSS custom property on the editor root if you would rather use a stylesheet.

Prop	CSS variable	What it paints
`canvasBackground`	`--revise-canvas-background`	The area behind the page
`pageBackground`	`--bg-page`	The paper itself
`pageBorderColor`	`--page-border`	The outline around each page

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

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

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

pageBackground reaches the canvas as well as the CSS page tile, so canvas-painted details that blend into the paper — image placeholders, container fills, table cell backgrounds — follow your colour instead of staying white.

Fonts

Add your application’s fonts to the native picker without coupling the DOCX family name to the browser rendering stack:

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

family is canonical: it is stored in the document and written to .docx. cssFamily is only used to preview the choice in the browser.

The registry does not download anything. Loading the font files with @font-face or a stylesheet remains your responsibility — an unloaded family will render in a fallback face and export correctly anyway.

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 what was requested; scale is the effective canvas scale, which for "fit-width" is computed from the widest page and recomputed when the container or the comments stack changes. An expanded comments stack is removed from the available width; a fixed numeric zoom stays fixed and the editor scrolls horizontally. Subscribe to follow it in your own UI:

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

Layout inside your page

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

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

className and style pass through to the editor root, so your own layout rules apply normally.

Getting started

Guides

API reference

Theme

Colours

Fonts

Zoom

Layout inside your page

​Theme

​Colours

​Fonts

​Zoom

​Layout inside your page

Theme

Colours

Fonts

Zoom

Layout inside your page