Tiptap Docs

Text blocks

Text blocks are the nodes a document is made of: paragraphs, headings, quotes, collapsible sections, and the document and text nodes underneath them.

Blockquote
Set off a quote as its own block.
Open source
Details
Add collapsible details nodes to your editor content.
Open source
Details content
Add content to your details nodes.
Open source
Details summary
Add a summary to your details nodes.
Open source
Document
The top node of every document; required.
Open source
Hard break
Break a line inside a paragraph without starting a new one.
Open source
Heading
Headings from level 1 to 6.
Open source
Horizontal rule
A horizontal line that separates sections.
Open source
Paragraph
The basic block for text; required in most editors.
Open source
Text
The text content of a document; required.
Open source

When you use them

  • Structure. Heading adds headings of up to six levels, and Paragraph holds running text.
  • Quotes. Blockquote shows a quote, rendered as a blockquote tag.
  • Collapsible sections. Details shows and hides content behind a summary, with the HTML details tag.
  • Breaks. Hard break forces a line break inside a block, and Horizontal rule draws a line that separates content.

How they work

  • They are nodes. Document is the top node that holds all other nodes, and Text holds plain text. Every editor needs Document, and you need Text for text of any kind and Paragraph for paragraphs. Nodes and marks
  • Most come with the StarterKit. Blockquote, Document, Hard break, Heading, Horizontal rule, Paragraph, and Text are part of the StarterKit; Details you add yourself.
  • Details needs two more nodes. Details works together with Details summary and Details content, which come in the same package.
  • Markdown shortcuts. Typing # at the start of a line starts a heading, > a blockquote, and --- a horizontal rule. Keyboard shortcuts
PreviouslyText style