2021-08-24 17:24:10 +08:00
---
tableOfContents: true
---
2020-11-02 22:54:15 +08:00
# Nodes
## Introduction
2021-04-16 01:33:51 +08:00
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 **.
2021-01-26 06:17:02 +08:00
2020-11-03 23:13:13 +08:00
## List of supported nodes
2021-06-23 03:28:20 +08:00
| Title | StarterKit ([view](/api/extensions/starter-kit)) | Source Code |
| -------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [Blockquote ](/api/nodes/blockquote ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/ ) |
| [BulletList ](/api/nodes/bullet-list ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/ ) |
| [CodeBlock ](/api/nodes/code-block ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/ ) |
| [Document ](/api/nodes/document ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/ ) |
| [Emoji ](/api/nodes/emoji ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-emoji/ ) |
| [HardBreak ](/api/nodes/hard-break ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/ ) |
| [Hashtag ](/api/nodes/hashtag ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hashtag/ ) |
| [Heading ](/api/nodes/heading ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/ ) |
| [HorizontalRule ](/api/nodes/horizontal-rule ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/ ) |
| [Image ](/api/nodes/image ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/ ) |
| [ListItem ](/api/nodes/list-item ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/ ) |
| [Mention ](/api/nodes/mention ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/ ) |
| [OrderedList ](/api/nodes/ordered-list ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/ ) |
| [Paragraph ](/api/nodes/paragraph ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/ ) |
| [Table ](/api/nodes/table ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/ ) |
| [TableRow ](/api/nodes/table-row ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/ ) |
| [TableCell ](/api/nodes/table-cell ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/ ) |
| [TaskList ](/api/nodes/task-list ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/ ) |
| [TaskItem ](/api/nodes/task-item ) | – | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/ ) |
| [Text ](/api/nodes/text ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/ ) |
2022-10-06 21:55:30 +08:00
| [YouTube ](/api/nodes/youtube ) | Included | [GitHub ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-youtube/ ) |
2021-02-05 00:33:59 +08:00
## Create a new node
2021-10-20 04:30:45 +08:00
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:
2021-02-05 00:33:59 +08:00
```js
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,
// …
],
2021-04-08 04:28:29 +08:00
})
2021-02-05 00:33:59 +08:00
```
2021-04-07 05:36:07 +08:00
Learn [more about custom extensions in our guide ](/guide/custom-extensions ).