# Image captions

The [`ImageCaption`](../../api/module_image_imagecaption-ImageCaption.md) plugin lets you add captions to images by providing support for the `<figcaption>` element.

<a id="demo">

## Demo

Click one of the images below and use the contextual image toolbar to toggle the caption on and off. Click the caption to edit it.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

> **Note**
>
> You can change the placement of the image caption by setting [`caption-side`](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side) in your [content styles](../../getting-started/setup/content-styles.md) for the `.ck-content .image > figcaption` style. Changing it to `caption-side: top` will display the caption above the image.

<a id="additional-feature-information">

## Additional feature information

The [`ImageCaption`](../../api/module_image_imagecaption-ImageCaption.md) plugin adds support for the `<figcaption>` element:

```html
<figure class="image">
	<img src="..." alt="...">
	<figcaption>A caption goes here...</figcaption>
</figure>
```

By default, if the image caption is empty, the `<figcaption>` element is not visible to the user. You can click the image to reveal the caption field and write one.

<a id="installation">

## Installation

To enable this feature, you need to load the [`LinkImage`](../../api/module_link_linkimage-LinkImage.md) plugin. Read more in the [installation guide](images-installation.md).

<a id="common-api">

## Common API

The [`ImageCaption`](../../api/module_image_imagecaption-ImageCaption.md) plugin registers:

* The `'toggleImageCaption'` button (to use in the [image toolbar](images-overview.md#image-contextual-toolbar)).
* The [`'toggleImageCaption'` command](../../api/module_image_imagecaption_toggleimagecaptioncommand-ToggleImageCaptionCommand.md)

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)