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

# Appearance

> Theme, colors, fonts, and zoom.

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

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

Without `theme`, the editor follows the host page.

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

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

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

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

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

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

## Fonts

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

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

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

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

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

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

`className` and `style` are passed to the editor root.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.