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!
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!
# 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. 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.
# 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:
- Integrate CKEditor 5 with Angular using CDN or npm.
- Integrate CKEditor 5 with React using CDN or npm.
- Integrate CKEditor 5 with Next.js using CDN or npm.
- Integrate CKEditor 5 with Vue.js 3.x using CDN or npm.
- Integrate CKEditor 5 with Vue.js 2.x using npm.
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.
# 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.
# 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.