# Find and replace

The find and replace feature lets you find and replace any text in your document. This speeds up your work and helps with the consistency of your content.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Use the find and replace toolbar button to open the search dialog. Use it to find and replace words or phrases. You can also use the `Ctrl`/`Cmd`+`F` keyboard shortcut. Try replacing “AI” with “artificial intelligence” to make the content appeal to less tech-savvy users. Be careful to match the case!

<!-- 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, FindAndReplace } from 'ckeditor5';

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

**CDN**

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

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

<a id="configuration">

## Configuration

<a id="configuring-the-ui-type">

### Configuring the UI type

By default, the find and replace form displays inside a dialog. That allows for keeping it open while editing the document at the same time. Alternatively, you can display the feature in a dropdown. To do this, use the [`config.findAndReplace.uiType`](../api/module_find-and-replace_findandreplaceconfig-FindAndReplaceConfig.md) configuration option:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		findAndReplace: {
			uiType: 'dropdown'
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

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

<a id="related-features">

## Related features

* [Automatic text transformation](text-transformation.md) – Enables automatic turning of snippets such as `(tm)` into `™` and `"foo"` into `“foo”`.

<a id="common-api">

## Common API

The [`FindAndReplace`](../api/module_find-and-replace_findandreplace-FindAndReplace.md) plugin registers the `'findAndReplace'` UI button component and the [`'find'`](../api/module_find-and-replace_findcommand-FindCommand.md), [`'findNext'`](../api/module_find-and-replace_findnextcommand-FindNextCommand.md), [`'findPrevious'`](../api/module_find-and-replace_findpreviouscommand-FindPreviousCommand.md), [`'replace'`](../api/module_find-and-replace_replacecommand-ReplaceCommand.md) and [`'replaceAll'`](../api/module_find-and-replace_replaceallcommand-ReplaceAllCommand.md) commands.

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

```js
// Find all occurrences of a given text.
editor.execute( 'find', 'steam' );
```

You can also move the highlight through all matched results with the [`'findNext'`](../api/module_find-and-replace_findnextcommand-FindNextCommand.md) and [`'findPrevious'`](../api/module_find-and-replace_findpreviouscommand-FindPreviousCommand.md) commands:

```js
// Move the search highlight to the next match.
editor.execute( 'findNext' );
```

You can also replace all occurrences of a given text in the editor instance using the [`'replaceAll'`](../api/module_find-and-replace_replaceallcommand-ReplaceAllCommand.md) command:

```js
editor.execute( 'replaceAll', 'diesel', 'steam' );
```

> **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-find-and-replace>.

---

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