tiptap/docs/api/nodes.md

tableOfContents
true

Nodes

Introduction

If you think of the document as a tree, then nodes are just a type of content in that tree. Examples of nodes are paragraphs, headings, or code blocks. But nodes don’t have to be blocks. They can also be rendered inline with the text, for example for @mentions.

List of supported nodes

Title	StarterKit (view)	Source Code
Blockquote	Included	GitHub
BulletList	Included	GitHub
CodeBlock	Included	GitHub
Details	–	Requires a Tiptap Pro subscription
DetailsSummary	–	Requires a Tiptap Pro subscription
DetailsContent	–	Requires a Tiptap Pro subscription
Document	Included	GitHub
Emoji	–	Requires a Tiptap Pro subscription
HardBreak	Included	GitHub
Heading	Included	GitHub
HorizontalRule	Included	GitHub
Image	–	GitHub
ListItem	Included	GitHub
Mention	Included	GitHub
OrderedList	Included	GitHub
Paragraph	Included	GitHub
Table	–	GitHub
TableRow	–	GitHub
TableCell	–	GitHub
TaskList	–	GitHub
TaskItem	–	GitHub
Text	Included	GitHub
YouTube	–	GitHub

Create a new node

You’re free to create your own nodes for Tiptap. Here is the boilerplate code that’s need to create and register your own node:

import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  // Your code here
})

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

Learn more about custom extensions in our guide.