Getting started with CKEditor 5

CKEditor 5 is a flexible editing framework that provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium to Notion, Slack, or Twitter-like applications, all is possible within a single editing framework. It is a modern JavaScript rich-text editor with MVC architecture, custom data model, and virtual DOM, written from scratch in TypeScript with excellent support for modern bundlers. Find out the most convenient way to start using it!

# Are you new to CKEditor 5?

If your dive into using our WYSIWYG editor is only starting, find out how to kick off this adventure easily with the Quick start guide. You will learn how to run CKEditor 5 from npm or CDN.

# Migrating from CKEditor 4?

If you are familiar with our previous, discontinued product and would like to switch, check the Migration section. You will find a useful upgrade guide there to help you switch with the least effort.

# CKEditor 5 framework integrations

Do you want to use a framework? Native integrations with the most popular libraries will save you time and effort. There are five official integrations so far:

However, integration steps for some more frameworks are also documented. Refer to their documentation on the left to learn how to use them.

# Support for other frameworks

CKEditor 5 is a native JavaScript rich-text editing component written in TypeScript. As such, it is framework-agnostic and can be integrated with any JavaScript framework and application. It does not require any uncommon techniques or technologies to be used. Therefore, unless the framework you use has atypical limitations, CKEditor 5 is compatible with it.

CKEditor 5 is also compatible with popular CSS frameworks such as Bootstrap or Foundation. Such integrations, however, often require additional changes and adjustments that we have gathered in this guide.

We plan to provide more integrations with time. We would like to hear your ideas about what we should work on next.

# Configuring CKEditor 5

Once you install your copy of CKEditor 5, take some time to configure it before first use. Set up data-saving methods, editor toolbars, and UI.

You may also take the step-by-step tutorial that will guide you through the installation and configuration of the editor.

# Legacy installation methods

Before version 42.0.0, CKEditor 5 used different installation methods. If, for whatever reason, you wish to use these older versions – while it is not advised – you can have a look at the legacy installation guides. Otherwise, please see the Migrating CKEditor 5 to new installation methods guide.