Per-Page Customization | Header & Footer

You can define different headers and footers for specific pages, allowing you to customize page layouts for different sections of your document.

Configuration

Use customHeader and customFooter configuration options to specify different headers and footers for specific pages:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'

const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // Default header/footer for all pages
      headerLeft: "Default Header",
      headerRight: "Page {page}",
      footerLeft: "Default Footer",
      footerRight: "Page {page}",

      // Custom header for page 2
      customHeader: {
        2: {
          headerLeft: "Chapter 2",
          headerRight: "Page {page}"
        }
      },

      // Custom footer for page 3
      customFooter: {
        3: {
          footerLeft: "Special Footer",
          footerRight: "Page {page}"
        }
      }
    }),
  ],
})

How It Works

Default Headers/Footers: All pages use the default headerLeft, headerRight, footerLeft, and footerRight values
Custom Overrides: Pages specified in customHeader or customFooter will use their custom values instead
Page Numbers: Use {page} variable in custom headers/footers to display the current page number
Multiple Pages: You can customize multiple pages by adding more entries to the objects

Examples

Cover Page with Different Header

PaginationPlus.configure({
  // Default header for all pages
  headerLeft: "Document Title",
  headerRight: "Page {page}",

  // Custom header for the first page (cover)
  customHeader: {
    1: {
      headerLeft: "",
      headerRight: ""
    }
  }
})

Chapter Pages

PaginationPlus.configure({
  headerLeft: "Main Document",
  headerRight: "Page {page}",

  customHeader: {
    5: {
      headerLeft: "Chapter 1: Introduction",
      headerRight: "Page {page}"
    },
    15: {
      headerLeft: "Chapter 2: Main Content",
      headerRight: "Page {page}"
    },
    25: {
      headerLeft: "Chapter 3: Conclusion",
      headerRight: "Page {page}"
    }
  }
})

PaginationPlus.configure({
  footerLeft: "Confidential",
  footerRight: "Page {page}",

  customFooter: {
    // Assuming page 10 is the last page
    10: {
      footerLeft: "End of Document",
      footerRight: "Final Page"
    }
  }
})

Rich Text in Custom Headers/Footers

PaginationPlus.configure({
  headerLeft: "Default Title",
  headerRight: "Page {page}",

  customHeader: {
    2: {
      headerLeft: `<h1 style="color: #2563eb;">Chapter 2</h1>
<p style="font-size: 12px;">Advanced Topics</p>`,
      headerRight: `<span style="font-weight: bold;">Page {page}</span>`
    }
  }
})

Dynamic Updates

You can also update headers and footers for specific pages using commands:

// Update header for page 2
editor.chain().focus()
  .updateHeaderContent('Page 2 Title', 'Page {page}', 2)
  .run()

// Update footer for page 3
editor.chain().focus()
  .updateFooterContent('Page 3 Footer', 'Page {page}', 3)
  .run()

The third parameter (pageNumber) is optional. If provided, it updates the header/footer for that specific page only.

Use Cases

Document Sections

Different headers for different chapters or sections
Cover pages without headers/footers
Appendix pages with different formatting

Business Documents

Title pages with company branding
Table of contents pages
Reference pages with special footers

Academic Papers

Title page without page numbers
Abstract pages with special headers
Bibliography pages with different footers

Configuration Options

Option	Type	Description
`customHeader`	`Record<number, { headerLeft: string, headerRight: string }>`	Custom headers for specific pages (page number as key)
`customFooter`	`Record<number, { footerLeft: string, footerRight: string }>`	Custom footers for specific pages (page number as key)

Best Practices

Set Defaults First: Always define default headers/footers, then override specific pages
Use Variables: Include {page} variable in custom headers/footers to show page numbers
Consistent Styling: Maintain consistent styling across custom and default headers/footers
Plan Page Numbers: Know which pages need customization before setting up

Basic Usage - Learn the basics of header/footer configuration
Interactive Headers & Footers - Add click handlers to headers and footers
Complete Examples - See real-world examples with per-page customization