Installing Vanilla JS CKEditor 5 using npm or ZIP

CKEditor 5 is a powerful, rich text editor you can embed in your web application. This guide will show you the fastest way to use it with npm or a ZIP package.

# Installing CKEditor 5 using npm

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

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

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

import 'ckeditor5/ckeditor5.css';

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

Pass the imported plugins inside the configuration to the create() method and add toolbar items where applicable.

The first argument in the create() function is a DOM element for the editor placement, so you need to add it to your HTML page.

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

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

1. Download the ZIP archive 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 guide.
• translations/ – The editor UI translations (see the Setting the UI language 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.

# Installing premium features

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

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.

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( document.querySelector( '#editor' ), {
        licenseKey: '<YOUR_LICENSE_KEY>',
        plugins: [ Essentials, Bold, Italic, Paragraph, Font, FormatPainter ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'formatPainter'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Pass the imported plugins inside the configuration to the 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 section.

The first argument in the create() function is a DOM element for the editor placement, so you need to add it to your HTML page.

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

# Installing premium features from a ZIP file

1. Download the ZIP archive 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.

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 guide.
  • translations/ – The editor UI translations (see the Setting the UI language 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.

# 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 to test the premium features.

You can also contact us to receive an offer tailored to your needs. To obtain an activation key, please follow the License key and activation guide.

# Next steps

• See how to manipulate the editor’s data in the Getting and setting data guide.
• Refer to further guides in the setup section to see how to customize your editor further.
• Check the features category to learn more about individual features.