Find out what's new in Tiptap Editor 3.0
Tiptap Docs

Notion-like

The Notion-like Editor Template is a fully featured block-based editor that replicates the familiar Notion experience. It supports collaboration, AI assistance, emoji, drag & drop, advanced formatting—and it’s fully customizable.

Installation

Install the Notion-like editor with the Tiptap CLI:

npx @tiptap/cli@latest add notion-like-editor

Styling

Missing styles?

If the editor doesn't look right, make sure you've followed the style setup guide.

Configuration

Before running the app, configure the required constants inside tiptap-collab-utils.ts. This is necessary to enable features like AI or collaboration

Environment Variables

Provide values for the following environment variables:

  • COLLAB_DOC_PREFIX - Prefix for identifying collaborative documents
  • TIPTAP_COLLAB_APP_ID - Your collaboration App ID
  • TIPTAP_COLLAB_TOKEN - JWT token for accessing Collaboration services
  • TIPTAP_AI_APP_ID - Your AI App ID
  • TIPTAP_AI_TOKEN - JWT token for accessing AI services

The above environment variables should be available in the client-side. Depending on your framework, use the following prefixes to expose them to the client:

  • Next.js: NEXT_PUBLIC_. For example, NEXT_PUBLIC_COLLAB_DOC_PREFIX.
  • Vite + React: VITE_. For example, VITE_COLLAB_DOC_PREFIX.
  • Other frameworks: Follow the specific rules of your framework, and define the variables in the tiptap-collab-utils.ts file.

JWT Authentication

Collaboration and AI features require a valid server-generated JWT token passed to the editor. See the fetchCollabToken function in tiptap-collab-utils.ts for an example.

See the full guide on JWT authentication.

Generate the JWT token

To get started quickly, you can use the example JWT tokens from your Tiptap Cloud account and store them in the TIPTAP_COLLAB_TOKEN and TIPTAP_AI_TOKEN enviroment variables. However, example JWT tokens are valid for a short time and should not be used in production. In production, implement an API endpoint that generates JWTs on the server side.

room prop

Use the room prop to distinguish collaborative documents. Each session should use a unique room ID.

Usage

Import and render the NotionEditor component in your React app:

import { NotionEditor } from '@/components/tiptap-templates/notion/notion-like-editor'

export default function App() {
  return <NotionEditor room="my-document-room" placeholder="Start writing..." />
}

Features

The template includes all the essentials of a modern Notion-style editor:

  • Real-time collaboration: Live cursors and user presence

  • AI assistance: Inline AI tools for writing and editing

  • Responsive design: Mobile-ready UI with adaptive toolbars

  • Dark/light mode: Fully themed out of the box

  • Slash commands: / menu for quick formatting

  • Floating toolbar: Context-aware formatting

  • Drag and drop: Block-level reordering

  • Emoji support: GitHub-style emoji picker

  • Mentions: @user autocomplete

  • Rich formatting:

    • Bold, italic, underline, strikethrough
    • Highlight and color
    • Superscript / subscript
    • Syntax-highlighted code blocks

  • Block types:

    • Headings, lists, blockquotes, dividers, math

  • Media support: Drag & drop image upload

  • Link management: With inline previews

  • Text alignment: Left, center, right, justified

  • Undo/Redo: Full editing history

  • Context menus: Right-click enhancements

Component Breakdown

Hooks

  • use-mobile
  • use-window-size
  • use-ui-editor-state

Icons

  • arrow-left-icon
  • chevron-right-icon
  • highlighter-icon
  • link-icon
  • more-vertical-icon

Tiptap Extensions

  • collaboration, collaboration-cursor
  • selection-extension
  • link-extension
  • trailing-node-extension
  • ai-extension
  • emoji-extension
  • mention-extension
  • mathematics-extension
  • unique-id-extension

Libs

  • tiptap-utils
  • tiptap-collab-utils

UI Components

  • ai-menu
  • blockquote-button
  • code-block-button
  • color-highlight-button, color-highlight-popover
  • drag-context-menu
  • emoji-dropdown-menu
  • heading-button, heading-dropdown-menu
  • image-upload-button
  • link-popover
  • list-button, list-dropdown-menu
  • mark-button
  • mention-dropdown-menu
  • slash-dropdown-menu
  • text-align-button
  • turn-into-dropdown
  • undo-redo-button

Nodes

  • code-block-node
  • image-node, image-upload-node
  • list-node
  • paragraph-node

Primitives

  • button, button-group
  • dropdown-menu
  • separator, spacer, toolbar

Contexts

  • app-context
  • user-context
  • collab-context

Collaboration

To use collaboration:

  1. Pass a unique room ID to NotionEditor
  2. Enable JWT auth for each user session
  3. User presence and cursors are handled automatically
  4. Operational transformation handles concurrent edits
  5. Sync and save are managed out-of-the-box
<NotionEditor room="team-notes" placeholder="Share your ideas..." />

AI Integration

The built-in AI tools let you:

  • Generate content from prompts
  • Improve existing text
  • Get smart completions based on context

AI Configuration

Make sure to configure your AI provider. Check the AI Generation extension docs for setup steps.

Extendability

This template is designed to grow with your needs. New Tiptap Cloud features will be seamlessly compatible with the same UI system—no rewrites required.