React Rich Text Editor

React Rich Text Editor is the official CKEditor 5 React component. The component exposes properties for quick integration of the WYSIWYG editor into React-based applications.

Run CKEditor 5 React project in a minute

Set up the editor in your local environment using one command.

npx create-react-app ckeditor5-classic-demo --template @ckeditor/ckeditor5-classic


An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.


Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.


Takes advantage of a superb team of 40+ industry experts and 19 years of experience in WYSIWYG editing. We are releasing new features every month.

Trusted and approved by

See the Engine in action

Try our custom inspector below to see how CKEditor 5 works under the hood. Verify the output, see a document model, and run commands from the inspector without leaving the browser.

Simple setup

Here is a quick example of how to use the React Rich Text Editor component for CKEditor 5 by using create-react-app!


Create a project

Create a project using a basic create-react-app template and change the working directory to a newly created project.

npx create-react-app ckeditor5-react-example && cd ckeditor5-react-example

Install packages

Install dependencies to Rich Text Editor React Component and a chosen Editor Type according to the editing experience of your preference. In this case, we use the classic one.

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Add the component

Replace contents of src/App.js with code responsible for importing and the initialization of the editor.

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default function App() {
  return (
    <div className='App'>
      <h2>CKEditor 5 React App</h2>
        editor={ ClassicEditor }
        data="<p>Hello from CKEditor 5!</p>"
        onReady={ ( editor ) => {
          console.log( "CKEditor5 React Component is ready to use!", editor );
        } }
        onChange={ ( event, editor ) => {
          const data = editor.getData();
          console.log( { event, editor, data } );
        } }


That’s it! Run the app by executing the following command in your project's directory.

npm run start

Want to learn more about CKEditor?

We use cookies and other technologies to provide you with a better user experience.

Learn more

Hi there, any questions about products or pricing?

Any questions about our products or pricing?

Send us a quick message and one of our Sales Representatives will be in touch with you as soon as possible.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.