Tiptap Docs

PageKit

Alpha

PageKit is a convenience extension that wraps Pages, the pagination-safe TableKit, and PageBreak in a single registration so you can configure them under one roof. By default, only Pages and PageBreak are registered — TableKit is opt-in: pass any options object (e.g. table: {}) to enable it. PageKit does not include ConvertKit — ConvertKit is a separate package install that you pair with PageKit.

1. Install ConvertKit and PageKit

PageKit bundles three Pages-related extensions, but you still need ConvertKit separately for the editor's node and mark schema.

npm install @tiptap-pro/extension-convert-kit \
            @tiptap-pro/extension-pages-pagekit

2. Add ConvertKit and PageKit to your editor 

import { Editor } from '@tiptap/core'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { PageKit } from '@tiptap-pro/extension-pages-pagekit'

const editor = new Editor({
  extensions: [
    ConvertKit.configure({ table: false }),
    PageKit.configure({
      pages: {
        pageFormat: 'A4',
        header: 'My Project',
        footer: 'Page {page} of {total}',
      },
      table: {
        // Enables PageKit's bundled TableKit. Pass `{}` for defaults, or forward
        // TableKitOptions here. Without this key (or `false`), tables are not registered.
        table: { resizable: true }, // forwarded to the underlying Table extension
      },
      pagebreak: {
        // Forwarded to PageBreak (optional)
        label: 'Page break',
      },
    }),
  ],
})

Why ConvertKit's tables are disabled

When PageKit's table slot is enabled, it registers the pagination-safe TableKit from @tiptap-pro/extension-pages-tablekit. ConvertKit ships its own table stack (DOCX-aware, but not pagination-safe), so we disable it here and let PageKit's tables take over. ConvertKit's tables and PageKit's tables accept the same DOCX cell attributes, so imported content renders correctly either way.

How it works

PageKit configures the Pages, TableKit, and PageBreak extensions for you. Pass your Pages options under pages, your Table options under table, and your PageBreak options under pagebreak.

Disabling PageBreak

If you don't need explicit page breaks, you can disable the PageBreak extension:

PageKit.configure({
  pages: { pageFormat: 'A4' },
  pagebreak: false, // Disable PageBreak
})

3. When to use PageKit?

  • Use PageKit for the fastest setup if you want both pagination and tables.
  • If you need to deeply customize TableKit or Pages, import and configure them individually instead. See the PagesTableKit guide for the unbundled setup.

4. Next steps

PreviouslyPagesTableKit