# Content minimap

The content minimap feature shows a miniature overview of your content. It helps you navigate a document that is too long to fit on the screen.

> **Warning**
>
> This is a **feature preview**, and as such it is not recommended for production use. For more information, comments, and feature requests, please refer to the [issue on GitHub](https://github.com/ckeditor/ckeditor5/issues/10089).

<a id="demo">

## Demo

Scroll the content, and the minimap in the sidebar will show your current location. To quickly navigate the document, drag the box marking the visible portion of the content. You can also click anywhere on the minimap to move around instantly.

<!-- 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 { DecoupledEditor, Minimap } from 'ckeditor5';

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Minimap, /* ... */ ],
		minimap: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { DecoupledEditor, Minimap } = CKEDITOR;

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Minimap, /* ... */ ],
		minimap: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuration">

## Configuration

> **Note**
>
> For more technical details, please check the [plugin configuration API](../api/module_minimap_minimapconfig-MinimapConfig.md).

<a id="minimap-container">

### Minimap container

The container element is essential for the minimap to render. You should pass the reference to the container element in [`config.minimap.container`](../api/module_minimap_minimapconfig-MinimapConfig.md#member-container). Note that it must have a fixed `width` and `overflow: hidden` when the editor is created:

```js
DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		// ... Other configuration options ...
		minimap: {
			container: document.querySelector( '.minimap-container' )
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="content-styles-and-classes">

### Content styles and classes

The minimap feature uses `<iframe>` internally. For a proper look and operation, it is essential for the content (clone) inside the `<iframe>` to have exactly the same styles as the main editor document. If the content of your editor inherits styles from parent containers, you may need to pass the class names of these containers in the feature configuration to maintain style parity. See the [detailed classes documentation](../api/module_minimap_minimapconfig-MinimapConfig.md#member-extraClasses) to learn more.

> **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="demo-configuration">

### Demo configuration

To configure the editor as [presented above](#demo), you can use the following DOM structure:

```html
<div id="document-container">
	<div id="toolbar-container">
		<!-- This is where the document editor toolbar will be inserted. -->
	</div>
	<div class="minimap-wrapper">
		<div class="editor-container">
			<div id="editor-content">
				<!-- This is where the edited content will render (the page). -->
			</div>
		</div>
		<div class="minimap-container">
			<!-- This is where the minimap will be inserted. -->
		</div>
	</div>
</div>
```

Employ the following CSS:

```css
.document-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex-grow: 1;
	max-width: 1280px;
	margin: 0 auto;
}

.toolbar-container {
	width: 100%;
}

.minimap-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	max-height: calc( 100vh - 400px );
	width: 100%;
	position: relative;
	top: -1px;
}

.editor-container {
	width: 100%;
	border: 1px solid hsl( 0, 0%, 80% );
	border-right: 0;
	background: hsl( 0, 0%, 95% );
	box-sizing: border-box;
	position: relative;
	overflow: auto;
}

.minimap-container {
	width: 120px;
	flex: 0 0 auto;
	border: 1px solid var(--ck-toolbar-border-color);
	position: relative;
	overflow: hidden;
	max-height: 100%;
}

#editor-content {
	width: calc( 180mm + 2px );
	min-height: calc( 210mm + 2px );
	height: auto;
	padding: 20mm 12mm;
	box-sizing: border-box;
	background: hsl( 0, 0%, 100% );
	border: 1px solid hsl( 0, 0%, 88% );
	box-shadow: 0 2px 8px hsla( 0, 0%, 0%, .08 );
	margin: 40px auto;
	overflow: hidden;
}
```

Finally, the JavaScript to run the editor (learn how to [install](#installation) the feature):

```js
DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor-content' )
		},
		// ... Other configuration options ...
		minimap: {
			container: document.querySelector( '.minimap-container' ),
		}
	} )
	.then( editor => {
		const toolbarContainer = document.querySelector( '#toolbar-container' );

		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
	} );
```

<a id="related-features">

## Related features

Here are some other CKEditor 5 features that you can use to navigate content better:

* [Document outline](document-outline.md) – Display a navigable list of sections (headings) of the document next to the editor.
* [Table of contents](table-of-contents.md) – Insert a table of contents into the document with a single click.

<a id="contribute">

## Contribute

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

---

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