---
title: "Page format"
description: "Learn how to set the page format (A4, Letter, etc) in the Tiptap Pages extension."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/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-docs.lin52025i.qzz.io/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-docs.lin52025i.qzz.io/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.