Zoom and fit to screen

Fit the document to the viewport, control zoom from your UI with useZoom, and let the comments pane shrink the page instead of covering it.

The editor fits the page to its container by default. A container wide enough for the page renders at 100%. A narrower container reduces the scale to a minimum of 50%, then scrolls horizontally if needed.

Choose a zoom mode

Zoom has a value and a mode. The value sets the page scale. The mode determines how the editor calculates that value.

Mode	Behavior
`'auto'` (default)	Fit the page width, between 50% and 100%. Shrinks a page that does not fit, leaves one that does.
`{ type: 'fit', fit: 'pageWidth' }`	Fit the page width in both directions, so a wide window magnifies the page.
`{ type: 'fixed' }`	Use the scale set by `zoom`, regardless of container size.

<DocxEditor document={bytes} />                          {/* auto */}
<DocxEditor document={bytes} zoomMode={{ type: 'fit', fit: 'pageWidth' }} />
<DocxEditor document={bytes} zoom={1} zoomMode={{ type: 'fixed' }} />

<!-- auto -->
<DocxEditor :document="bytes" />
<DocxEditor :document="bytes" :zoom-mode="{ type: 'fit', fit: 'pageWidth' }" />
<DocxEditor :document="bytes" :zoom="1" :zoom-mode="{ type: 'fixed' }" />

Passing zoom without zoomMode selects fixed mode.

Fit mode updates when the container size changes. Resizing the window, opening the comments pane, or docking the navigation pane changes the space beside the page. The engine updates the scale without additional host code.

Selecting a zoom level switches to fixed mode. Resizing the container then preserves that scale.

Build a zoom control

useZoom returns zoom state and actions. Render this control inside DocxEditor.Root.

import { useZoom } from '@docx-editor.dev/react';

function ZoomControl() {
  const { zoom, isFit, auto, zoomIn, zoomOut, canZoomIn, canZoomOut } = useZoom();

  return (
    <div>
      <button type="button" aria-label="Zoom out" onClick={zoomOut} disabled={!canZoomOut}>
        &minus;
      </button>
      <span>{Math.round(zoom * 100)}%</span>
      <button type="button" aria-label="Zoom in" onClick={zoomIn} disabled={!canZoomIn}>
        +
      </button>
      <button type="button" onClick={auto} aria-pressed={isFit}>
        Fit
      </button>
    </div>
  );
}

<script setup lang="ts">
import { useZoom } from '@docx-editor.dev/vue';

const { zoom, isFit, auto, zoomIn, zoomOut, canZoomIn, canZoomOut } = useZoom();
</script>

<template>
  <div>
    <button type="button" aria-label="Zoom out" :disabled="!canZoomOut" @click="zoomOut">
      &minus;
    </button>
    <span>{{ Math.round(zoom * 100) }}%</span>
    <button type="button" aria-label="Zoom in" :disabled="!canZoomIn" @click="zoomIn">+</button>
    <button type="button" :aria-pressed="isFit" @click="auto">Fit</button>
  </div>
</template>

The Vue composable returns computed refs. Destructured bindings unwrap in the template, so read them with .value only in script code.

Member	What it does
`zoom`	The resolved scale. `1` is 100%.
`mode`, `isFit`	Where the scale came from. Render a control's selected state from these, not from `zoom`.
`setZoom(n)`	A fixed scale. Leaves any fit.
`setMode(m)`	`'auto'`, a fit, or `{ type: 'fixed' }`.
`auto()`, `fitToWidth()`	The two fits, by name.
`reset()`	Reset to fixed 100% zoom.
`zoomIn()`, `zoomOut()`	Move to the next preset in `levels`.
`canZoomIn`, `canZoomOut`	Whether a higher or lower preset remains.

Render the selected state from mode, not from zoom. A menu that ticks the level matching the percentage marks "75%" as selected while fit mode still owns the scale.

The packaged toolbar includes Automatic, Fit width, and preset zoom levels. Its checkmark follows the selected mode.

If you configure custom fit bounds, the menu shows the resolved percentage without a checkmark. Selecting a preset replaces those bounds.

Fit comments on narrow screens

The comments rail reserves space beside the page. In fit mode, opening comments reduces the available document width and shrinks the page.

On narrow screens, automatic mode stops shrinking at 50% zoom. The container then scrolls horizontally to keep the document readable.

Set minZoom to choose a different minimum scale:

<DocxEditor document={bytes} zoomMode={{ type: 'fit', fit: 'pageWidth', minZoom: 0.35 }} />

<DocxEditor :document="bytes" :zoom-mode="{ type: 'fit', fit: 'pageWidth', minZoom: 0.35 }" />

Without an adapter

Zoom APIs are on the engine. Every host calls the same methods:

editor.setZoomMode('auto');
editor.getZoom(); // 0.79 on a container too narrow for the page
editor.getZoomMode(); // { type: 'fit', fit: 'pageWidth', minZoom: 0.5, maxZoom: 1 }

editor.setZoom(1.5); // leaves the fit
editor.getZoomMode(); // { type: 'fixed' }

snapshot() includes zoom and zoomMode. The editor emits selectionChange when either changes, including after a container resize.

Next steps

React hooks: Read editor state and run commands.
Vue composables: Use reactive zoom state.
Toolbar: Configure the packaged zoom control.