Page breaks in DOCX import

When importing .docx files that contain page breaks, the conversion service emits pageBreak nodes in the Tiptap JSON output. To render and interact with these page breaks in your editor, register the @tiptap-pro/extension-pagebreak extension.

Install the PageBreak extension

npm install @tiptap-pro/extension-pagebreak

Set up your editor

Register the PageBreak extension alongside the Import extension. No additional configuration is needed for page break support during import.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Import } from '@tiptap-pro/extension-import-docx'
import { PageBreak } from '@tiptap-pro/extension-pagebreak'

const editor = new Editor({
  extensions: [
    StarterKit,
    PageBreak,
    Import.configure({
      appId: 'your-app-id',
      token: 'your-jwt',
      imageUploadConfig: {
        url: 'https://your-image-upload-endpoint.com',
      },
    }),
  ],
})

When you import a .docx file, any page breaks in the document are preserved as pageBreak nodes in the editor.

editor.chain().focus().import({ file }).run()

How it works

1. The conversion service detects page break elements (<w:br w:type="page"/>) in the .docx file.
2. Each page break is emitted as a { type: "pageBreak" } node in the Tiptap JSON output.
3. The PageBreak extension renders these nodes as visual dashed dividers with a centered "Page break" label.

Learn more

• PageBreak extension reference for full options, commands, and keyboard shortcuts
• DOCX import guide for general import setup
• Page breaks in DOCX export for export support