Tiptap Docs

Add an image node to your Editor

Styling for image nodes in the Tiptap editor.

Install

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

npx @tiptap/cli add image-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 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)