Tiptap Docs

Heading Node

A styled heading node for displaying formatted headings in the editor.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add heading-node

Usage

The HeadingNode is primarily a styling component that enhances the appearance of headings in the editor. To use it, simply include it in your project and ensure you're using the Heading extension from Tiptap.

import { useEditor, EditorContent } from '@tiptap/react' import { StarterKit } from '@tiptap/starter-kit'  import '@/components/tiptap-node/paragraph-node/paragraph-node.scss' import '@/components/tiptap-node/heading-node/heading-node.scss'  export default function EditorWithHeading() {  const editor = useEditor({  immediatelyRender: false,  extensions: [StarterKit],  content: `  <h1>Heading 1</h1>  <h2>Subheading 1</h2>  <h3>Subheading 2</h3>  <h4>Subheading 3</h4>  <h5>Subheading 4</h5>  <h6>Subheading 5</h6>  `,  })   return <EditorContent editor={editor} /> }

Features

  • Syntax highlighting styles for headings
  • Dark mode support
  • Proper spacing and margins
  • Enhanced readability with monospace font
PreviouslyCode block node