Editor
Open source core

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 started
GitHub
deshaw
Posthog
LinkedIn
Productboard
Axios
Staffbase
Beehiiv
Front
ChartHop
Jenni
Chegg
Trainual
UserTesting
Substack
Opal
nextcloud
Axios HQ
ycombinator
ahref
Storyblok
Gitlab

Get the highlights

Discover the key benefits of the Editor and how to integrate it.

01

Open source core editor framework

02

Add only the features you need

03

Integrate custom or extended extensions

04

Headless
architecture

05

React, Vue, and more ready to go

What are the requirements to start using the Editor?

Read the docs 😉
Learn with examples and guides
Core packages
Install to get started
Extensions
Add Core, Pro or Cloud extensions

# Quick start

  1. npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
  2. 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.

Preview
Code
Documentation
GitHub

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.

100+
Core, Pro & Cloud extensions
Modular
extension library
Custom
extensions

Integrate only the featuresyou need

Pick the extensions you need to create the user experience your users want.

Show docs

Code custom features
or add to existing extensions

Develop your own custom nodes or add functionality to already existing extensions.

Show docs

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.

Bubble menu
Floating menu
Fixed menu
React
Vue
<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>
Show docs
React
Vue
<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>
Show docs
React
Vue
<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>
Show docs

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.

ReactVue.jsSvelteVanilla Javascript+ more

Developer
Documentation

Explore our developer launchpad featuring examples, guides and docs written for humans. Perfect to get you started with Tiptap.

Documentation

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.

The rich text editor
The rich text editor
that next-gen
that next-gen
leaders love
leaders love
The flexibility to customize the editor UI at a lower cost is a core requirement to build an editor that integrates seemingly across GitLab.
DevSecOps platform
Tiptap gives us the opportunity to actually build the software product that we've been brainstorming about for a long time now.
Website builder
Tiptap Content AI helped us add a 'wow' factor in a couple of hours to our app with their context-aware AI suggestions.
ESG data platform
Get started
See all customers
deshaw
Posthog
LinkedIn
Productboard
Axios
Staffbase
Beehiiv
Front
ChartHop
Jenni
Chegg
Trainual
UserTesting
Substack
Opal
nextcloud
Axios HQ
ycombinator
ahref
Storyblok
Gitlab

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.

AI copywriter
Synced whiteboard
Notion like editor
Block editor
Chat interface
Website builder
Collaborative todo list

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.

Collaboration

Cloud
Try for free

Allow your users to collaborate in any document and media. Integrate live carets and cursors to show who is typing, support offline editing and sync content.

Learn more

Content AI

Cloud
Paid feature

Help your users perfecting their tone and crossing language barriers, Tiptap's Content AI transforms words into wonders. Write, refine, and captivate with ease.

Learn more

Comments

Cloud
Paid feature

Integrate inline and document comments directly in your editor with Tiptap Comments. Ideal for collaboration, enabling real-time discussion and suggestions within the content.

Learn more

Documents

Cloud
Try for free

Self-host your documents for full control, or opt for our secure, scalable cloud. Create and manipulate your documents any way you want, whether you're flying solo or on Cloud 9.

Learn more

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.

Explore templates

Basic template

Start your editor integration with a super tiny editor template. It comes with just the things you need to start coding.

In development
Preview

Comments template

Add threads and comments to your documents and app with our Editor extension and Comments UI template.

In development
Preview

Notion like template

Launch your product with our prebuilt notion-like template and quickly release a full fledged editor experience.

Released
Preview

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.

Got Questions?We’ve got Answers!

Dive into our Tiptap FAQ: From syncing secrets to collaboration charms, we’re here to clear up all your curiosities.

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

Release notes

All
Jul 16, 2024

Tiptap Document Conversion API Beta

Documents
Jul 15, 2024

Introducing encryption at rest for Tiptap

Documents
Jul 14, 2024

Say hello to Tiptap 2.5, our most performant editor yet

Editor