---
title: "Configure the Editor"
description: "Configure your Tiptap Editor's elements, extensions, and content settings. Learn more in our documentation!"
canonical_url: "https://tiptap.dev/docs/editor/getting-started/configure"
---

# Configure the Editor

Configure your Tiptap Editor's elements, extensions, and content settings. Learn more in our documentation!

To configure Tiptap, specify three key elements:

- where it should be rendered (`element`)
  - **Note**: This is not required if you use the React or Vue integrations.
- which functionalities to enable (`extensions`)
- what the initial document should contain (`content`)

While this setup works for most cases, you can configure additional options.

## Add your configuration

To configure the editor, pass [an object with settings](https://tiptap.dev/docs/editor/api/editor.md) to the `Editor` class, as shown below:

```js
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 the `.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 (default is true)
  editable: true,
  // prevent loading the default ProseMirror CSS that comes with Tiptap
  // should be kept as `true` for most cases as it includes styles
  // important for Tiptap to work correctly
  injectCSS: false,
})
```

## Nodes, marks, and extensions

Most editing features are packaged as [nodes](https://tiptap.dev/docs/editor/extensions/nodes.md), [marks](https://tiptap.dev/docs/editor/extensions/marks.md), or [functionality](https://tiptap.dev/docs/editor/extensions/functionality.md). Import what you need and pass them as an array to the editor.

Here's the minimal setup with only three extensions:

```js
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

Many extensions can be configured with the `.configure()` method. You can pass an object with specific settings.

For example, to limit the heading levels to 1, 2, and 3, configure the [`Heading`](https://tiptap.dev/docs/editor/extensions/nodes/heading.md) extension as shown below:

```js
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],
    }),
  ],
})
```

Refer to the extension's documentation for available settings.

### A bundle with the most common extensions

We have bundled a few of the most common extensions into the [`StarterKit`](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md). Here's how to use it:

```js
import StarterKit from '@tiptap/starter-kit'

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

You can configure all extensions included in the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md) by passing an object. To target specific extensions, prefix their configuration with the name of the extension. For example, to limit heading levels to 1, 2, and 3:

```js
import StarterKit from '@tiptap/starter-kit'

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

### Disable specific StarterKit extensions

To exclude certain extensions [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md), you can set them to `false` in the configuration. For example, to disable the [`Undo/Redo History`](https://tiptap.dev/docs/editor/extensions/functionality/undo-redo.md) extension:

```js
import StarterKit from '@tiptap/starter-kit'

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

When using Tiptap's [`Collaboration`](https://tiptap.dev/docs/editor/extensions/functionality/collaboration.md), which comes with its own history extension, you must disable the `Undo/Redo History` extension included in the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md) to avoid conflicts.

### Additional extensions

The [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md) doesn't include all available extensions. To add more features to your editor, list them in the `extensions` array. For example, to add the [`Strike`](https://tiptap.dev/docs/editor/extensions/marks/strike.md) extension:

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

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

## Next steps

- [Add styles to your editor](https://tiptap.dev/docs/editor/getting-started/style-editor.md)
- [Learn more about Tiptaps concepts](https://tiptap.dev/docs/editor/core-concepts/introduction.md)
- [Learn how to persist the editor state](https://tiptap.dev/docs/editor/core-concepts/persistence.md)
- [Start building your own extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions.md)