Page break

The pageBreakBackground 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 break background

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

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

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

editor.commands.setPageBreakBackground(pageBreakBackground)
// You should also do this! 👇🏻
document.body.style.backgroundColor = pageBreakBackground

Helpful tip

You should change the background color of the body (or your editor container) to match the page break background as well because the page break background is only applied to the page break 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.