Enhanced Tiptap Editor with Shadcn/UI

Shadcn Tiptap is a collection of custom extensions created for the Tiptap editor. It provides an array of enhancements and toolbars designed to simplify integration with shadcn/ui components.

These Tiptap extensions can be useful for developers seeking an efficient and customizable editing experience within their web applications, from content management systems to collaborative applications.

GitHub

Docs

Features

🔍 Search & Replace: Efficiently find and replace text within the editor, with options for case sensitivity.

🖼️ Image Placeholder: Embed images seamlessly using links or uploads, similar to Notion’s functionality.

🖼️ Enhanced Image Handling: Resize, position, and interact with images directly within the editor.

🚀 Ready to Use: Copy and paste code snippets for quick and easy integration into existing projects.

Use Cases

Content Management Systems: Developers can integrate Shadcn Tiptap into a CMS to allow users to edit text, insert images, and manage content dynamically. The Search & Replace extension can help editors quickly modify text across large documents.
Collaborative Editing Tools: For applications designed for team collaboration, the Tiptap editor with these extensions can enable real-time editing. Users can add images and text effortlessly while utilizing features like the Image (Extended) extension for enhanced image handling.
Blogging Platforms: Bloggers can benefit from the ready-to-use extensions for an improved writing experience. Features such as image placeholders make it easy to embed visuals, keeping the focus on content creation.
Educational Platforms: In e-learning applications, the custom extensions allow instructors to create rich content with images and formatted text. The Search & Replace extension facilitates quick content updates for course materials.
Documentation Tools: Developers can use Shadcn Tiptap for creating interactive documentation. The ease of embedding images and text formatting can improve user engagement and information retention.

Installation

1. Set up a new Next.js project:

npx create-next-app@latest my-app

2. Clone the repository:

git clone https://github.com/NiazMorshed2007/shadcn-tiptap.git

3. Install dependencies:

pnpm install

4. Start development:

pnpm run dev

Related Resources

Tiptap: The underlying editor framework, providing the foundation for Shadcn Tiptap’s extended functionality. https://tiptap.dev/
Shadcn/UI: The UI component library that ensures visual consistency and seamless integration. https://ui.shadcn.com/
Next.js: The React framework used in the Shadcn Tiptap project. https://nextjs.org/
Tailwind CSS: The utility-first CSS framework used for styling. https://tailwindcss.com/

FAQs

Q: What are the prerequisites for using Shadcn Tiptap?
A: Familiarity with Tiptap, Next.js, and the Shadcn/UI component library is recommended.

Q: Can I customize the existing extensions?
A: Yes, Shadcn Tiptap is open-source, allowing for customization and extension of the provided functionality.

Q: Is TypeScript supported?
A: Yes, the project includes TypeScript definitions for all components and extensions.