How do I add a custom toolbar in Tiptap?

You need to build it from scratch using custom extensions or existing ones. The README points to UI templates and documentation for custom extensions to guide the design and implementation.

Tiptap vs Draft.js: which is better for React?

Tiptap is headless and framework-agnostic, offering more customization and collaboration features, while Draft.js is React-specific with a built-in UI but less flexible. Choose Tiptap for full control, Draft.js for quicker setup.

Is Tiptap free for commercial use?

Yes, the core editor and many extensions are open-source under MIT license and free. However, advanced Pro Extensions like AI or versioning require a paid subscription, as noted in the README.

How to set up real-time collaboration with Tiptap?

Use the open-source Hocuspocus backend integrated with Yjs. The README provides a CodeSandbox example and documentation for implementing collaborative editing in your application.

Does Tiptap support markdown input?

Yes, through community or custom extensions. You can add markdown parsing and serialization capabilities, though it's not built-in by default and requires extension setup.

What's the bundle size of Tiptap?

Tiptap is built on ProseMirror and can have a larger bundle size due to extensions. For performance-sensitive apps, you should tree-shake and selectively import only needed extensions to optimize.

Open-Awesome

tiptap

MITTypeScriptv3.22.4

A headless, framework-agnostic rich text editor framework built on ProseMirror, offering full customization through extensions.

Visit Website GitHub

36.4k stars3.0k forks0 contributors

What is tiptap?

Tiptap is a headless rich text editor framework for web developers, built on ProseMirror. It provides a customizable and extendable editing experience without imposing a user interface, allowing full control over design and functionality. The framework is designed to be framework-agnostic, integrating smoothly with Vue, React, or plain JavaScript.

Target Audience

Frontend developers building rich text editing interfaces in web applications, especially those needing customizable, collaborative, or framework-agnostic solutions.

Value Proposition

Developers choose Tiptap for its headless architecture, which eliminates UI constraints and offers extensive customization through extensions. Its foundation on ProseMirror ensures reliability, and its compatibility with multiple frameworks makes it a versatile choice for diverse projects.

Overview

The headless rich text editor framework for web artisans.

Use Cases

Best For

Building custom rich text editors with unique UI designs
Adding collaborative editing features to web applications
Creating framework-agnostic editing components for Vue or React projects
Extending editor functionality with custom nodes and extensions
Developing content management systems with advanced text editing capabilities
Implementing real-time document collaboration using Yjs and Hocuspocus

Not Ideal For

Projects needing a ready-to-use rich text editor with a pre-styled UI and minimal setup
Teams with tight budgets that require advanced features like AI integration or document versioning without paid subscriptions
Applications where server-side rendering is critical and client-side JavaScript must be minimized or avoided
Small-scale projects where quick implementation and simplicity outweigh the need for deep customization

Pros & Cons

Pros

Headless Design Freedom

Provides no predefined UI, allowing complete control over the editor's appearance without CSS overrides or hacks, as emphasized in the README's headless framework section.

Framework-Agnostic Integration

Works seamlessly with Vue, React, or plain JavaScript, eliminating compatibility issues across different frontend frameworks, as stated in the README.

Extensive Extension Ecosystem

Offers over 100 extensions and supports custom creation, enabling features from basic text styling to advanced drag-and-drop editing, based on the extension-based architecture described.

Built-in Collaboration Support

Integrates with the open-source Hocuspocus backend and Yjs for real-time collaborative editing, a key feature highlighted in the documentation and examples.

Cons

No Default UI

Being headless, developers must build the entire user interface from scratch, which can be time-consuming and require additional design resources, contrary to plug-and-play editors.

Cost for Advanced Features

Pro Extensions for AI, commenting, and versioning require a paid subscription, limiting access for projects with budget constraints, as admitted in the README's Pro Extensions section.

Steep Learning Curve

Based on ProseMirror and with a complex extension system, it has a higher barrier to entry, requiring familiarity with rich text editor concepts and custom development.

Frequently Asked Questions

Related Projects

vee-validate

✅ Painless Vue forms

Stars11,249

Forks1,294

Last commit1 month ago

form-create

:fire::fire::fire: 强大的低代码动态表单组件，通过JSON数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

Stars6,991

Forks1,092

Last commit3 days ago

vuelidate

Simple, lightweight model-based validation for Vue.js

Stars6,887

Forks486

Last commit10 months ago

vue-multiselect

Universal select/multiselect/tagging component for Vue.js

Stars6,776

Forks995