# Enhanced source code editing

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

The enhanced source code editing feature allows for viewing and editing the source code of the document in a handy modal window (compatible with [all editor types](../../getting-started/setup/editor-types.md)) with syntax highlighting, autocompletion and more.

> **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 any of the editors below to see the enhanced source code editing plugin in action. Please note that enhanced source code editing works with [editor types](../../getting-started/setup/editor-types.md), taking advantage of the built–in modal system.

Toggle the source editing mode and make some changes in the HTML code (for example, add a new paragraph or an ordered list). Then leave the source editing mode and see that the changes are present in the document content.

You can also use one of the many CKEditor 5 features available in the toolbar and check how they render in the HTML source. Notice the collapsible table of contents, available thanks to the [general HTML support](../html/general-html-support.md) feature, which introduces HTML elements not yet covered by the official plugins.

**Classic editor**

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

**Inline editor**

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

**Balloon editor**

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

**Document editor**

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

**Multi-root editor**

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

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

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

<!-- 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="additional-feature-information">

## Additional feature information

<a id="themes">

### Themes

The enhanced source code editing feature enables you to customize the look and feel of the editor containing source code, allowing for seamless visual integration with your application. You can use one of the [many already available themes](https://thememirror.net/) or create your own custom theme.

**Light theme**

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

**Dark theme**

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

<!-- 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="adding-a-theme">

#### Adding a theme

To load a custom theme, set the [`sourceEditingEnhanced.theme`](../../api/module_source-editing-enhanced_sourceeditingenhancedconfig-SourceEditingEnhancedConfig.md#member-theme) configuration option to the name of the provided theme.

> **Warning**
>
> **Note:** Custom themes are **not supported when using CKEditor 5 installed from CDN**, due to technical limitations related to bundling and dependency duplication. See [Limitations and incompatibilities](#custom-themes) for more information.
>
> Only the `'default'` and `'dark'` themes are fully supported in the CDN version.

```js
import { barf } from 'thememirror';

ClassicEditor
	.create( {
		// ... Other configuration options

		sourceEditingEnhanced: {
			theme: barf
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="creating-a-custom-theme">

#### Creating a custom theme

To learn how to create your own custom themes, take a look at the [official CodeMirror documentation](https://codemirror.net/examples/styling/).

<a id="code-completion">

### Code completion

The feature provides code completion support for HTML tags and attributes. The attribute completion list is context-aware and will only show ones that are allowed in the current context. It will also help you close open HTML tags. Start typing and the list will appear next to the caret.

Use `↑` and `↓` to browse the list. Press `Enter` to select the item.

<a id="code-folding">

### Code folding

The feature allows you to fold and unfold parts of the document source code. This is especially useful when working with large documents.

Click the folding icon in the gutter to collapse or expand the code block. Use the `Ctrl`+`Shift`+`[` (`⌘⇧[` on macOS) and `Ctrl`+`Shift`+`]` (`⌘⇧]` on macOS) keyboard shortcuts to fold and unfold the code. Use `Ctrl`+`Alt`+`[` (`⌘⌥[` on macOS) and `Ctrl`+`Alt`+`]` (`⌘⌥]` on macOS) to fold and unfold all code blocks.

<a id="bracket-and-tag-matching">

### Bracket and tag matching

The feature highlights matching brackets in the source code. When you place the cursor next to a bracket, the matching bracket will be highlighted. If you move the caret inside a tag, the opening and closing tags will be highlighted. If a HTML tag is not closed properly, the editor will also highlight it to let you know.

<a id="keyboard-shortcuts">

### Keyboard shortcuts

The source editor supports multiple keyboard shortcuts to make your work more efficient. Please refer to the full list of available keyboard shortcuts in a [dedicated guide](../accessibility.md#keyboard-shortcuts).

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

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

**CDN**

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

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ SourceEditingEnhanced, /* ... */ ],
		toolbar: [ 'sourceEditingEnhanced', /* ... */ ],
		sourceEditingEnhanced: {
			// 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="markdown-source-view">

### Markdown source view

The source editing plugin also works well with the [Markdown output](../markdown.md) plugin. You do not need any special configuration: just add the plugin to the editor, and the source editing mode will display Markdown instead of HTML.

To utilize the Markdown source editing mode, just add the [Markdown output](../markdown.md) plugin to the editor.

**NPM**

```js
import { ClassicEditor, Markdown } from 'ckeditor5';
import { SourceEditingEnhanced } from 'ckeditor5-premium-features';

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

**CDN**

```js
const { ClassicEditor, Markdown } = CKEDITOR;
const { SourceEditingEnhanced } = CKEDITOR_PREMIUM_FEATURES;

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

> **Note**
>
> Remember that Markdown syntax is simple and does not cover all the rich-text features. This means that some features provided by CKEditor 5 – either native or introduced by the GHS feature – can only be presented as native HTML as they have no Markdown equivalent. Such features will be stripped in the source view below.

<!-- 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="limitations-and-incompatibilities">

## Limitations and incompatibilities

> **Danger**
>
> The source editing plugin is a low-level document editing method, which allows you to directly alter the document data source. This presents incompatibilities with some editor features which highly rely on the editor mechanisms and architecture.
>
> **Please read this section carefully, and check if these problems may apply to your editor configuration.**

<a id="real-time-collaboration">

### Real-time collaboration

Source editing used during real-time collaboration brings a severe risk of data loss in a way that may be difficult for a user to notice and understand.

After you switch to source editing, incoming changes performed by remote users are not reflected in the source code. When you switch back (saving the source code), **all changes done in the meantime by other users will be overwritten**.

Due to this risk, these features are not allowed to be used together by default. When both are added to the editor, it will throw an error. **You have to explicitly enable source editing mode for real-time collaboration, acknowledging this risk.**

To enable the features, set the [`sourceEditingEnhanced.allowCollaborationFeatures`](../../api/module_source-editing-enhanced_sourceeditingenhancedconfig-SourceEditingEnhancedConfig.md#member-allowCollaborationFeatures) configuration flag to `true`.

<a id="comments-and-track-changes">

### Comments and track changes

The comments and track changes features use markers to mark affected parts of the document.

In the source editing mode, it is possible for a user to modify these markers’ boundaries. The user can change the range of a comment or tracked change, or remove them. This presents a potential problem related to users permissions.

The editor will show a warning in the browser’s console when these plugins and source editing plugin are used together.

To turn off the warning, set the [`sourceEditingEnhanced.allowCollaborationFeatures`](../../api/module_source-editing-enhanced_sourceeditingenhancedconfig-SourceEditingEnhancedConfig.md#member-allowCollaborationFeatures) configuration flag to `true`.

<a id="support-for-various-html-elements">

### Support for various HTML elements

The editor will only save changes made to the document data source if it “understands” them. It means one of the loaded plugins must recognize the given syntax (HTML or Markdown). Any syntax unsupported by the editor will be filtered out upon save.

For example, if the editor does not have the [horizontal line](../horizontal-line.md) plugin loaded, the `<hr>` tag added in the document source will be removed upon exit from the source editing mode.

To avoid that, make sure that your editor configuration has all the necessary plugins that handle various HTML tags.

In many cases, to enable advanced modifications through the source editing, you might need to enable the [HTML embed](../html/html-embed.md) feature and the [General HTML support](../html/general-html-support.md) feature, or write a plugin that will enable a given HTML tag or attribute support.

<a id="html-normalization">

### HTML normalization

When the editor reads the source data, it converts the data to a normalized, high-level, abstract data model structure, on which it operates. This structure differs from the HTML or Markdown code.

Note, that the same document “state” may be described using HTML in various ways.

For example, `<strong><em>Foo</em></strong>` and `<i><b>Foo</b></i>` both produce the “**_Foo_**” text with bold and italic styling. Both will be represented the same when loaded to the internal editor data model.

When the editor data model is later converted back to the document source data, it will be normalized regardless of the original input. In effect, `<i><b>Foo</b></i>` will eventually become `<strong><em>Foo</em></strong>`.

This limitation is a direct consequence of the core editor architecture and cannot be worked around. Although it is possible to change the editor’s final output, the input data will always be normalized to that output format.

<a id="revision-history">

### Revision history

Saving the modified document source is internally executed through replacing the old data with the new one. As a consequence, it will be represented in revision history as a total replace change (insertion + deletion).

The editor will show a warning in the browser’s console when revision history and source editing are loaded together.

To turn the warning off, set the [`sourceEditingEnhanced.allowCollaborationFeatures`](../../api/module_source-editing-enhanced_sourceeditingenhancedconfig-SourceEditingEnhancedConfig.md#member-allowCollaborationFeatures) configuration flag to `true`.

<a id="restricted-editing">

### Restricted editing

Restricted editing is not enforced in the source editing mode. The user will be able to edit any part of the document, as well as remove the markers that mark the boundaries of restricted areas.

The editor will show a warning in the browser’s console when restricted editing and source editing are loaded together.

<a id="custom-themes">

### Custom themes

Using custom `CodeMirror` themes is **not supported** with [CKEditor 5 installed from CDN](../../getting-started/installation/cloud/quick-start.md#installing-ckeditor-5-from-cdn).

The CDN build already includes a bundled version of `CodeMirror` and its dependencies. If you attempt to use a custom theme and install CodeMirror-related packages manually, some dependencies will be loaded **twice** — once from the CDN bundle and once from your own packages. This results in version mismatches, duplicated internal modules, and runtime errors.

<a id="related-features">

## Related features

There are other source-related CKEditor 5 features you may want to check:

* [Source editing support](source-editing.md) – The open-source source editing feature for CKEditor 5. Limited to the [classic editor](../../getting-started/setup/editor-types.md#classic-editor). only, does not support syntax highlighting, keyboard shortcuts, autocompletion, or themes.
* [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.
* [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.
* [HTML embed](../html/html-embed.md) – Allows embedding an arbitrary HTML snippet in the editor.
* [Markdown output](../markdown.md) – Allows for Markdown output instead of HTML output.

<a id="common-api">

## Common API

The [`SourceEditingEnhanced`](../../api/module_source-editing-enhanced_sourceeditingenhanced-SourceEditingEnhanced.md) plugin registers:

* The `'sourceEditingEnhanced'` UI button component.
* The `'editSource'` command implemented by [`EditSourceCommand`](../../api/module_source-editing-enhanced_ui_editsourcecommand-EditSourceCommand.md).

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

```js
// Open the "Edit source" modal window.
editor.execute( 'editSource' );
```

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

---

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