Tiptap Docs

PageKit

Alpha

PageKit is a convenience extension that bundles the Pages, Table, and PageBreak extensions together. It lets you configure all three at once for a paginated, table-ready editor with page break support.

1. Install the PageKit extension 

npm install @tiptap-pro/extension-pages-pagekit

2. Import and use PageKit 

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

const editor = new Editor({
  extensions: [
    StarterKit,
    PageKit.configure({
      pages: {
        pageFormat: 'A4',
        header: 'My Project',
        footer: 'Page {page} of {total}',
      },
      table: {
        // Table options go here (optional)
        resizable: true,
      },
      pagebreak: {
        // PageBreak options go here (optional)
        label: 'Page break',
      },
    }),
  ],
})

How it works

PageKit configures the Pages, Table, 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 Table or Pages, import and configure them individually.

4. Next steps

PreviouslyPagesTableKit