Page header and footer

Headers and footers allow you to display consistent content at the top and bottom of each page. The Pages extension supports static text, HTML markup, dynamic page numbering with placeholders, rich formatting via JSONContent, different headers/footers for first page or odd/even pages, and interactive editing through double-click in the header or footer area.

Imported from DOCX

When you import a .docx file with the DOCX import extension, headers and footers from the document are auto-applied to Pages — including different first page and odd/even variants. No extra wiring required.

Content types

The PagesHeaderFooter type accepts either an HTML string or Tiptap JSONContent for rich formatting:

type PagesHeaderFooter = string | JSONContent

HTML strings

You can use plain text or HTML markup for headers and footers:

Pages.configure({
  header: 'My Document Title',
  footer: '<strong>Confidential</strong> - Internal Use Only',
})

Template placeholders

Use {page} and {total} placeholders for dynamic page numbering. These work in both HTML strings and JSONContent, and are substituted at render time:

Pages.configure({
  header: 'Company Report',
  footer: 'Page {page} of {total}',
})

When the document is exported to .docx via the ExportDocx editor extension, each {page} / {total} is converted into a live Word PAGE / NUMPAGES field, so Word recalculates the numbers on print or repagination.

Renaming or disabling placeholders

Use the placeholders option to rename the built-in tokens or turn substitution off entirely. Three shapes are accepted:

// Rename {total} to {pages} (keeps {page} working)
Pages.configure({
  placeholders: { total: 'pages' },
  footer: 'Page {page} of {pages}',
})

// Rename both built-ins
Pages.configure({
  placeholders: { page: 'p', total: 'pages' },
  footer: '{p} / {pages}',
})

// Disable substitution — {page} and {total} render as literal text
Pages.configure({
  placeholders: false,
  footer: 'Page {page} of {total}',
})

When you rename a built-in, the original token name stops being recognized. Substitution only ever runs on header/footer content — body text containing {page} / {total} is always left literal.

DOCX import

When importing a Word file, PAGE and NUMPAGES fields come back as text tokens that match your active placeholders config — {page} / {total} by default, or whatever you renamed them to. The import-side wiring forwards your registry to the convert service, so a Word document with live page numbers round-trips back to live fields on re-export with no extra config. See DOCX import → page-number fields for the full picture.

JSONContent

For rich formatting, use Tiptap's JSONContent structure:

Pages.configure({
  header: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [{ type: 'text', text: 'Document Title', marks: [{ type: 'bold' }] }],
      },
    ],
  },
})

Configuration vs commands

Use Pages.configure() when setting up the editor with initial default content. Use editor commands like setHeader() to update content dynamically at runtime.

Both approaches are valid for setting content:

Initial setup with configure:

Pages.configure({
  header: 'My Document Title',
  footer: 'Page {page} of {total}',
})

Runtime updates with commands:

// Update header after editor is initialized
editor.commands.setHeader('Updated Header')

Header configuration

Default header

The header option sets the content displayed in the header area of each page.

Initial configuration:

Pages.configure({
  header: '<strong>Tiptap</strong> – Document Header',
})

Editor command:

editor.commands.setHeader('My New Header')
// or with HTML
editor.commands.setHeader('<em>Updated</em> Header')

Header margin

The headerTopMargin option controls the distance from the page's top edge to where the header content starts (in pixels). If not specified, it defaults to 50% of the top margin.

Initial configuration:

Pages.configure({
  headerTopMargin: 30,
})

Editor commands:

// Override the header top margin
editor.commands.setHeaderTopMargin(40)

// Clear the override and fall back to the active format's default
// (50% of the format's top margin)
editor.commands.resetHeaderTopMargin()

Input validation

setHeaderTopMargin rejects negative values and NaN — the command returns false and logs a warning in those cases.

The footer option sets the content displayed in the footer area of each page.

Initial configuration:

Pages.configure({
  footer: 'Page {page} of {total}',
})

Editor command:

editor.commands.setFooter('Powered by Tiptap')
// or with placeholders
editor.commands.setFooter('{page}/{total}')

The footerBottomMargin option controls the distance from the footer content bottom to the page's bottom edge (in pixels). If not specified, it defaults to 50% of the bottom margin.

Initial configuration:

Pages.configure({
  footerBottomMargin: 30,
})

Editor commands:

// Override the footer bottom margin
editor.commands.setFooterBottomMargin(40)

// Clear the override and fall back to the active format's default
// (50% of the format's bottom margin)
editor.commands.resetFooterBottomMargin()

Input validation

setFooterBottomMargin rejects negative values and NaN — the command returns false and logs a warning in those cases.

Different first page

Enable a different header and/or footer for the first page, similar to Microsoft Word's "Different First Page" option.

Note

The setDifferentFirstPage() command enables both different first page header and footer together, matching Microsoft Word's behavior.

First page slot starts empty

Calling setDifferentFirstPage(true) does not copy the default header/footer into the first page slot — it starts empty, matching Microsoft Word. To pre-populate the first page header or footer, call setHeaderFirstPage / setFooterFirstPage after enabling the flag, or set headerFirstPage / footerFirstPage in Pages.configure().

Configuration

Pages.configure({
  header: 'Default Header',
  footer: 'Page {page}',
  differentFirstPage: true,
  headerFirstPage: 'Title Page',
  footerFirstPage: '', // No footer on first page
})

Commands

// Enable different first page (affects both header and footer)
editor.commands.setDifferentFirstPage(true)

// Set first page header and footer content
editor.commands.setHeaderFirstPage('Welcome to My Document')
editor.commands.setFooterFirstPage('')

Different odd and even pages

Enable different headers and/or footers for odd-numbered pages (1, 3, 5...) and even-numbered pages (2, 4, 6...), similar to Microsoft Word's "Different Odd & Even Pages" option.

Note

The setDifferentOddEven() command enables both different odd/even headers and footers together, matching Microsoft Word's behavior.

Odd slot inherits the default on enable

When you call setDifferentOddEven(true), the existing default header/footer content is copied into the odd slot if the odd slot is empty. This matches Microsoft Word's continuity behavior — pages 1, 3, 5… keep showing what was there before the flag was toggled, while the even slot starts empty for you to fill in. If you toggle the flag off and on again, content you previously typed into the odd slot is preserved (the copy only happens when the odd slot is empty).

Configuration

Pages.configure({
  differentOddEven: true,
  headerOdd: 'Chapter Title – Odd Page',
  headerEven: 'Book Title – Even Page',
  footerOdd: 'Page {page}',
  footerEven: 'Page {page}',
})

Commands

// Enable different odd/even (affects both header and footer)
editor.commands.setDifferentOddEven(true)

// Set odd and even page headers
editor.commands.setHeaderOdd('Odd Page Header')
editor.commands.setHeaderEven('Even Page Header')

// Set odd and even page footers
editor.commands.setFooterOdd('Page {page}')
editor.commands.setFooterEven('Page {page}')

Combining first page and odd/even pages

When both differentFirstPage and differentOddEven are enabled, the first page header/footer takes precedence over odd/even settings for page 1.

Precedence order:

First page (if differentFirstPage is enabled) - applies to page 1
Odd/even (if differentOddEven is enabled) - applies to pages 2+
Default header/footer - fallback (used only when neither differentFirstPage nor differentOddEven is enabled for that zone)

Empty type-specific slots render empty

When differentFirstPage or differentOddEven is enabled, the corresponding slot is authoritative for the pages it covers — even when empty. For example, with differentFirstPage: true and an empty headerFirstPage, page 1 renders an empty header (it does not silently fall back to the default header). This matches Microsoft Word and Google Docs. The default header/footer is only used as a fallback when the relevant flag (differentFirstPage or differentOddEven) is off.

Pages.configure({
  header: 'Default Header', // Fallback
  differentFirstPage: true,
  headerFirstPage: 'Title Page', // Page 1
  differentOddEven: true,
  headerOdd: 'Odd Page Header', // Pages 3, 5, 7...
  headerEven: 'Even Page Header', // Pages 2, 4, 6...
})

Editable headers and footers

Users can edit headers and footers directly by double-clicking on them. This opens a fully featured Tiptap editor that allows rich text editing.

Custom extensions

The header/footer editor uses the same extensions you configure on the main editor. To match the schema (so the same marks, nodes, and table behaviour work in headers and footers), pass ConvertKit and TableKit through headerFooterExtensions:

import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'

Pages.configure({
  header: 'My header',
  headerFooterExtensions: [ConvertKit.configure({ table: false }), TableKit],
})

Any Tiptap extension can be added to the header/footer editors through the headerFooterExtensions option. Mirroring the main editor's stack keeps the schema, keyboard shortcuts, and rendering consistent across the document and its headers and footers.

Active editor state

When a user double-clicks a header or footer to edit it, the extension exposes the active editor through storage. This allows you to build custom toolbars that work with the header/footer editor.

Storage properties:

activeEditor – The Tiptap Editor instance for the currently open header or footer editor (or null)
activeEditorType – 'header', 'footer', or null
activePageNumber – The page number being edited (or null)
headerEditorOn / headerEditorOff – Subscribe/unsubscribe to events on the header overlay's inner Tiptap editor
footerEditorOn / footerEditorOff – Subscribe/unsubscribe to events on the footer overlay's inner Tiptap editor

The extension also listens to focus events from the header and footer inner editors. When the user focuses an open header or footer editor, activeEditor, activeEditorType, and activePageNumber are refreshed from the active overlay.

Locking the header or footer

Set editableHeader or editableFooter to false to render headers/footers without the double-click editing affordance. When locked, the overlay can't be opened by users or by code — the cursor: pointer hint is dropped, the openHeaderEditor / openFooterEditor commands return false, and any overlay already open is closed (which restores the main editor's editable state).

Pages.configure({
  header: 'Page {page} of {total}',
  editableHeader: false, // locked at editor creation
})

Toggle at runtime with setHeaderEditable / setFooterEditable:

editor.commands.setHeaderEditable(false) // lock
editor.commands.setHeaderEditable(true) // unlock

editor.commands.setFooterEditable(false)
editor.commands.setFooterEditable(true)

Locking does not hide content

Headers and footers still render normally when locked — only the inline editing affordance is removed. Use setHeader('') / setFooter('') if you want to clear the content.

Listening to header/footer editor events

Headers and footers have their own editors. You can subscribe to events from these editors via editor.storage.pages.

import { useEffect, useState } from 'react'

function HeaderFooterStatus({ editor }) {
  const [activeEditorType, setActiveEditorType] = useState(null)
  const [activePageNumber, setActivePageNumber] = useState(null)

  useEffect(() => {
    if (!editor) return

    const syncActiveEditorState = () => {
      const { activeEditorType, activePageNumber } = editor.storage.pages
      setActiveEditorType(activeEditorType)
      setActivePageNumber(activePageNumber)
    }

    editor.storage.pages.headerEditorOn?.('focus', syncActiveEditorState)
    editor.storage.pages.footerEditorOn?.('focus', syncActiveEditorState)

    return () => {
      editor.storage.pages.headerEditorOff?.('focus', syncActiveEditorState)
      editor.storage.pages.footerEditorOff?.('focus', syncActiveEditorState)
    }
  }, [editor])

  if (!activeEditorType || !activePageNumber) {
    return <span>Editing document</span>
  }

  return (
    <span>
      Editing {activeEditorType} on page {activePageNumber}
    </span>
  )
}

You can use the same helpers for other Tiptap editor events, such as update, selectionUpdate, blur, or transaction.

Here's an example of a React component that provides a unified toolbar for both the main editor and header/footer editors:

import { useEditor, useEditorState, EditorContent } from '@tiptap/react'
import { useEffect, useState } from 'react'

function DocumentEditor() {
  const [headerFooterEditor, setHeaderFooterEditor] = useState(null)
  const [activeEditorType, setActiveEditorType] = useState(null)
  const [activePageNumber, setActivePageNumber] = useState(null)

  const editor = useEditor({
    extensions: [
      ConvertKit.configure({ table: false }),
      TableKit,
      Pages.configure({
        header: 'Document Header',
        footer: 'Page {page}',
      }),
    ],
  })

  // Listen for changes to active header/footer editor
  useEffect(() => {
    if (!editor) return

    const syncActiveHeaderFooterEditor = () => {
      const { activeEditor, activeEditorType, activePageNumber } = editor.storage.pages
      setHeaderFooterEditor(activeEditor)
      setActiveEditorType(activeEditorType)
      setActivePageNumber(activePageNumber)
    }

    editor.on('update', syncActiveHeaderFooterEditor)
    editor.storage.pages.headerEditorOn?.('focus', syncActiveHeaderFooterEditor)
    editor.storage.pages.footerEditorOn?.('focus', syncActiveHeaderFooterEditor)

    return () => {
      editor.off('update', syncActiveHeaderFooterEditor)
      editor.storage.pages.headerEditorOff?.('focus', syncActiveHeaderFooterEditor)
      editor.storage.pages.footerEditorOff?.('focus', syncActiveHeaderFooterEditor)
    }
  }, [editor])

  // Use the active editor (header/footer or main)
  const activeEditor = activeEditorType ? headerFooterEditor : editor

  const { isBoldActive } = useEditorState({
    editor: activeEditor,
    selector: ({ editor: e }) => ({
      isBoldActive: e?.isActive('bold') ?? false,
    }),
  })

  return (
    <div>
      <div className="toolbar">
        <span>
          Editing:{' '}
          {activeEditorType && activePageNumber
            ? `${activeEditorType} on page ${activePageNumber}`
            : 'Document'}
        </span>
        <button
          className={isBoldActive ? 'is-active' : ''}
          onClick={() => activeEditor?.chain().focus().toggleBold().run()}
        >
          Bold
        </button>
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

Accessing header and footer content

After users edit headers or footers through the headers or footers Tiptap editors, the content is stored in the extension's storage. This is useful for saving the document or exporting to formats like DOCX.

HTML content

Access the edited HTML content:

// Default header/footer
const headerHTML = editor.storage.pages.headerHTML
const footerHTML = editor.storage.pages.footerHTML

// First page
const headerFirstPageHTML = editor.storage.pages.headerFirstPageHTML
const footerFirstPageHTML = editor.storage.pages.footerFirstPageHTML

// Odd/even pages
const headerOddHTML = editor.storage.pages.headerOddHTML
const headerEvenHTML = editor.storage.pages.headerEvenHTML
const footerOddHTML = editor.storage.pages.footerOddHTML
const footerEvenHTML = editor.storage.pages.footerEvenHTML

Note

These storage values are null until the user has edited the header/footer through the corresponding header/footer editor. Before editing, the original template from configuration is used.

JSON content for DOCX export

For DOCX export, use the JSON versions which provide structured Tiptap document format:

// Default header/footer
const headerJSON = editor.storage.pages.headerJSON
const footerJSON = editor.storage.pages.footerJSON

// First page
const headerFirstPageJSON = editor.storage.pages.headerFirstPageJSON
const footerFirstPageJSON = editor.storage.pages.footerFirstPageJSON

// Odd/even pages
const headerOddJSON = editor.storage.pages.headerOddJSON
const headerEvenJSON = editor.storage.pages.headerEvenJSON
const footerOddJSON = editor.storage.pages.footerOddJSON
const footerEvenJSON = editor.storage.pages.footerEvenJSON

Note

These storage values are null until the user has edited the header/footer through the corresponding header/footer editor. Before editing, the original template from configuration is used.

Saving header and footer content

Persisting header and footer content is your responsibility. Retrieve the content from storage when saving your document and restore it when loading.

Saving all header and footer content:

function getHeaderFooterContent(editor) {
  const { pages } = editor.storage

  return {
    // Default header/footer
    headerHTML: pages.headerHTML,
    headerJSON: pages.headerJSON,
    footerHTML: pages.footerHTML,
    footerJSON: pages.footerJSON,

    // First page
    headerFirstPageHTML: pages.headerFirstPageHTML,
    headerFirstPageJSON: pages.headerFirstPageJSON,
    footerFirstPageHTML: pages.footerFirstPageHTML,
    footerFirstPageJSON: pages.footerFirstPageJSON,

    // Odd/even pages
    headerOddHTML: pages.headerOddHTML,
    headerOddJSON: pages.headerOddJSON,
    headerEvenHTML: pages.headerEvenHTML,
    headerEvenJSON: pages.headerEvenJSON,
    footerOddHTML: pages.footerOddHTML,
    footerOddJSON: pages.footerOddJSON,
    footerEvenHTML: pages.footerEvenHTML,
    footerEvenJSON: pages.footerEvenJSON,
  }
}

// Save to your backend
const headerFooterData = getHeaderFooterContent(editor)
await saveDocument({ content: editor.getJSON(), headerFooter: headerFooterData })

Programmatically opening and closing editors

You can open and close header and footer editors programmatically. This is useful when integrating with custom UI elements, building navigation interfaces, or responding to user actions.

Opening editors

Use the openHeaderEditor and openFooterEditor commands to programmatically open the editor for a specific page:

// Open header editor for page 1
editor.commands.openHeaderEditor({ pageNumber: 1 })

// Open footer editor for page 3
editor.commands.openFooterEditor({ pageNumber: 3 })

These commands return true if the editor was opened successfully, or false if the specified page doesn't exist.

Note

Opening an editor automatically closes any previously open header or footer editor. The main document editor becomes non-editable while the header or footer editor is open.

Use cases:

Building a page navigation UI that lets users jump directly to editing a specific page's header or footer
Creating a "Go to header/footer" button in your toolbar
Implementing keyboard shortcuts to open headers or footers
Programmatically opening editors in response to external events

Example: Page navigation component

function PageNavigation({ editor }) {
  const pageCount = editor.storage.pages.getPageCount?.() ?? 1

  return (
    <div>
      {Array.from({ length: pageCount }, (_, i) => (
        <div key={i + 1}>
          <span>Page {i + 1}</span>
          <button onClick={() => editor.commands.openHeaderEditor({ pageNumber: i + 1 })}>
            Edit Header
          </button>
          <button onClick={() => editor.commands.openFooterEditor({ pageNumber: i + 1 })}>
            Edit Footer
          </button>
        </div>
      ))}
    </div>
  )
}

Closing editors

Use the close commands to dismiss the header or footer editor:

// Close whichever editor is currently open
editor.commands.closeHeaderFooterEditors()

// Close specific editors
editor.commands.closeHeaderEditor()
editor.commands.closeFooterEditor()

Preventing editor close on double-click

By default, double-clicking outside an open header or footer editor closes it. You can prevent this behavior using callback options, which is useful when you have toolbar buttons or other UI elements that users might double-click while editing.

Configuration

Three callback options are available:

onDblClickHeaderFooterPreventClose - Applies to both headers and footers (fallback)
onDblClickHeaderPreventClose - Applies only to headers (takes priority over the fallback)
onDblClickFooterPreventClose - Applies only to footers (takes priority over the fallback)

Each callback receives the MouseEvent and returns true to prevent closing or false to allow closing.

Example: Prevent closing when clicking a toolbar

Pages.configure({
  header: 'My Header',
  footer: 'Page {page}',
  onDblClickHeaderFooterPreventClose: (event) => {
    // Keep editor open if clicking inside the toolbar
    const toolbar = document.querySelector('.my-toolbar')
    return toolbar?.contains(event.target)
  },
})

Example: Different behavior for headers and footers

Pages.configure({
  header: 'My Header',
  footer: 'Page {page}',
  // Never close header editor on double-click outside
  onDblClickHeaderPreventClose: () => true,
  // Use default behavior for footer (close on double-click outside)
  onDblClickFooterPreventClose: () => false,
})

Accent colors

Customize the visual appearance of the header and footer editor overlays using accent colors. The accent color affects three elements:

Caret color - The text cursor in the editor
Toolbar border - The top border (header) or bottom border (footer) of the editing toolbar
Label background - The "Header" or "Footer" label background

Configuration

Set accent colors when configuring the extension:

Pages.configure({
  header: 'My Header',
  footer: 'Page {page}',
  // Set the same color for both header and footer overlays
  accentColor: '#3b82f6',
})

You can also set different colors for header and footer overlays:

Pages.configure({
  header: 'My Header',
  footer: 'Page {page}',
  headerAccentColor: '#3b82f6', // Blue for headers
  footerAccentColor: '#10b981', // Green for footers
})

Runtime updates

Change accent colors dynamically using commands:

// Update both header and footer overlay colors
editor.commands.setAccentColor('#8b5cf6')

// Update header overlay color only
editor.commands.setHeaderAccentColor('#3b82f6')

// Update footer overlay color only
editor.commands.setFooterAccentColor('#ef4444')

CSS color values

Accent color options accept any valid CSS color value including hex (#3b82f6), rgb (rgb(59, 130, 246)), hsl (hsl(217, 91%, 60%)), oklch, or CSS variables (var(--primary-color)).

Limitations

Header & Footer editor styling

The header/footer editor uses built-in styles. However, you can customize the accent color using the accentColor, headerAccentColor, and footerAccentColor options.

Collaboration

Header and footer editors participate in collaboration alongside the main document. Set up a collaborative provider as you would for any Pages editor — no extra wiring is required to bring headers and footers into the same session. See Adding collaboration to Pages for the full setup walkthrough.

Complete options reference

Option	Type	Default	Description
`header`	`string \| JSONContent`	`''`	Default header content
`footer`	`string \| JSONContent`	`''`	Default footer content
`headerTopMargin`	`number`	50% of top margin	Distance from page top to header content
`footerBottomMargin`	`number`	50% of bottom margin	Distance from footer content to page bottom
`differentFirstPage`	`boolean`	`false`	Enable different first page header and footer
`headerFirstPage`	`PagesHeaderFooter`	`''`	First page header content
`footerFirstPage`	`PagesHeaderFooter`	`''`	First page footer content
`differentOddEven`	`boolean`	`false`	Enable different odd/even headers and footers
`headerOdd`	`PagesHeaderFooter`	`''`	Odd pages header content
`headerEven`	`PagesHeaderFooter`	`''`	Even pages header content
`footerOdd`	`PagesHeaderFooter`	`''`	Odd pages footer content
`footerEven`	`PagesHeaderFooter`	`''`	Even pages footer content
`editableHeader`	`boolean`	`true`	Whether double-clicking the header opens the inline editor
`editableFooter`	`boolean`	`true`	Whether double-clicking the footer opens the inline editor
`headerFooterExtensions`	`Extension[]`	`StarterKit`	Extensions for header/footer editor
`onDblClickHeaderFooterPreventClose`	`(event: MouseEvent) => boolean`	`undefined`	Callback to prevent closing header/footer editors on double-click outside
`onDblClickHeaderPreventClose`	`(event: MouseEvent) => boolean`	`undefined`	Callback to prevent closing header editor on double-click outside
`onDblClickFooterPreventClose`	`(event: MouseEvent) => boolean`	`undefined`	Callback to prevent closing footer editor on double-click outside
`accentColor`	`string`	`'#6366f1'`	Accent color for header/footer editor overlays
`headerAccentColor`	`string`	`accentColor` value	Accent color for header editor overlay
`footerAccentColor`	`string`	`accentColor` value	Accent color for footer editor overlay
`placeholders`	`false \| { page?, total? }`	`undefined`	Rename the built-in `{page}` / `{total}` tokens or disable substitution.

Commands reference

Command	Parameters	Description
`setHeader`	`header: PagesHeaderFooter`	Set default header content
`setFooter`	`footer: PagesHeaderFooter`	Set default footer content
`setHeaderTopMargin`	`margin: number`	Set header top margin (pixels). Rejects negative values and `NaN`.
`resetHeaderTopMargin`	none	Clear the header top margin override; falls back to the active format's default (50% of the format's top margin).
`setFooterBottomMargin`	`margin: number`	Set footer bottom margin (pixels). Rejects negative values and `NaN`.
`resetFooterBottomMargin`	none	Clear the footer bottom margin override; falls back to the active format's default (50% of the format's bottom margin).
`setDifferentFirstPage`	`enabled: boolean`	Toggle different first page (header + footer). First page slot starts empty, matching Word. If a header/footer overlay is open, it refreshes to show the new variant.
`setHeaderFirstPage`	`header: PagesHeaderFooter`	Set first page header content
`setFooterFirstPage`	`footer: PagesHeaderFooter`	Set first page footer content
`setDifferentOddEven`	`enabled: boolean`	Toggle different odd/even pages (header + footer). When enabling, the default header/footer is copied into the odd slot (if empty) for Word continuity. If a header/footer overlay is open, it refreshes to show the new variant.
`setHeaderOdd`	`header: PagesHeaderFooter`	Set odd pages header content
`setHeaderEven`	`header: PagesHeaderFooter`	Set even pages header content
`setFooterOdd`	`footer: PagesHeaderFooter`	Set odd pages footer content
`setFooterEven`	`footer: PagesHeaderFooter`	Set even pages footer content
`setHeaderEditable`	`enabled: boolean`	Lock or unlock the header overlay. When `false`, double-click is inert, `openHeaderEditor` returns `false`, and any open header overlay is closed.
`setFooterEditable`	`enabled: boolean`	Lock or unlock the footer overlay. When `false`, double-click is inert, `openFooterEditor` returns `false`, and any open footer overlay is closed.
`openHeaderEditor`	`{ pageNumber: number }`	Open header editor for a specific page (1-indexed)
`openFooterEditor`	`{ pageNumber: number }`	Open footer editor for a specific page (1-indexed)
`closeHeaderFooterEditors`	none	Close whichever header/footer editor is open
`closeHeaderEditor`	none	Close the header editor if open
`closeFooterEditor`	none	Close the footer editor if open
`setAccentColor`	`color: string`	Set accent color for both editor overlays
`setHeaderAccentColor`	`color: string`	Set accent color for header editor overlay
`setFooterAccentColor`	`color: string`	Set accent color for footer editor overlay

PreviouslyPage format

Next upPage gap & background

Imported from DOCX

Content types

HTML strings

Template placeholders

Renaming or disabling placeholders

DOCX import

JSONContent

Configuration vs commands

Header configuration

Default header

Header margin

Input validation

Footer configuration

Default footer

Footer margin

Input validation

Different first page

Note

First page slot starts empty

Configuration

Commands

Different odd and even pages

Note

Odd slot inherits the default on enable

Configuration

Commands

Combining first page and odd/even pages

Empty type-specific slots render empty

Editable headers and footers

Custom extensions

Active editor state

Locking the header or footer

Locking does not hide content

Listening to header/footer editor events

Building a custom toolbar

Accessing header and footer content

HTML content

Note

JSON content for DOCX export

Note

Saving header and footer content

Programmatically opening and closing editors

Opening editors

Note

Closing editors

Preventing editor close on double-click

Configuration

Accent colors

Configuration

Runtime updates

CSS color values

Limitations

Header & Footer editor styling

Collaboration

Complete options reference

Commands reference