Tiptap Docs

Page gap & background

Looking for explicit page breaks?

This page covers visual styling between pages (background color and gap). For inserting explicit page breaks into your document, see the PageBreak node documentation.

Renamed from pageBreakBackground

The pageBreakBackground option and setPageBreakBackground command have been renamed to pageGapBackground and setPageGapBackground to avoid confusion with the new PageBreak node. Update your code accordingly.

The pageGapBackground and pageGap options lets you change the background color of the area between pages and the spacing between pages. This can help visually separate pages or match your app's background color design.

How to set the page gap background

The initial editor configuration for the page gap background can be done at the .configure() extension level:

Pages.configure({
  pageGapBackground: '#f8f8f8', // Light gray between pages
})

Then, at any point, you could make use of the exposed editor command setPageGapBackground(color: string) to change the page gap color:

editor.commands.setPageGapBackground(pageGapBackground)
// You should also do this!
document.body.style.backgroundColor = pageGapBackground

Helpful tip

You should change the background color of the body (or your editor container) to match the page gap background as well because the page gap background is only applied to the page gap itself, not the entire document or the Tiptap editor.

Page gap

  • Sets the space between each page.
  • Default: 50 (pixels)

Initial configuration 

Pages.configure({
  pageGap: 20, // in pixels
})

Editor command 

editor.commands.setPageGap(20) // in pixels

Hint

The pageGap property only affects the space between pages, not the page itself.

PreviouslyHeaders & Footers