Tiptap Docs

Add a paragraph node to your editor

Comprehensive styling for the core paragraph node and various other text elements in the Tiptap editor.

Install

You can add the node component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add paragraph-node

Manual Integration

For frameworks other than Vite or Next.js, add the node component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

The ParagraphNode provides styling for paragraphs and other text-related elements within the editor. To use it, include it in your project alongside the Tiptap editor.

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function BasicEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <p>A paragraph with <a href="#">a link</a> and <strong>bold text</strong>.</p>
      <blockquote>A blockquote with some insightful text.</blockquote>
      <hr/>
      <p>Another paragraph after a horizontal rule.</p>
    `,
  })

  return <EditorContent editor={editor} className="control-showcase" />
}

Features

  • Core styling for paragraphs with proper spacing
  • Heading styles (h1-h4) with appropriate sizing
  • Blockquote styling with left border
  • Link styling with appropriate colors
  • Horizontal rule (hr) styling
  • Text decoration inheritance for nested spans
  • Selection highlighting
  • Proper cursor styles
  • Empty paragraph placeholders
  • Thread markup styles integration
  • Highlight color variables
  • Mathematics component integration
  • Dark mode support
  • Gap cursor styling

Requirements

The paragraph-node.scss provides styling for many core Tiptap features. While it has no direct dependencies, it works best with:

Open source feature(s)

Pro feature(s)