From zero to print-ready: Pages & DOCX export

Restricted ReleaseAlpha

This guide will walk you through setting up a Tiptap editor from scratch, adding the Pages extension for pagination and print-like layout, and enabling DOCX export and import for a professional, print-ready workflow.

1. Install Tiptap and core dependencies

First, install the core Tiptap packages:

npm install @tiptap/core @tiptap/starter-kit

2. Add the Pages extension

Install the Pages extension from the Tiptap Pro registry:

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

Hint: Make sure you have access to the Tiptap Pro registry. See the Pro Extensions guide for setup.

3. Set up your editor with Pages

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

const editor = new Editor({
  extensions: [
    StarterKit,
    Pages.configure({
      pageFormat: 'A4',
      headerHeight: 60,
      footerHeight: 60,
      pageGap: 40,
      headerLeft: 'My Project',
      footerRight: 'Page {page} of {total}',
      pageBreakBackground: '#f8f8f8',
    }),
  ],
})

Best practice

Use the Pages extension early in your setup to ensure your document structure and layout are consistent from the start.

4. Add DOCX export capability

Install the DOCX export extension:

npm install @tiptap-pro/extension-export-docx

Add it to your editor:

import { ExportDocx } from '@tiptap-pro/extension-export-docx'

const editor = new Editor({
  extensions: [
    StarterKit,
    Pages.configure({ /* ... */ }),
    ExportDocx,
  ],
})

4a. Configure DOCX export (optional, but recommended)

You can configure the DOCX export extension to control how the export works, handle the result, and even override styles.

import { ExportDocx } from '@tiptap-pro/extension-export-docx'

const editor = new Editor({
  extensions: [
    StarterKit,
    Pages.configure({ /* ... */ }),
    ExportDocx.configure({
      // This callback is required! It receives the exported file (Blob, string, etc.)
      onCompleteExport: (result) => {
        // For example, trigger a download in the browser:
        const blob = new Blob([result], {
          type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'document.docx'
        a.click()
        URL.revokeObjectURL(url)
      },
      // Optional: choose the export type ('blob', 'string', etc.)
      exportType: 'blob',
      // Optional: override DOCX styles
      styleOverrides: {
        // See DOCX export docs for full style options
      },
      // Optional: add custom node converters if you use custom Tiptap nodes
      customNodes: [],
    }),
  ],
})

Tip

The onCompleteExport callback is required. This is where you handle the exported file (e.g., download, upload, etc.).

5. Export your document

You can now export your paginated, print-ready document to DOCX:

editor.commands.exportDocx()

Hint

The DOCX export extension works seamlessly with Pages. You must be aware that this is not a perfect 1:1 map from our Pages extension to a Microsoft Word DOCX file since the rendering engines are completely different.

6. Import DOCX files into your editor

You can also import DOCX files directly into your paginated editor using the ImportDocx extension. This lets users load Word documents and continue editing with full pagination support.

import { ImportDocx } from '@tiptap-pro/extension-import-docx'

const editor = new Editor({
  extensions: [
    // ... other extensions ...
    ImportDocx.configure({
      appId: 'your-app-id', // Your Convert App ID
      token: 'your-jwt', // Your authentication token
      // Optional: endpoint and image upload URL for custom setups
      // endpoint: 'https://your-api-endpoint',
      // imageUploadCallbackUrl: 'https://your-upload-endpoint',
    }),
  ],
})

To trigger an import, use:

editor.chain().importDocx({
  file, // a File object from an <input type="file" />
  onImport(context) {
    if (context.error) {
      // handle error
      return
    }
    context.setEditorContent(context.content)
  },
}).run()

Tip

You need a valid appId and token to use the ImportDocx extension. See the Pro Extensions guide for setup.

Next steps

Explore more Pages options to fine-tune your layout.
Add tables using the Table extension included in the Pages extension for best compatibility.
Combine with other Tiptap Pro extensions for a fully featured editor.

Need help?

Check the rest of the documentation or reach out to our support for more advanced workflows!