---
title: "Page format"
description: "Learn how to set the page format (A4, Letter, etc) in the Tiptap Pages extension."
canonical_url: "https://tiptap.dev/docs/pages/core-concepts/page-format"
---

# Page format

Learn how to set the page format (A4, Letter, etc) in the Tiptap Pages extension.

The `pageFormat` option controls the size and margins of each page in your document. This helps your content look consistent and professional, especially when printing or exporting.

> **Interactive demo:** [PagesPageFormat](https://embed-pro.tiptap.dev/preview/Extensions/PagesPageFormat)

## Built-in formats

Pages uses standard CSS pixels — one inch is 96 pixels — so the dimensions below match what your browser will render. The Pages extension preserves fractional pixel values internally to avoid cumulative layout drift; the integers shown here are rounded for readability.

| Name      | Dimensions (cm) | Dimensions (px) | Margins (cm: top, right, bottom, left) | Margins (px)   |
| --------- | --------------- | --------------- | -------------------------------------- | -------------- |
| `A4`      | 21.0 × 29.7     | 794 × 1123      | 2.5, 2.0, 2.5, 2.0                     | 95, 76, 95, 76 |
| `A3`      | 29.7 × 42.0     | 1123 × 1587     | 2.5, 2.0, 2.5, 2.0                     | 95, 76, 95, 76 |
| `A5`      | 14.8 × 21.0     | 559 × 794       | 2.0, 1.5, 2.0, 1.5                     | 76, 57, 76, 57 |
| `Letter`  | 21.59 × 27.94   | 816 × 1056      | 2.54, 2.54, 2.54, 2.54                 | 96, 96, 96, 96 |
| `Legal`   | 21.59 × 35.56   | 816 × 1345      | 2.54, 2.54, 2.54, 2.54                 | 96, 96, 96, 96 |
| `Tabloid` | 27.94 × 43.18   | 1056 × 1633     | 2.54, 2.54, 2.54, 2.54                 | 96, 96, 96, 96 |

Each built-in format ships with default margins and sizes. To customize them, define your own format object — see [Custom page formats](#custom-page-formats) below.

## Using built-in formats

```js
Pages.configure({
  pageFormat: 'Letter',
})
```

### Using constants for built-in formats

You can also import the built-in page format constants for better autocompletion and type safety:

```js
import { PAGE_FORMATS } from '@tiptap-pro/extension-pages'

Pages.configure({
  pageFormat: PAGE_FORMATS.Letter,
})
```

This is equivalent to using the string literal:

```js
Pages.configure({
  pageFormat: 'Letter',
})
```

Use whichever approach you prefer.

## Custom page formats

> **Interactive demo:** [PagesCustomPageFormat](https://embed-pro.tiptap.dev/preview/Extensions/PagesCustomPageFormat)

You can define custom page formats by providing a page format object with your desired dimensions and margins:

```js
Pages.configure({
  pageFormat: {
    id: 'custom-page-format',
    width: cmToPixels(22.94),
    height: cmToPixels(35.18),
    margins: {
      top: cmToPixels(2.54),
      right: cmToPixels(2.54),
      bottom: cmToPixels(2.54),
      left: cmToPixels(2.54),
    },
  },
})
```

> **Tip:**
>
> In this example, we use the [`cmToPixels`](https://tiptap.dev/docs/pages/utilities/cm-to-pixels.md) utility to define our
> page dimensions and margins in centimeters, making it easy to work with familiar print
> measurements. Learn more about cmToPixels in the [utility
> reference](https://tiptap.dev/docs/pages/utilities/cm-to-pixels.md).

## Page margins

Page margins can be customized by using a custom page format. Built-in formats come with fixed margins, but you can create your own format with custom margins:

```js
Pages.configure({
  pageFormat: {
    id: 'custom-layout',
    width: 794, // px
    height: 1123, // px
    margins: {
      top: 60, // px
      right: 40, // px
      bottom: 60, // px
      left: 40, // px
    },
  },
})
```

## Changing page format programmatically

Use the `setPageFormat` command to change the page format after the editor is initialized:

```js
// Switch to a built-in format
editor.commands.setPageFormat('A4')

// Switch to a custom format
editor.commands.setPageFormat({
  id: 'custom-wide-page-format',
  width: cmToPixels(27.94),
  height: cmToPixels(43.18),
  margins: {
    top: cmToPixels(2.54),
    right: cmToPixels(2.54),
    bottom: cmToPixels(2.54),
    left: cmToPixels(2.54),
  },
})
```

## Listening to page format changes

Use the `onPageFormatChange` callback to react when the page format is changed:

```js
Pages.configure({
  pageFormat: 'A4',
  onPageFormatChange: (pageFormat) => {
    console.log('Page format changed to:', pageFormat)
    // Update your UI, save the preference, etc.
  },
})
```

> **Flexibility:**
>
> With custom page formats, you have full control over both page dimensions and margins to create
> the exact layout you need.