---
title: "Image Node"
description: "Add an image node UI component to your Tiptap Editor. Learn more in our documentation!"
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/image-node"
---

# Image Node

Add an image node UI component to your Tiptap Editor. Learn more in our documentation!

Styling for image nodes in the Tiptap editor.

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

## Installation

You can add the node component via Tiptap CLI

```bash
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.

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

- [`@tiptap/extension-image`](https://tiptap.dev/docs/editor/extensions/nodes/image.md) (recommended for full functionality)