tiptap/docs/src/docPages/api/extensions.md

Extensions

toc

Introduction

Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.

List of provided extensions

Title	Default Extension	Source Code
Collaboration	–	GitHub
CollaborationCursor	–	GitHub
Dropcursor	–	GitHub
Focus	–	GitHub
Gapcursor	–	GitHub
History	–	GitHub
TextAlign	–	GitHub
Typography	–	GitHub

You don’t have to use it, but we prepared a @tiptap/vue-starter-kit which includes the most common extensions. Learn how you can use the defaultExtensions().

Create a new extension

You’re free to create your own extensions for tiptap. Here is the boilerplate code that’s need to create and register your own extension:

import { createExtension } from '@tiptap/core'

const CustomExtension = createExtension({
  // Your code here
})

const editor = new Editor({
  extensions: [
    // Register your custom extension with the editor.
    CustomExtension(),
    // … and don’t forget all other extensions.
    Document(),
    Paragraph(),
    Text(),
    // …
  ],

Learn more about custom extensions in our guide.

ProseMirror plugins

ProseMirror has a fantastic eco system with many amazing plugins. If you want to use one of them, you can register them with tiptap like that:

import { history } from 'prosemirror-history'

const History = createExtension({
  addProseMirrorPlugins() {
    return [
      history(),
      // …
    ]
  },
})