Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json Released collaboration samples � Dec 4, 2019
webpack.config.js Released collaboration samples � Dec 4, 2019

CKEditor 5 real-time collaborative editing sample for React

This repository presents an integration of CKEditor 5 WYSIWYG editor including real-time collaboration features and React.

The integration supports React from version 16.3.0. The package.json file stores the higher version just to ensure that all dependencies are in compatible versions.

Quick start

  1. Clone the repository:

    git clone
    cd ckeditor5-collaboration-samples/real-time-collaboration-for-react
  2. Open the samples/real-time-collaboration-for-react.html page in the browser.

  3. Fill the dialog with correct token, websocket and upload URL endpoints. If you do not have these yet or do not know their meaning, contact us.

  4. Copy the URL and share it or paste in another tab to enjoy real-time collaborative editing.


The sample consists of a simple React application using CKEditor 5 with real-time collaborative editing. The application includes the editor with the users presence list together with real-time collaborative comments and track changes using a sidebar and a responsive display mode integration which reacts to the screen width.

It does not require the build step. However, if you want to modify the build, for instance to add more plugins, refer to the Creating your own build section below.

The application uses the <CKEditor> React component, which is a wrapper for the React interface provided by the @ckeditor/ckeditor5-react package.

To learn more about the integration and the @ckeditor/ckeditor5-react package check out the React integration guide.

Creating your own build

The CKEditor build created for the purpose of this example is based on classic editor, but you can use any other available CKEditor 5 build as a base. To change the editor, import it in the src/samples.js file and change the editor={ ClassicEditor } property later in this file.

If you want to customize the build, edit the application (inside the src/ directory) and then build it with the following commands:

npm install
npm run build

Note: The application is configured to support both .js and .jsx extensions for React components. It also supports PostCSS and SVG imports.

See the CKEditor 5 Installing plugins guide to learn more.

The build process uses the webpack configuration from webpack.config.js. If you are familiar with webpack, you can play with this file to achieve a custom build that would fit your needs. You can check the CKEditor 5 Advanced setup guide for some ready-to-use advanced configurations.

You can’t perform that action at this time.