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

guideCKEditor 5 integrations

CKEditor 5 is framework agnostic and can be integrated with any JavaScript framework. CKEditor 5 is a native JavaScript rich-text editing component written in TypeScript. 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. Native integrations with the most popular libraries will save you time and effort.

# Official WYSIWYG editor integrations

There are four official integrations so far:

Refer to their documentation to learn how to use them.

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

# How do I use CKEditor 5 if my framework does not have an official integration?

CKEditor 5 should be compatible with your framework and initializing it usually requires a single method call. A tighter integration of CKEditor 5 with your framework may require using an existing or writing a new adapter (integration layer) to communicate your framework with CKEditor 5.

When checking how to integrate CKEditor 5 with your framework, you can follow these steps:

  1. Check whether an official integration exists.

    There are four official integrations available so far: for React, Angular, Vue.js 2.x, and Vue.js 3.x.

  2. If not, search for community-driven integrations. Most of them are available on npm.

  3. If none exists, integrate CKEditor 5 with your framework by yourself.

    CKEditor 5 offers predefined builds that expose a rich JavaScript API, which you can use to create editors and control them.

# Compatibility with CSS frameworks

CKEditor 5 is 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.