Frontend & Design

Tiptap Editor

The customizable rich-text editor — the foundation of Notion-like editors in React.

Claude Code Cursor Codex Windsurf

Overview

Tiptap is the standard for modern rich-text: built on ProseMirror with a friendly API, ready extensions (headings, tables, mentions, slash commands) and full visual control. Agents assemble a Notion-grade editor in hours instead of weeks.

Ready-made layers exist for realtime collaboration and in-editor AI (suggestions, continuation) when the product needs them.

Who Is This For?

An article editor for a content site
Slash commands and mentions like Notion
Realtime collaboration on documents
In-editor AI completion

Installation

Setup for Claude Code

npm install @tiptap/react @tiptap/starter-kit

Visit Source (tiptap.dev)

Explore AI Tools

Discover the best AI tools that complement your skills

Read AI & Design Articles

Tips and trends in the world of design and AI

Related Servers

Frontend & Design

Figma MCP Server

Bridge the gap between design and code by connecting Figma to your AI agent via MCP, enabling accurate design-to-code translation.

Claude Code Cursor

Frontend & Design

Storybook Component Docs

Build, document, and visually test UI components in isolation using Storybook. AI agents can generate stories and catch visual regressions.

Claude Code Copilot Cursor

Frontend & Design

Tailwind CSS IntelliSense

Get intelligent Tailwind class suggestions, autocompletions, and linting as you style components in your editor.

Copilot Cursor Windsurf