# Case change

The case change feature lets you quickly switch the selected content between UPPERCASE, lowercase, and Title Case.

> **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

The demo below lets you test the case change. Place the cursor inside a block such as a paragraph, heading, or list item to affect the entire block. You can also select a text fragment you want to change. Then, apply the case formatting with the toolbar dropdown.

You can also use the `Shift`+`F3` keyboard shortcut to cycle through case formats: UPPERCASE > lowercase > Title Case. Undo changes with `Ctrl`/`Cmd`+`Z`.

<!-- 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 } from 'ckeditor5';
import { CaseChange } from 'ckeditor5-premium-features';

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

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { CaseChange } = CKEDITOR_PREMIUM_FEATURES;

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

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

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="configuring-the-title-case-mode">

## Configuring the title case mode

Approaches to the title case change vary. This is why we did not add a default ruleset. You can use the [`config.caseChange.titleCase`](../api/module_case-change_casechange-CaseChangeTitleCaseConfig.md) configuration to apply your rules. The configuration allows for adding exclusions – words that the feature should not capitalize, as shown in the example below. It also provides an entry point for writing custom sentence end detection mechanisms to handle exclusions in special positions in the sentence.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		caseChange: {
			titleCase: {
				excludeWords: [ 'a', 'an', 'and', 'as', 'at', 'but', 'by', 'en', 'for', 'if', 'in',
					'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'vs', 'vs.', 'via' ]
			}
		},
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="related-features">

## Related features

Here are some more CKEditor 5 features that can help you format your content:

* [Basic text styles](basic-styles.md) – The essentials, like **bold**, _italic_ and others.
* [Font styles](font.md) – Control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), and [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Autoformatting](autoformat.md) – Format the text on the go using Markdown.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`CaseChange`](../api/module_case-change_casechange-CaseChange.md) plugin registers:

* The `'caseChange'` UI dropdown component.
* The `'changeCaseUpper'`, `'changeCaseLower'`, and `'changeCaseTitle'` commands implemented by [`CaseChangeCommand`](../api/module_case-change_casechangecommand-CaseChangeCommand.md).

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

```js
// Change the case of selected content to uppercase.
editor.execute( 'changeCaseUpper' );

// Change the case of selected content to lowercase.
editor.execute( 'changeCaseLower' );

// Change the case of selected content to title case.
editor.execute( 'changeCaseTitle' );
```

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

---

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