---
title: "Image Node Pro"
description: "Add images to your Tiptap editor with alignment controls, download functionality, and floating toolbar management."
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/image-node-pro"
---

# Image Node Pro

Add images to your Tiptap editor with alignment controls, download functionality, and floating toolbar management.

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.

> **Interactive demo:** [image node pro](https://template.tiptap.dev/preview/tiptap-node/image-node-pro)

## Installation

Add the component via the Tiptap CLI:

```bash
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](#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

```tsx
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

```tsx
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)