# @ckeditor/ckeditor5-react

> Official React component for CKEditor 5 – the best browser-based rich text editor.

Latest version **11.2.0** (published 2026-06-08) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @ckeditor/ckeditor5-react
pnpm add @ckeditor/ckeditor5-react
yarn add @ckeditor/ckeditor5-react
bun add @ckeditor/ckeditor5-react
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 11.2.0 |
| Published | 2026-06-08 |
| First published | 2018-07-26 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 443.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 467 |
| Author | CKSource |
| Maintainers | ckeditor |
| Keywords | wysiwyg, rich text, editor, html, contentEditable, editing, react, react-component, ckeditor, ckeditor5, ckeditor 5 |

## Links

- npm: https://www.npmjs.com/package/@ckeditor/ckeditor5-react
- Repository: https://github.com/ckeditor/ckeditor5-react
- Issues: https://github.com/ckeditor/ckeditor5-react/issues
- npm.io page: https://npm.io/package/@ckeditor/ckeditor5-react

## Dependencies (1)

- [@ckeditor/ckeditor5-integrations-common](https://npm.io/package/@ckeditor/ckeditor5-integrations-common.md) ^2.4.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 11.2.0 (latest) — 2026-06-08
- 11.1.0-alpha.1 (alpha) — 2026-03-19
- 11.1.2 — 2026-04-15
- 11.1.1 — 2026-04-13
- 11.1.0 — 2026-03-24
- 11.1.0-alpha.0 — 2026-03-17
- 11.0.1 — 2025-12-18
- 11.0.0 — 2025-07-09
- 10.0.0 — 2025-07-04
- 11.0.0-alpha.0 — 2025-07-02
- 10.0.0-alpha.0 — 2025-05-05
- 9.5.0 — 2025-02-13
- 9.5.0-alpha.0 — 2025-02-10
- 9.4.0 — 2024-11-25
- 9.4.0-alpha.0 — 2024-11-13
- … 38 more at https://npm.io/package/@ckeditor/ckeditor5-react/versions

## README

# CKEditor 5 rich text editor component for React

[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-react.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-react)
[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5-react.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-react?branch=master)
[![Coverage Status](https://codecov.io/github/ckeditor/ckeditor5-react/graph/badge.svg)](https://codecov.io/github/ckeditor/ckeditor5-react)
![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-react)

Official [CKEditor 5](https://ckeditor.com/ckeditor-5/) rich text editor component for React.

## [Developer Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html) 📖

See the ["Rich text editor component for React"](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html) guide in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest) to learn more:

* [Quick start](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html#quick-start)
* [Using CKEditor 5 Builder](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html#using-ckeditor-5-builder)
* [Installing from npm](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html#installing-from-npm)
* [Component properties](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html#component-properties)

## Contributing

> [!NOTE]
> This project requires **pnpm v10** or higher. You can check your version with `pnpm --version` and update if needed with `npm install -g pnpm@latest`.

After cloning this repository, install necessary dependencies:

```bash
pnpm install
```

If you need to run tests or demos with a commercial license, copy `.env.example` to `.env` and fill in the required `CKEDITOR_*` variables.
Keep `.env` local only. In CI, provide the same value via the `CKEDITOR_LICENSE_KEY` environment variable.

### Running the development server

To manually test the editor integration with different versions of React, you can start the development server using one of the commands below:

```bash
pnpm run dev:16 # Open the demo projects using React 16.
pnpm run dev:17 # Open the demo projects using React 17.
pnpm run dev:18 # Open the demo projects using React 18.
pnpm run dev:19 # Open the demo projects using React 19.
```

### Executing tests

To run the full automated test suite, use:

```bash
pnpm run test
```

To run only the real-editor integration suite used by the CI version matrix, use:

```bash
pnpm exec vitest run --project integration
```

This command runs the integration subset against the `ckeditor5` and `ckeditor5-premium-features` versions currently installed in `node_modules`.
After a regular `pnpm install`, that means the default dependency versions from `package.json`, not the LTS version from the CI matrix.

To reproduce an LTS matrix run locally, install the matching `lts-v*` packages first and provide `CKEDITOR_LICENSE_KEY`, just like the CI job does:

```bash
pnpm add -D ckeditor5@lts-v* ckeditor5-premium-features@lts-v*
CKEDITOR_LICENSE_KEY=<your-key> pnpm exec vitest run --project integration
```

If you want to run the tests in watch mode, use the following command:

```bash
pnpm run test:watch
```

### Building the package

To build the package that is ready to publish, use the following command:

```bash
pnpm run build
```

## License

Licensed under a dual-license model, this software is available under:

* the [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html),
* or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).

---
_Source: https://npm.io/package/@ckeditor/ckeditor5-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._