I needed Word-style pages in a TipTap editor. The official Pages extension is a paid add-on, and the community ones I tried injected global CSS that broke my tables. So I wrote my own and open-sourced it.

Demo: https://text-editor-react-neon.vercel.app/ Repo (MIT): https://github.com/HuyPhan1232203/Text-editor-react npm: npm install tiptap-a4-pagination

How it works

It measures the top-level blocks and inserts spacer decorations where a block would cross the bottom of a page. The document is never modified, so getHTML() / getJSON() stay clean.

Tables split between rows , never inside a rowspan , and the header row repeats at the top of the next page.

Floated images (text wrapping) and CSS margin collapsing are handled.

The page-break math is a pure function, so it's unit tested.

About 5 KB gzipped, TipTap 3 only.

The full editor (React 19 + TipTap 3) also has

Google Docs paste that keeps headings, checklists, tables and indents

PDF export through the browser's print dialog (no server) that keeps…