https://github.com/ckeditor/ckeditor5-react
Official CKEditor 5 React component.
https://github.com/ckeditor/ckeditor5-react
Last synced: 15 days ago
JSON representation
Official CKEditor 5 React component.
- Host: GitHub
- URL: https://github.com/ckeditor/ckeditor5-react
- Owner: ckeditor
- License: other
- Created: 2018-05-14T13:20:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2026-03-25T12:51:29.000Z (23 days ago)
- Last Synced: 2026-03-25T13:13:55.073Z (23 days ago)
- Language: TypeScript
- Homepage: https://ckeditor.com/ckeditor-5
- Size: 4.12 MB
- Stars: 458
- Watchers: 15
- Forks: 106
- Open Issues: 82
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react-components - ckeditor5-react - An official CKEditor 5 rich text editor wrapper. (UI Components / Form Components)
- awesome-react - ckeditor5-react - An official CKEditor 5 rich text editor wrapper.  (UI Components / Form Components)
- awesome-wysiwyg-editors - ckeditor5-react - 用于 React 的官方 CKEditor 5 富文本编辑器组件。  (基于 React)
- awesome-react-components - ckeditor5-react - An official CKEditor 5 rich text editor wrapper. (UI Components / Form Components)
- fucking-awesome-react-components - ckeditor5-react - An official CKEditor 5 rich text editor wrapper. (UI Components / Form Components)
- awesome-react-components - ckeditor5-react - An official CKEditor 5 rich text editor wrapper. (UI Components / Form Components)
- awesome-ckeditor - React - Official CKEditor rich text editor component for React. (Integrations)
- awesome-wysiwyg - ckeditor5-react - An official CKEditor 5 rich text editor component for React. (For React)
README
# CKEditor 5 rich text editor component for React
[](https://www.npmjs.com/package/@ckeditor/ckeditor5-react)
[](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-react?branch=master)
[](https://codecov.io/github/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
```
### 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:18 # Open the demo projects using React 18.
pnpm run dev:19 # Open the demo projects using React 19.
```
### Executing tests
To test the editor integration against a set of automated tests, run the following command:
```bash
pnpm run test
```
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
```
## Releasing package
CircleCI automates the release process and can release both channels: stable (`X.Y.Z`) and pre-releases (`X.Y.Z-alpha.X`, etc.).
Before you start, you need to prepare the changelog entries.
1. Make sure the `#master` branch is up-to-date: `git fetch && git checkout master && git pull`.
1. Prepare a release branch: `git checkout -b release-[YYYYMMDD]` where `YYYYMMDD` is the current day.
1. Generate the changelog entries: `pnpm run release:prepare-changelog`.
* You can specify the release date by passing the `--date` option, e.g., `--date=2025-06-11`.
* By passing the `--dry-run` option, you can check what the script will do without actually modifying the files.
* Read all the entries, correct poor wording and other issues, wrap code names in backticks to format them, etc.
* Add the missing `the/a` articles, `()` to method names, "it's" -> "its", etc.
* A newly introduced feature should have just one changelog entry – something like "The initial implementation of the FOO feature." with a description of what it does.
1. Commit all changes and prepare a new pull request targeting the `#master` branch.
1. Ping the `@ckeditor/ckeditor-5-platform` team to review the pull request and trigger the release process.
## 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).