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)

PreviouslyHorizontal rule node