Basic Usage | Header & Footer

Configuration

You can configure headers and footers during editor initialization:

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({
      // Header configuration
      headerLeft: "Document Title",
      headerRight: "Page {page}",

      // Footer configuration
      footerLeft: "Confidential",
      footerRight: "Page {page} of {total}",
    }),
  ],
})

Configuration Options

The PaginationPlus extension supports four basic configuration options for headers and footers:

• headerLeft: Content displayed on the left side of the header
• headerRight: Content displayed on the right side of the header
• footerLeft: Content displayed on the left side of the footer
• footerRight: Content displayed on the right side of the footer

Each option accepts:

• Plain text strings
• HTML strings with formatting
• Multiline content using HTML tags

Advanced Options

• customHeader: Define different headers for specific pages (see Per-Page Customization)
• customFooter: Define different footers for specific pages (see Per-Page Customization)
• onHeaderClick: Callback function when header is clicked (see Interactive Headers & Footers)
• onFooterClick: Callback function when footer is clicked (see Interactive Headers & Footers)

Simple Example

PaginationPlus.configure({
  headerLeft: "My Document",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",
})

Next Steps

• Learn about Multiline Support to create multi-line headers and footers
• Explore Rich Text Support for HTML formatting
• Check out Dynamic Variables to use variables like {page}
• Discover Per-Page Customization to customize headers/footers for specific pages
• Add Interactive Headers & Footers with click callbacks