Page layout options

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

Header height

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

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

Footer height

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

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

Page gap

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

Pages.configure({
  pageGap: 30, // Reduces the space between pages
})

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