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

# Appearance

> Theme, colours, fonts, and zoom.

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

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

Omit it and the editor follows the host page.

<Note>
  The theme is scoped to the editor's own subtree, including the canvas. It
  never restyles the page around it.
</Note>

## 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 |

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

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

```tsx theme={null}
<ReviseEditor canvasBackground="linear-gradient(#1b2430, #0b0e14)" />
```

<Tip>
  `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.
</Tip>

## Fonts

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

```tsx theme={null}
<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.

<Warning>
  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.
</Warning>

## Zoom

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

```tsx theme={null}
<ReviseEditor defaultZoom="fit-width" initialDocuments={docs} />
```

```ts theme={null}
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:

```ts theme={null}
useEffect(() => editor.zoom.subscribe(setZoomState), [editor]);
```

## Performance

Three hot paths — word-level diffing, agent text anchoring, and document
statistics — have Rust/WASM implementations. They are off by default:

```tsx theme={null}
<ReviseEditor wasmHotPaths initialDocuments={docs} />
```

The binary ships inside the package, so there is no asset to host and no path
to configure. If WebAssembly is unavailable the editor silently uses the
TypeScript implementations, which are the reference behaviour — enabling this
can only change speed, never output.

## Layout inside your page

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

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

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