Configure the Editor

For most cases it’s enough to say where Tiptap should be rendered (element), what functionalities you want to enable (extensions) and what the initial document should be (content).

A few more things can be configured though. Let’s look at a fully configured editor example.

Configure the editor

To add your configuration, pass an object with settings to the Editor class, like shown here:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  // bind Tiptap to `.element`
  element: document.querySelector('.element'),
  // register extensions
  extensions: [Document, Paragraph, Text],
  // set the initial content
  content: '<p>Example Text</p>',
  // place the cursor in the editor after initialization
  autofocus: true,
  // make the text editable (but that’s the default anyway)
  editable: true,
  // disable the loading of the default CSS (which is not much anyway)
  injectCSS: false,
})

Nodes, marks and extensions

Most editing features are bundled as node, mark or functionalities. Import what you need and pass them as an array to the editor.

Here is the minimal setup with only three extensions:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [Document, Paragraph, Text],
})

Configure extensions

Most extensions can be configured. Add a .configure() and pass an object to it.

The following example will disable the default heading levels 4, 5 and 6 and only allow heading levels 1, 2 and 3:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})

Have a look at the documentation of the extension you are using to learn more about their settings.

Default extensions

We have bundled a few of the most common extensions into a StarterKit extension. Here is how you to use that:

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [StarterKit],
})

You can even pass a configuration for all included extensions as an object. Just prefix the configuration with the extension name:

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: StarterKit.configure({
    heading: {
      levels: [1, 2, 3],
    },
  }),
})

The StarterKit extension loads the most common extensions, but not all available extensions. If you want to load additional extensions or add a custom extension, add them to the extensions array:

import StarterKit from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike'

new Editor({
  extensions: [StarterKit, Strike],
})

Don’t want to load a specific extension from the StarterKit? Just pass false to the config:

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      history: false,
    }),
  ],
})

You will probably see something like that in collaborative editing examples. The Collaboration comes with its own history extension. You need to remove or disable the default Redo/Undo extension to avoid conflicts.