Header & Footer | Tiptap Pagination

The PaginationPlus extension provides powerful header and footer customization with support for multiline content and rich text (HTML). You can create professional document headers and footers with formatted text, multiple lines, and dynamic page numbers.

Features

Multiline Support: Create headers and footers with multiple lines of text
Rich Text (HTML): Use HTML tags for formatting (bold, italic, colors, etc.)
Dynamic Variables: Use {page} to display current page number
Automatic Height Calculation: Header and footer heights adjust automatically based on content
Left & Right Positioning: Separate content for left and right sides of headers/footers
Per-Page Customization: Define different headers and footers for specific pages
Interactive Headers & Footers: Add click callbacks to handle user interactions

Quick Start

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

Topics

Basic Usage - Learn how to configure headers and footers
Multiline Support - Create headers and footers with multiple lines
Rich Text Support - Format content with HTML tags
Dynamic Variables - Use variables like {page} in your content
Automatic Height Calculation - Understand how heights are calculated
Per-Page Customization - Define different headers/footers for specific pages
Interactive Headers & Footers - Add click callbacks for user interactions
Complete Examples - Real-world examples for different use cases

Links:

NPM
GitHub