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

To start using CKEditor 5, choose an installation method: the [CKEditor 5 Builder](https://builder.ckeditor.com/?redirect=docs) for the quickest setup, or install from npm, CDN, or a ZIP file. You can also use one of the official framework integrations. This section walks you through installation, integration, configuration, and licensing.

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to 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.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="are-you-new-to-ckeditor-5">

## 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](https://builder.ckeditor.com/?redirect=docs) for the smoothest setup with live preview and multiple integration options.
* [Using an AI coding agent](ai-coding-agents.md) such as Claude Code, Cursor, or Copilot, with the official CKEditor skill to install and configure the editor for you.
* [Using npm](installation/self-hosted/quick-start.md#installing-ckeditor-5-using-npm), where you use a JavaScript package and build the editor with a bundler.
* [Using CDN](installation/cloud/quick-start.md#installing-ckeditor-5-from-cdn), where you use our cloud-distributed CDN in a no-build setup.
* [Using a ZIP file](installation/self-hosted/quick-start.md#installing-ckeditor-5-from-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).

<a id="ckeditor-5-framework-integrations">

## 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 several official integrations so far:

* Integrate CKEditor 5 with **Angular** using [CDN](installation/cloud/angular.md) or [npm](installation/self-hosted/angular.md).
* Integrate CKEditor 5 with **React** using [CDN](installation/cloud/react/react-default-cdn.md) or [npm](installation/self-hosted/react/react-default-npm.md).
* Integrate CKEditor 5 with **Next.js** using [CDN](installation/cloud/next-js.md) or [npm](installation/self-hosted/next-js.md).
* Integrate CKEditor 5 with **Nuxt** using [CDN](installation/cloud/nuxt.md) or [npm](installation/self-hosted/nuxt.md).
* Integrate CKEditor 5 with **Vue.js 3.x** using [CDN](installation/cloud/vue/vue-default-cdn.md) or [npm](installation/self-hosted/vue/vue-default-npm.md).
* Integrate CKEditor 5 with **Vue.js 2.x** using [npm](installation/self-hosted/vuejs-v2.md).
* Integrate CKEditor 5 with **Salesforce** using [CDN](installation/cloud/salesforce.md) or [npm](installation/self-hosted/salesforce.md).
* Integrate CKEditor 5 with **Svelte** using [CDN](installation/cloud/svelte.md) or [npm](installation/self-hosted/svelte.md).
* Integrate CKEditor 5 with **Spring-boot** using [CDN](installation/cloud/spring-boot.md) or [npm](installation/self-hosted/spring-boot.md).
* Integrate CKEditor 5 with **jQuery** using [CDN](installation/cloud/jquery.md) or [npm](installation/self-hosted/jquery.md).
* Integrate CKEditor 5 with [**Sharepoint SPFx**](installation/self-hosted/sharepoint.md).
* Integrate CKEditor 5 with [**Drupal**](installation/drupal-real-time-collaboration.md).
* Integrate CKEditor 5 with [**CSS frameworks**](installation/css.md).

<a id="support-for-other-frameworks">

### 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](installation/css.md).

We plan to provide more integrations with time. We would like to [hear your ideas](https://github.com/ckeditor/ckeditor5/issues/1002) about what we should work on next.

<a id="migrating-from-ckeditor-4">

## Migrating from CKEditor 4?

If you are familiar with our previous, discontinued product and would like to switch, check the **[Migration section](../updating/ckeditor4/migration-from-ckeditor-4.md)**. You will find a useful upgrade guide there to help you switch with the least effort.

<a id="configuring-ckeditor-5">

## Configuring CKEditor 5

Once you install your copy of CKEditor 5, take some time to [configure it](setup/configuration.md) before first use. Set up data-saving methods, editor toolbars, and UI.

You may also take the [step-by-step tutorial](../framework/tutorials/crash-course/editor.md) that will guide you through the installation and configuration of the editor.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)
