Report an issue

guideReal-time collaboration overview

CKEditor 5 real-time collaboration features let you customize any CKEditor 5 build to include real-time collaborative editing and commenting features and tailor them to your needs.

Share the complete URL of this page with your colleagues to collaborate in real time!

This sample integrates automatic display mode switching between the sidebar and inline mode for comments. Resize the window and observe how the editor changes its appearance.

Real-time collaboration features include three separate plugins that can be customized and used independently of one another with any CKEditor 5 build.

All of the above features are fully adjustable. This makes implementing real-time collaborative editing within your application a highly customizable out-of-the-box experience.

Collaboration features in CKEditor 5 WYSIWYG editor screenshot

# Quick Start

Complementary to this guide, we provide ready-to-use samples available for download. We prepared samples for all editor types (multi-root included) as well as for the React, Angular 2+ and Vue.js integrations. You may use them as an example or as a starting point for your own integration.

The real-time collaboration feature needs a cloud service to synchronize content between the clients, so first you need to sign up to the Collaboration service powered by CKEditor Cloud Services. Refer to CKEditor Cloud Services Collaboration - Quick Start for more details.

Then, you need to create a custom build, because this plugin is not included in any of the official builds offered. The following instructions describe step-by-step what you need to do.

To enable real-time collaboration, you need to create a custom CKEditor 5 build that would include the real-time collaboration feature.

git clone -b stable ckeditor5-with-real-time-collaboration
cd ckeditor5-with-real-time-collaboration
npm install

To add the basic collaborative editing features to your editor, install the @ckeditor/ckeditor5-real-time-collaboration package:

npm install --save-dev @ckeditor/ckeditor5-real-time-collaboration

And use this code to enable real-time collaborative editing in classic editor. An updated src/ckeditor.js should look like this:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import EasyImageUpload from '@ckeditor/ckeditor5-easy-image/src/easyimage';

import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';
import PresenceList from '@ckeditor/ckeditor5-real-time-collaboration/src/presencelist';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, ImageToolbar, EasyImageUpload, RealTimeCollaborativeEditing, RealTimeCollaborativeComments, PresenceList ];

// Editor configuration.
ClassicEditor.defaultConfig = {
    language: 'en'

Note that your custom build needs to be bundled using webpack.

npm run build

Read more about installing plugins.

Then, you need to place your bundle in an HTML document and create the editor. In this case you need to additionally define CKEditor Cloud Services connection data. An updated src/ckeditor.js should look like this:

<!DOCTYPE html>
        <meta charset="utf-8">
        <title>CKEditor 5 Collaboration – Hello World!</title>

        <style type="text/css">
         #container {
             /* To create the column layout. */
             display: flex;

             /* To make the container relative to its children. */
             position: relative;

         #container {
             /* To stretch the editor to max 700px 
                (just to look nice for this example but it can be any size). */
             width: 100%;
             max-width: 700px;

         #sidebar {
            /* Set some size for the sidebar (it can be any). */
            min-width: 300px;

            /* Add some distance. */
            padding: 0 10px;

    <div id="presence-list-container"></div>

    <div id="container">
        <div id="editor"></div>
        <div id="sidebar"></div>

    <script src="../build/ckeditor.js"></script>
        ClassicEditor.create( document.querySelector( '#editor' ), {
            initialData: '<p>Let\'s edit this together!</p>',
            toolbar: [ 'bold', 'italic', 'imageUpload', 'comment' ],
            cloudServices: {
                tokenUrl: '',
                uploadUrl: '',
                webSocketUrl: '',
                documentId: 'collaboration'
            sidebar: {
                container: document.querySelector( '#sidebar' )
            presenceList: {
                container: document.querySelector( '#presence-list-container' )
        } )
        .catch( error => console.error( error ) );

Voilà! All users who open this page should be able to collaborate, working on this rich-text document at the same time.

Although classic editor was used in the example above, real-time collaboration, like every other official CKEditor 5 plugin, will work with any editor creator.

Since you have a working sample of rich-text editor with real-time collaboration, it is time to learn a little more about how the configuration works and what customization options you have. See further real-time collaboration guides to learn more.