The headless rich text editor
The world's leading open-source editor framework for creating content editing experiences like Notion or Google Docs insanely fast.
Get the highlights
Discover the key benefits of the Editor and how to integrate it.
Open source core editor framework
Add only the features you need
Integrate custom or extended extensions
Headless architecture
React, Vue, and more ready to go
What are the requirements to start using the Editor?
# Quick start
- npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
- That's it.
[Read docs](https://tiptap.dev/docs/editor/getting-started/overview)
Powerful andopen source core
Integrate the open-source editor with core and community extensions. Join a global community of developers to improve and refine Tiptap.
Flexible featureswith tons of extensions
Tiptap's extension-based architecture lets you pick and choose the features you need. Choose from a wide range of Core, Pro, and Cloud extensions, or build and integrate your own.
Add your own front-endwithout !important
Our headless architecture gives you control over functionality, HTML markup, styling, and behavior. Take a look at our examples to get inspiration or integrate our templates.
<BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
<div className="bubble-menu">
<button
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
<svg>Bold icon</svg>
</button>
{/* ... */}
<button
onClick={() => editor.chain().focus().toggleCode().run()}
className={editor.isActive('code') ? 'is-active' : ''}
>
<svg>Code icon</svg>
</button>
</div>
</BubbleMenu><bubble-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
<div class="bubble-menu">
<button
@click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
<svg>Bold icon</svg>
</button>
<!-- ... -->
</button>
<button
@click="editor.chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('strike') }"
>
<svg>Code icon</svg>
</button>
</div>
</bubble-menu>
<FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
<div className="floating-menu">
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
<svg>Heading icon</svg>
</button>
{/* ... */}
</div>
</FloatingMenu><floating-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
<div class="floating-menu">
<button
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
<svg>Heading icon</svg>
</button>
<!-- ... -->
</div>
</floating-menu>
<div className="button-group sticky">
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
<svg>Heading icon</svg>
</button>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={ !editor.can().chain().focus().toggleBold().run() }
className={editor.isActive('bold') ? 'is-active' : ''}
>
<svg>Bold icon</svg>
</button>
{/* ... */}
</div><div class="button-group sticky">
<button
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
<svg>Heading icon</svg>
</button>
<button
@click="editor.chain().focus().toggleBold().run()"
:disabled="!editor.can().chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
<svg>Bold icon</svg>
</button>
<!-- ... -->
</div>Integrate with any framework
Tiptap is framework-agnostic and will work with any JS framework you throw at it. Learn from our React and Vue examples in the documentation and make it work with Svelte, Vanilla JavaScript, and more.
Developer's launchpad
Code with clarity: Explore comprehensive docs and examples to jumpstart your journey with Tiptap.
Built for developers
Tiptap is made by developers for developers and is designed to be as DX friendly as possible.
Written in TypeScript
Tiptap is written in TypeScript. That helps to find bugs early and gives a nice autocomplete for the API.
Powered by ProseMirror
Unparalleled reliability and advanced editing features with Tiptap, leveraging ProseMirror's proven stability.
Use cases
Make your owneditor experience
Tiptap's dev experience and extensions library make customization easy. Powering over 3 million editors, chances are, you're typing in Tiptap every day already.
Tiptap Suite
Supercharge yourcontent experience
Essentially a headless open source editor, Tiptap has a wide range of paid features that give developers exactly the kind of experience they're looking for - fully customizable to build their product needs.
Templates
Set up your editor with React templates
Get to market in the fast lane with our front-end templates. Customize, combine, and adapt them to your UX.
Simple editor template
Start your editor integration with a super tiny editor template. It comes with just the things you need to start coding.
Comments template
Add threads and comments to your documents and app with our Editor extension and Comments UI template.
Notion like template
Launch your product with our prebuilt notion-like template and quickly release a full fledged editor experience.
Join the engagedand caring community
Become part of an active and growing community where Tiptap enthusiasts share insights, offer tips, and provide robust support to help you on your integration journey.
X
For announcements, tips and general information.
Discord
Get involved in the community, ask questions, and share tips.
GitHub
For issues, feature requests and contributions.
Frequently askedquestions
Yes! Tiptap is a versatile and powerful open-source editor, available under the MIT license, which means you can use it free of charge. This makes it an accessible tool for developers looking to enhance their applications with advanced text editing features. For those who want to dive deeper and leverage the full potential of Tiptap, some of our more advanced extensions require a free Tiptap account. Most features, though, are readily available and can be easily integrated into your project with a simple npm install. This dual approach ensures that Tiptap remains an inclusive and flexible tool for a wide range of development needs, from basic text editing to more complex, collaborative functionalities.
Plain text editors are the simplest form, allowing you to write and edit text without formatting – ideal for coding or simple note-taking. Rich text editors, on the other hand, offer more functionality, enabling formatting options like bold, italics, and lists, much like what you'd find in word processing software. WYSIWYG (What You See Is What You Get) editors take this a step further. They allow you to work with text, images, and other elements in a format that closely resembles the final output. This means you can see the styling and layout changes as you make them, providing a more intuitive and visually oriented editing experience. Each type serves different purposes, catering to various needs from basic text entry to complex content creation.
To use and implement Tiptap's rich text editor, you need to integrate it into your application. This process starts with installing Tiptap via npm. Once installed, you can easily incorporate the rich text editor into your web application by following the documentation provided on the Tiptap website. The documentation guides you through various aspects of implementation, from basic setup to customizing the editor to suit your specific needs.
Yes, the source code for Tiptap's rich text editor is openly available, as it is an open-source project. You can view, study, and even contribute to the source code by visiting the Tiptap repository on GitHub
