Tiptap Docs

Image Node

Available for free

Styling for image nodes in the Tiptap editor.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add image-node

Usage

The ImageNode provides styling for images within the editor. To use it, include it in your project and ensure you're using the Image extension from Tiptap.

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

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

export default function EditorWithImages() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Image],
    content: '<img src="/images/placeholder-image.png" alt="Example image" />',
  })

  return <EditorContent editor={editor} />
}

Features

  • Proper image sizing (max-width: 100%)
  • Consistent margins and spacing
  • Highlighted selection state for better UX
  • Border radius for aesthetic appearance
  • Compatible with the thread system

Requirements

Open source feature(s)