tiptap

Build custom rich text editors in React with ProseMirror and extensions.

14|5|Updated Jan 29, 2026

Search Tags:#collaboration #react #rich text editor #tiptap #prosemirror #editor framework

Ready to run

npx skills add https://github.com/oakoss/agent-skills --skill tiptap-oakoss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tiptap
Source: https://github.com/oakoss/agent-skills/tree/main/skills/tiptap
Command: npx skills add https://github.com/oakoss/agent-skills --skill tiptap-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation and customization of rich text editors within React applications, enabling developers to integrate advanced text editing functionalities efficiently.

Core Features & Use Cases

Headless Editor Framework: Build custom UIs on top of a powerful ProseMirror engine.
Extension System: Easily add features like image uploads, markdown support, collaboration, and syntax highlighting.
Use Case: Integrate a Notion-like editor into your React app for blog posts, documentation, or collaborative note-taking, complete with image embedding and real-time collaboration.

Quick Start

Use the tiptap skill to create a basic rich text editor with starter kit extensions and enable markdown support.

Frequently Asked Questions about tiptap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a custom rich text editor in React?▼

You can build a custom rich text editor in React using a headless framework built on ProseMirror, which provides the core engine while leaving the UI completely customizable for your application.

Can I add real-time collaboration to a ProseMirror editor?▼

Yes, real-time collaboration is supported in ProseMirror-based editors through Y.js integration, enabling multiple users to edit the same document simultaneously without conflicts.

Does this headless editor framework support SSR and markdown conversion?▼

The headless editor framework supports both server-side rendering (SSR) and markdown conversion, allowing you to render content on the server and easily switch between rich text and markdown formats.

How do I extend a rich text editor with image uploads and syntax highlighting?▼

You extend the rich text editor using its extension system to add features like image uploads and syntax highlighting, modularizing functionality without altering the core ProseMirror engine.

What is the best way to create a Notion-like editor for a React application?▼

The best way to create a Notion-like editor is using a headless editor framework that provides flexible content creation blocks, image embedding, and collaborative note-taking capabilities within React.

Do I need ProseMirror knowledge to use a headless React editor?▼

No, you do not need deep ProseMirror knowledge to start, as the headless editor framework abstracts the complex ProseMirror schema logic into simple React extensions and starter kits.