Example | Tiptap Pagination

Basic Setup

Here’s how to set up pagination with table support for both Tiptap V2 and V3:

Tiptap V3

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';
import { PaginationPlus, PAGE_SIZES } from 'tiptap-pagination-plus';

const editor = new Editor({
extensions: [
  StarterKit,
  TableKitPlus, // TipTap v3 only - includes TableRowPlus, TableCellPlus, TableHeaderPlus
  PaginationPlus.configure({
    pageHeight: 842,
    pageWidth: 789,
    pageGap: 20,
    pageGapBorderSize: 1,
    pageGapBorderColor: "#e5e5e5",
    pageBreakBackground: "#F7F7F8",
    pageHeaderHeight: 25,
    pageFooterHeight: 25,
    footerRight: "Made with ❤️ by Romik",
    footerLeft: "Page {page}",
    headerLeft: "Header Left",
    headerRight: "Header Right",
    marginTop: 30,
    marginBottom: 50,
    marginLeft: 70,
    marginRight: 70,
    contentMarginTop: 30,
    contentMarginBottom: 30,
  }),
],
})

Tiptap V2

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-table-plus";
import { PaginationPlus, PAGE_SIZES } from 'tiptap-pagination-plus';

const editor = new Editor({
extensions: [
  StarterKit,
  TablePlus,
  TableRowPlus,
  TableCellPlus,
  TableHeaderPlus,
  PaginationPlus.configure({
    pageHeight: 842,
    pageWidth: 789,
    pageGap: 20,
    pageGapBorderSize: 1,
    pageGapBorderColor: "#e5e5e5",
    pageBreakBackground: "#F7F7F8",
    pageHeaderHeight: 25,
    pageFooterHeight: 25,
    footerRight: "Made with ❤️ by Romik",
    footerLeft: "Page {page}",
    headerLeft: "Header Left",
    headerRight: "Header Right",
    marginTop: 30,
    marginBottom: 50,
    marginLeft: 70,
    marginRight: 70,
    contentMarginTop: 30,
    contentMarginBottom: 30,
  }),
],
})

Using Commands

// Example: Using predefined page sizes
editor.chain().focus().updatePageSize(PAGE_SIZES.A4).run()

// Example: Dynamic updates
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Document Title', 'Page {page}')
  .updateFooterContent('Confidential', 'Page {page} of {total}')
  .run()

// Update page background color
editor.chain().focus().updatePageBreakBackground('#f0f0f0').run()

---

Links:

• NPM
• GitHub