Zoom

Zoom lets your users make the editor content bigger or smaller without changing the actual document. Think of it like pinching to zoom on your phone, or using the zoom slider in Google Docs.

Zoom in to see details up close (great for precise formatting)
Zoom out to see more of the document at once (great for getting an overview)
The document itself doesn't change — zoom is purely visual

Quick start

Set an initial zoom level when configuring the extension:

import { Pages } from '@tiptap-pro/extension-pages'

Pages.configure({
  zoom: 0.75, // 75% — makes everything smaller
})

Change the zoom level at any time with a command:

// Zoom to 150%
editor.commands.setZoom(1.5)

// Zoom to 50%
editor.commands.setZoom(0.5)

// Back to normal (100%)
editor.commands.setZoom(1)

That's it. Two lines of code and you have zoom.

Zoom range

Zoom accepts any value between 0.25 (25%) and 4 (400%). Values outside this range are automatically clamped.

Value	Zoom level	Use case
`0.25`	25%	Maximum zoom out — see entire document layout
`0.5`	50%	Overview mode — good for long documents
`0.75`	75%	Slightly smaller — fits more on screen
`1`	100%	Default — normal size
`1.25`	125%	Slightly larger — easier to read
`1.5`	150%	Comfortable reading zoom
`2`	200%	Large — good for accessibility
`4`	400%	Maximum zoom in — pixel-level detail

// These all work
editor.commands.setZoom(0.25)  // minimum
editor.commands.setZoom(1.5)   // 150%
editor.commands.setZoom(4)     // maximum

// These get clamped automatically
editor.commands.setZoom(0.1)   // becomes 0.25
editor.commands.setZoom(10)    // becomes 4

Reading the current zoom level

You can read the current zoom level from storage at any time:

// Read the current zoom level directly
const zoom = editor.storage.pages.zoom
console.log(`Current zoom: ${zoom * 100}%`) // e.g. "Current zoom: 125%"

// Or use the getter function
const zoom = editor.storage.pages.getZoom?.()

Reacting to zoom changes

Use the onZoomChange callback to keep your UI in sync when the zoom level changes. This is useful for building zoom controls like dropdowns or sliders.

Pages.configure({
  zoom: 1,
  onZoomChange: (zoom) => {
    // Update your UI, e.g. a dropdown or label
    console.log(`Zoom changed to ${zoom * 100}%`)
  },
})

import { Pages } from '@tiptap-pro/extension-pages'
import { useState } from 'react'

function MyEditor() {
  const [zoom, setZoom] = useState(1)

  const editor = useEditor({
    extensions: [
      Pages.configure({
        pageFormat: 'A4',
        onZoomChange: setZoom, // keeps dropdown in sync
      }),
    ],
  })

  return (
    <>
      <select
        value={zoom}
        onChange={(e) => {
          const value = parseFloat(e.target.value)
          editor.commands.setZoom(value)
        }}
      >
        <option value={0.5}>50%</option>
        <option value={0.75}>75%</option>
        <option value={1}>100%</option>
        <option value={1.25}>125%</option>
        <option value={1.5}>150%</option>
        <option value={2}>200%</option>
      </select>
      <EditorContent editor={editor} />
    </>
  )
}

Configuration reference

Option

Option	Type	Default	Description
`zoom`	`number`	`1`	Initial zoom level. Clamped to `[0.25, 4]`.
`onZoomChange`	`(zoom: number) => void`	`undefined`	Callback fired when zoom changes via `setZoom`.

Command

Command	Parameters	Description
`setZoom`	`zoom: number`	Set the zoom level. Value is clamped to `[0.25, 4]`.

Storage

Property	Type	Description
`zoom`	`number`	Current zoom level.
`getZoom`	`() => number`	Returns the current zoom level.

Good to know

Zoom is visual only. It does not change the document structure, content, or formatting. When you export to DOCX or print, the output is always at 100%.
Headers and footers follow zoom. They scale with the rest of the page. If you open a header or footer editor, the overlay matches the current zoom level — even if you change zoom while editing.
Pagination stays accurate. Page breaks, page count, and all pagination calculations remain correct at every zoom level. Zooming does not add or remove pages.

PreviouslyPage gap & background

Next upPageBreak node