# Show blocks

The show blocks feature allows the content creators to visualize all block-level elements (except for widgets). It surrounds them with an outline and displays their element name in the top-left corner of the box.

<a id="demo">

## Demo

Toggle the block elements visibility with the show block toolbar button to see the feature in action. The content remains editable, so you can see how the blocks adjust to the content structure on the go. These outlines are not visible in the [export to PDF](converters/export-pdf.md) and [export to Word](converters/export-word.md) features, so there is no need to remove them before exporting.

<!-- 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.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, ShowBlocks } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ ShowBlocks, /* ... */ ],
		toolbar: [ 'showBlocks', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, ShowBlocks } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ ShowBlocks, /* ... */ ],
		toolbar: [ 'showBlocks', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> Read more about [installing plugins](../getting-started/setup/configuration.md) and [toolbar configuration](../getting-started/setup/toolbar.md).

<a id="known-issues">

## Known issues

* The show blocks feature does not support widgets, yet. It means it will currently not show block outlines for example for images or tables. Feel free to upvote 👍 [this issue on GitHub](https://github.com/ckeditor/ckeditor5/issues/14869) if it is important for you.
* At present, the show blocks feature is not yet fully compatible with the [pagination](pagination/pagination.md) feature. Using these two together may result in errors.

<a id="related-features">

## Related features

Other CKEditor 5 features related to HTML editing that you may want to check:

* [General HTML Support](html/general-html-support.md) – Allows you to enable HTML features (elements, attributes, classes, styles) that are not supported by other dedicated CKEditor 5 plugins.
* [Enhanced source code editing](source-editing/source-editing-enhanced.md) – Allows for viewing and editing the source code of the document in a handy modal window (compatible with all editor types) with syntax highlighting, autocompletion and more.
* [Full page HTML](html/full-page-html.md) – Allows using CKEditor 5 to edit entire HTML pages, from `<html>` to `</html>`, including the page metadata.

<a id="common-api">

## Common API

The [`ShowBlocks`](../api/module_show-blocks_showblocks-ShowBlocks.md) plugin registers the `'showBlocks'` UI button component and the `'showBlocks'` command implemented by [`ShowBlocksCommand`](../api/module_show-blocks_showblockscommand-ShowBlocksCommand.md).

You can execute the command using the [`editor.execute()`](../api/module_core_editor_editor-Editor.md#function-execute) method:

```js
// Toggle the visibility of block-level elements outline.
editor.execute( 'showBlocks' );
```

> **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-show-blocks>.

---

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