Now Available: Notion-like editor templateNotion-style editor for Tiptap Cloud
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)