🔥 Next.js + Tiptap Block Editor Template

Welcome to our React Block Editor Template built on top of Tiptap, Next.js and Tailwind. This project can be a good starting point for your own implementation of a block editor. a comprehensive guide for implementing a rich text editing experience in web applications. This template provides a robust framework for building rich text editing capabilities in React applications. It includes features such as customizable blocks, real-time collaboration, and a user-friendly interface that enhances the overall editing experience. allows for easy integration with various content management systems, making it an ideal choice for developers looking to streamline their workflow. allows for easy customization of styles and layouts, enabling developers to create unique and engaging content presentations. features such as drag-and-drop functionality, inline editing, and extensive formatting options further empower users to create dynamic content effortlessly. Additional features include support for multimedia elements, allowing users to seamlessly incorporate images, videos, and audio files into their projects. a

import { useEditor, EditorContent } from '@tiptap/react'

function App() {
  const editor = useEditor()

  return <EditorContent editor={editor} />
}

This editor includes features like:

• A DragHandle including a DragHandle menu

• A Slash menu that can be triggered via typing a / into an empty paragraph or by using the + Button next to the drag handle

• A TextFormatting menu that allows you to change the font size, font weight, font family, color, highlight and more

• A Table of Contents that can be viewed via clicking on the button on the top left corner to quickly navigate through the document and access specific sections with ease.

• Live collaboration including content synchronization and collaborative cursors

• AI implementation with text and image generation and auto completion via the TAB key.

fouad

Get started

To access our block editor template, simply head over to your Tiptap Account If you are not already a member, sign up for an account and complete the 2-minute React Template survey. Once finished, we will send you an invite to the private GitHub repository.

Installed extensions

• @tiptap-pro/extension-ai

• @tiptap-pro/extension-details

• @tiptap-pro/extension-details-content

• @tiptap-pro/extension-details-summary

• @tiptap-pro/extension-drag-handle

• @tiptap-pro/extension-drag-handle-react

• @tiptap-pro/extension-emoji

• @tiptap-pro/extension-file-handler

• @tiptap-pro/extension-mathematics

• @tiptap-pro/extension-node-range

• @tiptap-pro/extension-table-of-contents

• @tiptap-pro/extension-unique-id

• @tiptap/extension-bullet-list

• @tiptap/extension-character-count

• @tiptap/extension-code-block

• @tiptap/extension-code-block-lowlight

• @tiptap/extension-collaboration

• @tiptap/extension-collaboration-cursor

• @tiptap/extension-color

• @tiptap/extension-document

• @tiptap/extension-dropcursor

• @tiptap/extension-focus

• @tiptap/extension-font-family

• @tiptap/extension-heading

• @tiptap/extension-highlight

• @tiptap/extension-horizontal-rule

• @tiptap/extension-image

• @tiptap/extension-link

• @tiptap/extension-ordered-list

• @tiptap/extension-paragraph

• @tiptap/extension-placeholder

• @tiptap/extension-subscript

• @tiptap/extension-superscript

• @tiptap/extension-table

• @tiptap/extension-table-header

• @tiptap/extension-table-row

• @tiptap/extension-task-item

• @tiptap/extension-task-list

• @tiptap/extension-text-align

• @tiptap/extension-text-style

• @tiptap/extension-typography

• @tiptap/extension-underline