TipTap Editor

A powerful rich text editor built with TipTap and shadcn/ui components. Features file uploads, math equations, and more.

Features

• 📁 File Uploads: Seamless file upload support with drag and drop functionality
• 🎨 Customizable: Built with shadcn/ui components for easy customization
• 🌙 Dark Mode: Full dark mode support with system preference detection
• 📱 Responsive: Works great on desktop and mobile devices

Getting Started

1. Clone the repository:

git clone https://github.com/ehtisham-afzal/tiptap-shadcn tiptap-editor
cd tiptap-editor

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 with your browser to see the result.

Tech Stack

• Next.js - React framework
• TipTap - Headless rich text editor
• shadcn/ui - UI components
• Tailwind CSS - CSS framework
• TypeScript - Type safety

Project Structure

tiptap-editor/
├── app/                # Next.js app directory
├── components/         # React components
│   ├── tiptap/        # TipTap editor components
│   └── ui/            # UI components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
└── public/            # Static assets

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.