Tiptap Docs

Image Node Pro

Available in Start plan

An enhanced image node component for Tiptap editors. Features drag-to-resize, editable captions, floating toolbar controls, image alignment options, download functionality, and advanced management capabilities with responsive styling and accessibility features.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add image-node-pro

Where is the source code?

The preview above is a live demo. To get its full source — the image node and every component it references — run the install command above. Tiptap UI Components are delivered as editable source files copied into your project (under @/components/…), not as an npm package. That is why the imports in the examples below resolve to files in your own codebase rather than a module in node_modules. See Referenced Components for the full list the CLI adds for you.

Components

<ImageNode />

An enhanced image node component with floating toolbar, alignment controls, and advanced management features.

Usage 

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

export default function ImageEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Image.configure({
        HTMLAttributes: {
          class: 'custom-image-class',
        },
      }),
    ],
    content: '<img src="/images/example.png" alt="Image" data-align="center" />',
  })

  return <EditorContent editor={editor} />
}

Features

  • Drag-to-resize: hover an image and drag the handle on either side to set its width
  • Editable image captions
  • Floating toolbar with alignment controls
  • Image download functionality
  • Delete node button
  • Alignment options (left, center, right)
  • Custom HTML attributes support
  • Enhanced accessibility
  • Responsive image sizing
  • Selection highlighting

Extensions

Image (Enhanced)

An extended version of the Tiptap Image extension with additional alignment support and floating toolbar integration.

Usage 

import { Image } from '@/components/tiptap-node/image-node/image-node-extension'

const editor = useEditor({
  extensions: [StarterKit, Image],
})

Floating Toolbar Components

The image node includes several floating toolbar components that appear when an image is selected:

<DeleteNodeButton />

Remove the selected image node from the editor.

<ImageDownloadButton />

Download the image to the user's device.

<ImageAlignButton />

Control image alignment with options for left, center, and right alignment.

How It Works

The image node system works through several integrated layers:

  1. Enhanced Display: Extends the basic Tiptap Image extension with additional styling and responsive behavior
  2. Floating Toolbar: Provides contextual controls that appear when an image is selected
  3. Resizing: Drag handles on either side of a hovered image let you set its width interactively
  4. Alignment System: Manages image positioning with left, center, and right alignment options
  5. Node Management: Handles image deletion and download functionality through toolbar actions
  6. State Integration: Seamlessly integrates with Tiptap's node system and command architecture

The floating toolbar automatically appears when an image is selected and provides quick access to alignment controls, download functionality, and node deletion.

Requirements

Dependencies

  • @tiptap/extension-image - Core image extension
  • @tiptap/react - React integration
  • sass / sass-embedded - For SCSS compilation

Referenced Components

The CLI installs these automatically alongside the image node — you do not add them by hand. They are the files that the image node imports from within your project:

  • use-tiptap-editor (hook)
  • tiptap-utils (lib)
  • delete-node-button (component)
  • image-download-button (component)
  • image-align-button (component)
  • image-caption-button (component)
  • image-upload-button (component)
  • refresh-ccw-icon (icon)
  • separator (primitive)
PreviouslyImage node