# Installing Vanilla JS CKEditor 5 from npm or ZIP

This guide shows the fastest way to add CKEditor 5 to your web application, using either npm or a ZIP package.

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="installing-ckeditor-5-using-npm">

## Installing CKEditor 5 using npm

> **Note**
>
> To set up the editor from npm, you need a bundler to build the JavaScript files correctly. CKEditor 5 is compatible with all modern JavaScript bundlers. For a quick project setup, we recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).

First, install the necessary package. The command below will install the main CKEditor 5 package containing all open-source plugins.

```bash
npm install ckeditor5
```

Now, you can import all the modules from the `ckeditor5` package. Additionally, you have to import CSS styles separately. Please note the [`Essentials`](../../../api/module_essentials_essentials-Essentials.md) plugin, including all essential editing features.

**Importing and registering UI translations is optional for American English.** To use the editor in any other language, use imported translations, as shown in the [setup section](../../setup/ui-language.md).

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from npm:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

```js
import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		],
		root: {
			placeholder: 'Type here...'
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Import the selected [editor type](../../setup/editor-types.md) and plugins. Pass the imported plugins inside the configuration to the [`create()`](../../../api/module_editor-classic_classiceditor-ClassicEditor.md#static-function-create) method and add toolbar items where applicable.

```html
<div id="editor">
	<p>Hello from CKEditor 5!</p>
</div>
```

That is all the code you need to see a bare-bone editor running in your web browser.

> **Important**
>
> The multi-root editor requires a [more advanced configuration](../../setup/editor-types.md#multi-root-editor) of the roots.

<a id="installing-ckeditor-5-from-a-zip-file">

## Installing CKEditor 5 from a ZIP file

If you do not want to build your project using npm and cannot rely on the CDN delivery, you can download ready-to-run files with CKEditor 5 and all its plugins.

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from ZIP:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

1. [Download the ZIP archive](https://cdn.ckeditor.com/ckeditor5/48.5.2/zip/ckeditor5-48.5.2.zip) with the latest CKEditor 5 distribution.
2. Extract the ZIP archive into a dedicated directory inside your project (for example, `vendor/`). Include the editor version in the directory name to ensure proper cache invalidation whenever you install a new version of CKEditor 5.

Files included in the ZIP archive:

* `index.html` – A sample with a working editor.
* `ckeditor5/ckeditor5.js` – The ready-to-use editor ESM bundle contains the editor and all plugins. \[Recommended build]
* `ckeditor5/ckeditor.js.map` – The source map for the editor ESM bundle.
* `ckeditor5/ckeditor5.umd.js` – The ready-to-use editor UMD bundle contains the editor and all plugins. \[Secondary build]
* `ckeditor5/ckeditor5.umd.js.map` – The source map for the editor UMD bundle.
* `ckeditor5/*.css` – The style sheets for the editor. You will use `ckeditor5.css` in most cases. Read about other files in the [Editor and content styles](../../setup/css.md) guide.
* `translations/` – The editor UI translations (see the [Setting the UI language](../../setup/ui-language.md) guide).
* The `README.md` and `LICENSE.md` files.

The easiest way to see the editor in action is to serve the `index.html` file via an HTTP server.

> **Warning**
>
> You must run your code on a local server to use import maps. Opening the HTML file directly in your browser will trigger security rules. These rules (CORS policy) ensure loading modules from the same source. Therefore, set up a local server, like `nginx`, `caddy`, `http-server`, to serve your files over HTTP or HTTPS.

<a id="installing-premium-features">

## Installing premium features

<a id="installing-premium-features-using-npm">

### Installing premium features using npm

All premium features are available as a separate package. You can install it the same as the open-source one.

```bash
npm install ckeditor5-premium-features
```

Now, you can import all the modules from both the `ckeditor5` and `ckeditor5-premium-features` packages. Additionally, you have to import CSS styles separately.

> **Note**
>
> If you use a self-hosted editor from npm, obtain a license for [premium features](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and all of its features.

```js
import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Font } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Paragraph, Font, FormatPainter ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
			'formatPainter'
		],
		root: {
			placeholder: 'Type here...'
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Pass the imported plugins inside the configuration to the [`create()`](../../../api/module_editor-classic_classiceditor-ClassicEditor.md#static-function-create) method and add toolbar items where applicable. Please note that to use premium features, you need to activate them with a proper license key. See the [Obtaining a license key](#obtaining-a-premium-features-license-key) section.

```html
<div id="editor">
	<p>Hello from CKEditor 5!</p>
</div>
```

That is all the code you need to see a bare-bone editor running in your web browser.

<a id="installing-premium-features-from-a-zip-file">

### Installing premium features from a ZIP file

1. [Download the ZIP archive](https://cdn.ckeditor.com/ckeditor5-premium-features/48.5.2/zip/ckeditor5-premium-features-48.5.2.zip) with the latest CKEditor 5 distribution and premium features.
2. Extract the ZIP archive into a dedicated directory inside your project (for example, `vendor/`). Include the editor version in the directory name to ensure proper cache invalidation whenever you install a new version of CKEditor 5.

> **Note**
>
> If you use a self-hosted editor from ZIP, obtain a license for [premium features](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and all of its features.

Files in the ZIP archive:

* `index.html` – A sample with a working editor.

* The `ckeditor5/` directory:

  * `ckeditor5.js` – The ready-to-use editor ESM bundle contains the editor and all plugins. \[Recommended build]

  * `ckeditor.js.map` – The source map for the editor ESM bundle.

  * `ckeditor5.umd.js` – The ready-to-use editor UMD bundle contains the editor and all plugins. \[Secondary build]

  * `ckeditor5.umd.js.map` – The source map for the editor UMD bundle.

  * `*.css` – The style sheets for the editor, use `ckeditor5.css` in most cases. Read about other files in the [Editor and content styles](../../setup/css.md) guide.

  * `translations/` – The editor UI translations (see the [Setting the UI language](../../setup/ui-language.md) guide).

  * The `ckeditor5-premium-features/` directory:

    * `ckeditor5-premium-features.js` – ESM bundle of premium features. \[Recommended build]
    * `ckeditor5-premium-features.umd.js` – UMD bundle of premium features contains the editor and all plugins. \[Secondary build]
    * `*.css` – The style sheets for the premium features. You will use `ckeditor5-premium-features.css` in most cases.
    * `translations/` – The premium features UI translations.

* The `ckeditor5-premium-features` directory is structured similarly to the `ckeditor5` directory. It contains equivalent files for premium features.

* The `README.md` and `LICENSE.md` files.

The easiest way to see the editor in action is to serve the `index.html` file via an HTTP server.

> **Warning**
>
> You must run your code on a local server to use import maps. Opening the HTML file directly in your browser will trigger security rules. These rules (CORS policy) ensure loading modules from the same source. Therefore, set up a local server, like `nginx`, `caddy`, `http-server`, to serve your files over HTTP or HTTPS.

<a id="obtaining-a-premium-features-license-key">

### Obtaining a premium features license key

To activate CKEditor 5 premium features, you will need a commercial license. The easiest way to get one is to sign up for the [CKEditor Premium Features 14-day free trial](https://portal.ckeditor.com/checkout?plan=free) to test the premium features.

You can also [contact us](https://ckeditor.com/contact/?sales=true#contact-form) to receive an offer tailored to your needs. To obtain an activation key, please follow the [License key and activation](../../licensing/license-key-and-activation.md) guide.

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

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