Tiptap Document Editor with Real-Time Pagination

A professional document editor built with Tiptap that provides real-time pagination visualization, specifically designed for legal documents like USCIS submissions. The editor shows exactly how content will appear when printed, with clear page breaks and accurate formatting.

Features

✅ Real-Time Pagination

• Dynamic page breaks that update as you type
• Visual indicators showing where each page ends
• Accurate representation of printed output

✅ US Letter Format

• 8.5" × 11" page size
• 1-inch margins on all sides
• Matches standard legal document requirements

✅ Rich Text Editing

• Text Formatting: Bold, Italic, Underline
• Headings: H1, H2, H3
• Lists: Bullet points and numbered lists
• Undo/Redo: Full history support

✅ Document Management

• Print: Direct print functionality with accurate page breaks
• PDF Export: Generate PDF files of your documents
• Page Counter: Real-time display of current page and total pages

✅ Professional UI

• Clean, distraction-free interface
• Sticky toolbar for easy access to formatting options
• Visual page breaks with indicators
• Responsive design

Technology Stack

• Framework: Next.js 14 (App Router)
• Editor: Tiptap (ProseMirror-based)
• Styling: Tailwind CSS
• Icons: Lucide React
• PDF Generation: jsPDF + html2canvas
• Language: TypeScript

Installation

1. Install Dependencies

   npm install

2. Run Development Server

   npm run dev

3. Open Browser Navigate to http://localhost:3000

Usage

Writing Documents

1. Start typing in the editor
2. Use the toolbar to format text (bold, italic, underline)
3. Add headings and lists as needed
4. Watch page breaks appear automatically as content grows

Page Breaks

• Page breaks appear as dashed blue lines
• Each break shows which page ends at that point
• Breaks recalculate dynamically as you edit

Printing

1. Click the "Print" button in the toolbar
2. Your browser's print dialog will open
3. Page breaks in the editor match printed output

Exporting to PDF

1. Click the "PDF" button in the toolbar
2. The document will be converted to PDF
3. PDF will download automatically

Project Structure

tiptap-doc-pagination/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   └── globals.css         # Global styles
├── components/
│   ├── DocumentEditor.tsx  # Main editor component
│   ├── Toolbar.tsx         # Editor toolbar
│   └── PageBreak.tsx       # Page break indicator
├── utils/
│   └── pagination.ts       # Pagination calculation logic
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── next.config.js

How Pagination Works

The pagination system works by:

1. Measuring Content Height: The editor measures the actual rendered height of each element (paragraphs, headings, lists)

2. Calculating Breaks: When accumulated height exceeds the page content height (864px for US Letter with 1" margins), a page break is inserted

3. Dynamic Updates: Page breaks recalculate in real-time using requestAnimationFrame for optimal performance

4. Visual Rendering: Page breaks are rendered as absolutely positioned dividers with indicators

Key Constants

PAGE_WIDTH = 816px    // 8.5 inches × 96 DPI
PAGE_HEIGHT = 1056px  // 11 inches × 96 DPI
PAGE_MARGIN = 96px    // 1 inch × 96 DPI
CONTENT_HEIGHT = 864px // PAGE_HEIGHT - (2 × PAGE_MARGIN)

Customization

Changing Page Size

Edit the constants in app/globals.css:

:root {
  --page-width: 816px;
  --page-height: 1056px;
  --page-margin: 96px;
}

Adding More Formatting Options

Extend the Tiptap extensions in components/DocumentEditor.tsx:

extensions: [
  StarterKit,
  Underline,
  // Add more extensions here
]

Styling

• Modify app/globals.css for global styles
• Update tailwind.config.js for Tailwind customization
• Edit component styles directly in components/

Browser Compatibility

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Print functionality works in all modern browsers

Known Limitations

1. Large Elements: Elements taller than one page will overflow (by design)
2. PDF Export: May have slight rendering differences compared to print
3. Complex Tables: Table pagination is not yet implemented

Future Enhancements

• Table support with page break handling
• Header and footer support
• Custom page numbering
• Multiple paper sizes (A4, Legal, etc.)
• Collaborative editing
• Document templates
• Track changes functionality

License

MIT License - Feel free to use this in your projects!

Support

For issues or questions:

1. Check the documentation above
2. Review the code comments
3. Test in the browser console for debugging

Sample Use Case

This editor is perfect for:

• Legal Documents: USCIS petitions, court filings
• Business Letters: Professional correspondence
• Reports: Multi-page reports with consistent formatting
• Academic Papers: Essays and research papers

The editor ensures that what you see on screen matches what will print, eliminating surprises when submitting important documents.

---

Built with ❤️ for professionals who need precise document formatting