🔥 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.

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
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