CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Getting started

Quick start

CKEditor 5 is a powerful, rich text editor you can embed in your web application. This guide will show you the fastest way to start using it.

You have a few methods to choose from:

  • Using CKEditor 5 Builder for the smoothest setup with live preview and multiple integration options.
  • Using npm, where you use a JavaScript package and build the editor with a bundler.
  • Using CDN, where you use our cloud-distributed CDN in a no-build setup.
  • Using a ZIP file, where you download the ready-to-run files and copy them to your project.
  • Choosing one of the pre-made integrations with popular frameworks (see table of contents for details).

CKEditor 5 Builder

In our interactive Builder you can 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. You can easily select:

  • The editor type.
  • The features you need.
  • Preferred framework (React, Angular, Vue or Vanilla JS).
  • Preferred distribution method.

At the end you get ready-to-use code tailored to your needs!

Check out our interactive Builder

# Installing CKEditor 5 using npm

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.

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' ), {
        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 CDN

CDN is an alternative method of running CKEditor 5 that you can start using in just a few steps.

You have two options to choose from. You can use an ES Modules build with imports similar to the npm setup or UMD build with a global variable. The former is more modern, but the latter offers better compatibility with older development environments.

# CDN with imports

Start by adding a link to the editor style sheet. It contains all styles for the editor’s UI and content. Refer to the content styles guide for more information.

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />

Then, you need to attach the script with the JavaScript code. To simplify imports, you can use the feature available in browsers – the import map. It allows us to map an easy-to-remember specifier (like ckeditor5) to the full URL of the file from the CDN. We use this browser feature to share an editor engine code between plugins.

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/"
        }
    }
</script>

Once you have added the import map, you can access the editor and its plugins using the ckeditor5 specifier.

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.

In the following script tag, import the desired plugins, add them to the plugins array, and add toolbar items where applicable. Note that both script tags (this and previous) have the appropriate type values.

<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } from 'ckeditor5';

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

Lastly, add a tag for the editor to attach to.

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

Your final page should look similar to the one below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } from 'ckeditor5';

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

# CDN with global variables

If you prefer to use global variables instead of ES modules, you can use the UMD build from CDN.

Start by adding a link to the editor style sheet. It contains all styles for the editor’s UI and content. Refer to the content styles guide for more information.

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />

Then, add the script with the JavaScript code. It registers a global variable called CKEDITOR that you can use to access the editor and its plugins.

<script src="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.umd.js"></script>

In the following script tag, get the editor class and desired plugins from the CKEDITOR object and add them to the plugins array. Add toolbar items where applicable.

<script>
    const {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } = CKEDITOR;

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

Finally, add a tag for the editor to attach to.

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

Your final page should look similar to the one below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script src="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.umd.js"></script>

        <script>
            const {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } = CKEDITOR;

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

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

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.

All three installation methods – npm, CDN, ZIP – work similarly. Therefore, you can also use the CKEditor 5 Builder with a ZIP archive. Create a custom preset with the Builder and combine it with the editor loaded from ZIP files.

# 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' ), {
        plugins: [ Essentials, Bold, Italic, Paragraph, Font, FormatPainter ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'formatPainter'
        ],
        licenseKey: '<YOUR_LICENSE_KEY>'
    } )
    .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, as described in the final section of this guide.

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 CDN

Just like with open-source features, you can choose between using an ES Modules build with imports or a UMD build with global variables. However, these methods should not be mixed. You should use the same method for both the open-source and premium features.

# CDN with imports

Start by adding links to style sheets. They contain all styles for the editor’s UI and content. They come in two separate style sheets – for open-source and premium plugins. Refer to the content styles guide for more information.

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.css" />

Then, you need to attach the script with the JavaScript code. To simplify imports, you can use the feature available in browsers – the import map. It allows you to map an easy-to-remember specifier (like ckeditor5) to the full URL of the file from the CDN. Use this browser feature to share an editor engine code between plugins.

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/",
            "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.js",
            "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/"
        }
    }
</script>

Once you have added the import map, you can access the editor and its plugins using the ckeditor5 specifier. Import them from the ckeditor5-premium-features package. Please note that to use premium features, you need to activate them with a proper license key, as described in the final section of this guide.

In the following script tag, import the desired plugins, add them to the plugins array, and add toolbar items where applicable. Note that both script tags (this and previous) have the appropriate type values.

<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } from 'ckeditor5';
    import { FormatPainter } from 'ckeditor5-premium-features';

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

Lastly, add a tag for the editor to attach to.

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

Your final page should look similar to the one below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
        <!-- If you are using premium features: -->
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/",
                    "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.js",
                    "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } from 'ckeditor5';
            import { FormatPainter } from 'ckeditor5-premium-features';

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

# CDN with global variables

Start by adding links to style sheets. They contain all styles for the editor’s UI and content. The styles come in two separate style sheets – for open-source and premium plugins. Refer to the content styles guide for more information.

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.css" />

Then, add the scripts with the JavaScript code. They registers global variables called CKEDITOR and CKEDITOR_PREMIUM_FEATURES that you can use to access the editor and its plugins.

<script src="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.umd.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.umd.js"></script>

Please note, that to use premium features, you need to activate them with a proper license key, as described in the final section of this guide.

In the following script tag, get the editor class and desired plugins from the CKEDITOR and CKEDITOR_PREMIUM_FEATURES objects and add them to the plugins array. Add toolbar items where applicable.

<script>
    const {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } = CKEDITOR;
    const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

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

Lastly, add a tag for the editor to attach to.

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

Your final page should look similar to the one below.

Final build 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script src="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.umd.js"></script>
        <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.1/ckeditor5-premium-features.umd.js"></script>

        <script>
            const {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } = CKEDITOR;
            const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

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

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

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.

All three installation methods – npm, CDN, ZIP – work similarly. Therefore, you can also use the CKEditor 5 Builder with a ZIP archive. Create a custom preset with the Builder and combine it with the editor loaded from ZIP files.

# Obtaining a 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 30-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