Skip to main content
Tiptap provides a modular extension system that allows you to customize your editor with exactly the features you need. Extensions are organized into three main categories: Nodes (block-level content), Marks (inline formatting), and Functionality (editor behaviors and features).

​
Nodes

Nodes are block-level elements that form the structure of your document. They define the content model and how different types of content can be nested.

Document

The root node that contains all other nodes. Required for every editor instance.

Paragraph

Basic text blocks. The most common node type for regular content.

Text

Represents plain text content. Required for inline content rendering.

Heading

Create hierarchical headings from H1 to H6 for document structure.

Blockquote

Quote blocks for highlighting cited or important text passages.

Code Block

Monospaced code blocks for displaying code snippets.

Bullet List

Unordered lists with bullet points for item collections.

Ordered List

Numbered lists for sequential or ranked items.

List Item

Individual items in bullet or ordered lists.

Horizontal Rule

Visual separators to divide content sections.

Image

Embed images with support for URLs, uploads, and attributes.

Table

Create and edit tables with rows, columns, and cells.

​
Marks

Marks are inline formatting options that can be applied to text within nodes. They can overlap and be combined to create rich text formatting.

Bold

Make text bold with strong emphasis styling.

Italic

Apply italic styling for emphasis or styling purposes.

Strike

Strike through text to indicate deletion or completion.

Underline

Underline text for emphasis or to indicate links.

Code

Format inline code snippets with monospace font.

Link

Create hyperlinks to external or internal resources.

Highlight

Highlight text with customizable background colors.

Text Style

Foundation for custom inline text styling and formatting.

​
Functionality

Functionality extensions enhance the editor with behaviors, UI components, and special features that don’t directly affect the document structure.

Bubble Menu

Context menu that appears when text is selected.

Floating Menu

Menu that appears on empty lines for quick actions.

Drag Handle

Visual handle for dragging and reordering content blocks.

Collaboration

Real-time collaborative editing powered by Yjs.

History

Undo and redo functionality for editor changes.

Placeholder

Show placeholder text when the editor is empty.

​
Getting Started

To use any extension, first install it via npm: 
npm install @tiptap/extension-[name]
Then import and add it to your editor configuration: 
import { Editor } from '@tiptap/core'
import Bold from '@tiptap/extension-bold'
import Paragraph from '@tiptap/extension-paragraph'

const editor = new Editor({
  extensions: [
    Bold,
    Paragraph,
    // Add more extensions...
  ],
})

​
Extension Categories

​
Essential Extensions

Some extensions are required for a functional editor:
  • Document: Root node container (required)
  • Text: Text content representation (required)
  • Paragraph: Basic text blocks (recommended)
Common extension bundles for different use cases: Basic Rich Text
  • Bold, Italic, Strike, Code, Link
  • Paragraph, Heading, Bullet List, Ordered List
Advanced Editing
  • All basic extensions, plus:
  • Table, Image, Code Block Lowlight
  • Bubble Menu, Floating Menu, Drag Handle
Collaborative
  • Basic rich text extensions, plus:
  • Collaboration, Collaboration Caret
  • History (for local undo/redo)

​
Next Steps

Custom Extensions

Learn how to build your own custom extensions

Extension API

Explore the Extension API reference

Nodes & Marks

Understand the difference between nodes and marks

Commands

Learn about editor commands and how to use them

Build docs developers (and LLMs) love

Get started for freeTalk to us