DOC-PIT Document Editor

DOC-PIT is a web-based document editor built using Next.js, Tailwind CSS, and TipTap editor. This editor is designed for rich text editing with features like tables, lists, image resizing, and more. It can be used to create and manage documents efficiently with an intuitive interface.

Deployment

This project is deployed using Vercel. You can view the live demo here: [https://doc-pit-document-editor-obes.vercel.app/]

Features

• Rich Text Editing: Offers a rich set of text formatting options.
• Table Support: Insert and manage tables within the document.
• Image Resizing: Resize and adjust images easily.
• Task List: Create interactive to-do lists.
• Text Highlighting: Apply multiple highlight colors to text.
• Font and Text Styling: Supports a variety of fonts, text styles, and alignment options.
• Code Block Support: Syntax highlighting for code snippets.
• Link Support: Insert and manage hyperlinks.
• Character and Word Count: Displays real-time character and word counts.

Tech Stack

• Frontend: Next.js, React
• Editor: TipTap (A modern rich text editor)
• Styling: Tailwind CSS
• State Management: Zustand (for managing editor state)
• Other Libraries:
  • Radix UI (for building UI components)
  • GSAP (for animations)

Installation

1. Clone the repository:

   git clone https://github.com/ritik-bit-by-bit/DOC-PIT-document-editor.git

2.Navigate to the project directory: cd DOC-PIT-document-editor 3.Install the project dependencies: npm install 4.Start the development server:npm run dev 5.Visit http://localhost:3000 to see the editor in action.

Acknowledgments

TipTap: A powerful rich-text editor. (https://tiptap.dev/)

Next.js: A React framework for production. (https://nextjs.org/)

Tailwind CSS: A utility-first CSS framework. (https://tailwindcss.com/)

GSAP: High-performance JavaScript animation library. (https://greensock.com/gsap/)

Radix UI: A collection of low-level UI components for React. (https://www.radix-ui.com/)