Page header and footer

You can adjust some aspects of the page layout to better fit your needs. The main options are header, footer, headerHeight and footerHeight.

Header content

• What is going to be rendered within the page header
• Default: '' –empty string

Initial configuration (string)

Pages.configure({
  header: 'Awesome Tiptap header', // String!
})

Initial configuration (HTML)

Pages.configure({
  header: () => '<bold>Awesome Tiptap header</bold>', // A function that returns HTML or a string!
})

Header content editor command

editor.commands.setHeader('My awesome header') // String!
// or
editor.commands.Header((page, total) => `${page} of ${total}`) // A function that returns HTML or a string!

Header replacement templates

The header property, when usign a string comes with two handy template replacements:

• {page}: gets replaced with the current page.
• {total}: gets replaced with the total amout of pages of the document.

The header property, also accepts a function that gives you them same information, but this time it's passed on to you via function arguments:

Pages.configure({
  header: (page, total) => `${page} of ${total}` // Eg, shows: "1 of 10"
})

Header height

• Controls how tall the header area is at the top of each page.
• Default: 50 (pixels)

Initial configuration

Pages.configure({
  headerHeight: 80, // Makes the header area taller
})

Header height editor command

editor.commands.setHeaderHeight(30) // A smaller header!

Footer content

• What is going to be rendered within the page header
• Default: {page} –string with template replacement for the page number

Initial configuration (string)

Pages.configure({
  footer: 'Awesome Tiptap footer', // String!
})

Initial configuration (HTML)

Pages.configure({
  footer: () => '<bold>Awesome Tiptap footer</bold>', // A function that returns HTML or a string!
})

Footer content editor command

editor.commands.setFooter('My awesome footer') // String!
// or
editor.commands.setFooter((page, total) => `${page} of ${total}`) // A function that returns HTML or a string!

Footer replacement templates

The footer property, when usign a string comes with two handy template replacements:

• {page}: gets replaced with the current page.
• {total}: gets replaced with the total amout of pages of the document.

The footer property, also accepts a function that gives you them same information, but this time it's passed on to you via function arguments:

Pages.configure({
  footer: (page, total) => `${page} of ${total}` // Eg, shows: "1 of 10"
})

Footer height

• Controls how tall the footer area is at the bottom of each page.
• Default: 50 (pixels)

Initial configuration

Pages.configure({
  footerHeight: 80, // Makes the footer area taller
})

Editor footer height command

editor.commands.setFooterHeight(30) // A smaller footer!

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:

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
    },
  },
})