DocuEdit Pro
A rich document editor built with Next.js, React, TypeScript, and TipTap. It includes formatting tools, page layout controls, image handling, table editing, PDF/Word export, and a polished landing experience.
Features
- Rich text editing with headings, lists, blockquotes, code, links, tables, and inline formatting
- Focus mode, A4 layout mode, and multi-page editing tools
- Header, footer, page number, and table of contents support
- Image upload with resize controls
- PDF and Word export options
- Dark mode and responsive UI
Tech Stack
- Next.js 15
- React 18
- TypeScript
- TipTap
- Tailwind CSS
- Radix UI
Getting Started
Prerequisites
Installation
git clone https://github.com/amananandrai/document-editor-with-tiptap.git
cd document-editor-with-tiptap
npm install
Run Locally
npm run dev
Open http://localhost:3000.
Available Scripts
npm run dev starts the development servernpm run build creates a production buildnpm run start runs the production buildnpm run lint runs ESLintnpm run test runs Jest testsnpm run test:watch runs Jest in watch modenpm run test:coverage generates coverage outputnpm run test:ci runs tests in CI mode
Project Structure
app/
contact-us/
page.tsx # Contact page
documentation/
page.tsx # Documentation page
editor/
editor-client.tsx # Client wrapper for the editor experience
features.js # Landing-page feature metadata
layout.tsx # Focus mode provider for editor routes
page.tsx # Main editor page
help-center/
page.tsx # Help center page
globals.css # Global design tokens and base styles
layout.tsx # Root app layout
page.tsx # Landing page
components/
editor/
find-replace-modal.tsx # Find and replace functionality
header-footer.tsx # Header and footer components
image-extension.ts # Image extension for TipTap
image-resize-component.tsx
link-modal.tsx # Link insertion modal
margin-ruler.tsx # Margin ruler component
page-break-component.tsx
page-break-extension.tsx
rich-editor.tsx # Main rich text editor
status-bar.tsx # Editor status bar
tiptap-extensions.ts # TipTap extension helpers
toc-extension.tsx # Table of contents extension
toolbar.tsx # Editor toolbar
use-image-upload.ts # Image upload hook
ui/
backButton.tsx
button.tsx
colorpicker.tsx
dialog.tsx
dropdown-menu.tsx
input.tsx
label.tsx
popover.tsx
tooltip.tsx
BackToTopButton.tsx
focus-mode-context.tsx
footer.tsx
navbar.tsx
RootLayoutClient.tsx
theme-provider.tsx
theme-toggle.tsx
lib/
local-storage.ts
utils.ts
public/
logo.png
pattern-bg.svg
placeholder-bg.jpg
__tests__/
components/
lib/
setup/
Notes
- The active editor lives under
components/editor/.
- Global styling is defined in
app/globals.css.
- Shared UI building blocks live in
components/ui/ and are used across the editor, navigation, dialogs, and controls.
Customization
Theme Tokens
Update the design tokens in app/globals.css to change colors, radius values, and shared theme settings.
Editor Extensions
Editor extensions are composed in components/editor/rich-editor.tsx, with reusable extension helpers in components/editor/tiptap-extensions.ts.
UI Components
Shared UI building blocks live in components/ui/ and are used across the editor, navigation, dialogs, and controls.
Testing
npm run test
npm run test:watch
Deployment
This project can be deployed anywhere that supports Next.js, including Vercel, Netlify, Railway, and AWS Amplify.
Support
