# Full page HTML

The full page HTML feature lets you edit entire HTML pages in CKEditor 5 (from `<html>` to `</html>`), including the page metadata. While the [General HTML Support](general-html-support.md) feature focuses on elements inside the content (the document’s `<body>`), this feature enables markup mostly invisible to the end user.

> **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 [Enhanced source code editing feature](../source-editing/source-editing-enhanced.md) toolbar button to view and edit the HTML source of the document. Pay attention to the underlying markup.

<!-- 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="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, FullPage } from 'ckeditor5';

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

**CDN**

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

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

<a id="configuration">

## Configuration

<a id="render-styles">

### Render styles

By default, the full page HTML feature does not render the CSS from `<style>` that may be located in the `<head>` section edited content. To enable that possibility, set the [`config.htmlSupport.fullPage.allowRenderStylesFromHead`](../../api/module_html-support_generalhtmlsupportconfig-GHSFullPageConfig.md#member-allowRenderStylesFromHead) option to `true`.

Plugin extracts `<style>` elements from the edited content moves them to the main document `<head>`, and renders them. When CSS in `<style>` tag is changed using, for example, the [Enhanced source code editing](../source-editing/source-editing-enhanced.md) feature, previously added `<style>` elements to the main document `<head>` will be replaced by the new ones.

However, by enabling the ability to render CSS from `<style>` elements located in the `<head>` section of the edited content, you expose the users of your system to the **risk of executing malicious code inside the editor**. Therefore, we highly recommend sanitizing your CSS using some library that will strip the malicious code from the styles before rendering them. You can plug in the sanitizer by defining the [`config.htmlSupport.fullPage.sanitizeCss`](../../api/module_html-support_generalhtmlsupportconfig-GHSFullPageConfig.md#member-sanitizeCss) option.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		htmlSupport: {
			fullPage: {
				allowRenderStylesFromHead: true,
				// Strip unsafe properties and values, for example:
				// values like url( ... ) that may execute malicious code
				// from an unknown source.
				sanitizeCss( CssString ) {
					const sanitizedCss = sanitize( CssString );

					return {
						css: sanitizedCss,
						// true or false depending on whether
						// the sanitizer stripped anything.
						hasChanged: true
					};
				}
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="security">

### Security

It is a plain security risk. The user may provide a CSS mistakenly copied from a malicious website. It could also end up in the user’s clipboard (as it would usually be copied and pasted) by any other means.

You can instruct some advanced users to never paste CSS code from untrusted sources. However, in most cases, it is highly recommended to secure the system by configuring the Full page HTML feature to use a CSS sanitizer and, optionally, by setting strict Content Security Policy (CSP) rules.

<a id="sanitizer">

#### Sanitizer

The [`config.htmlSupport.fullPage.sanitizeCss`](../../api/module_html-support_generalhtmlsupportconfig-GHSFullPageConfig.md#member-sanitizeCss) option allows plugging an external sanitizer.

<a id="csp">

#### CSP

In addition to using a sanitizer, you can use the built-in browser mechanism called [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). By using CSP, you can let the browser know the allowed sources that CSS can use.

<a id="additional-feature-information">

## Additional feature information

Here are some examples of the HTML elements you can enable with this plugin:

* The HTML DOCTYPE preamble: `<!DOCTYPE html>`
* The HTML root element: `<html>`
* The head element: `<head>`
* The document’s title: `<title>`
* Meta tags inside the head element, like: `<meta name="description" content="Meta description">`

<a id="related-features">

## Related features

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

* [General HTML Support](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.
* [HTML embed](html-embed.md) – Allows embedding an arbitrary HTML snippet in the editor.

---

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