Documentation

1. Getting Started

To begin using DocuEdit Pro, install the dependencies and run the local development server. Once running, you’ll have access to a feature-rich document editor built on React, TypeScript, and TipTap.

npm install
npm run dev

After starting the development server, navigate to http://localhost:3000 to open the editor in your browser.

2. Editor Features

• Rich text editing with headings, lists, tables, and code blocks.
• Real-time formatting and auto-save functionality.
• Keyboard shortcuts for quick navigation and editing.
• Collaborative editing (coming soon).

3. Customization

DocuEdit Pro supports deep customization through TipTap extensions. You can add your own formatting options, toolbar buttons, and themes.

import { Extension } from '@tiptap/core'

const Highlight = Extension.create({
  name: 'highlight',
  addOptions() {
    return {
      HTMLAttributes: { class: 'bg-yellow-300' },
    }
  },
})

Add your custom extension to the editor configuration to enable it globally.

4. Exporting Documents

You can export documents directly to PDF or Word format. Click the Export button in the top toolbar, then choose your preferred format.

• Export as PDF — maintains layout and formatting.
• Export as DOCX — editable in Microsoft Word and Google Docs.
• Supports multi-page layout and embedded images.

5. Multi-Page Support

DocuEdit Pro provides seamless multi-page management. As your content grows, it automatically paginates the document. You can also preview and reorder pages using the page navigation panel.

• Auto-pagination as content expands.
• Manual page breaks available in the toolbar.
• Visual page indicators during editing and preview.