Collaborative Editing in EJ2 JavaScript Diagram

7 Aug 20261 minute to read

Collaborative editing enables multiple users to edit diagrams simultaneously in real-time, providing a seamless collaborative experience in EJ2 JavaScript applications.

Purpose

Collaborative editing in diagram control allows multiple users to edit and review diagrams in real time, ensuring accuracy, consistency, and faster updates. It streamlines teamwork by reducing delays, improving communication through comments, and maintaining data integrity with version tracking.

Configuration

• Use SignalR for real-time communication between the EJ2 JavaScript app and server.
• Use Redis as a temporary data store to manage updates and version state.
• Basic setup:
  • Configure an ASP.NET Core SignalR hub. Refer link.
  • Connect the EJ2 JavaScript app to the hub. Refer link.

Limitations

• Default deployment
  • By default, a single server instance works without additional setup. For multi-instance (scale-out) deployments, configure a backplane (e.g., Redis) and use a shared data store so all nodes share group messages and version state consistently.
• View-only interactions
  • Zoom and pan are local to each user and are not synchronized, so collaborators may view different areas of the diagram.
• Unsupported synchronized settings
  • Changes to pageSettings, contextMenuSettings, snapSettings, rulerSettings, layout, and scrollSettings are not propagated to other users and apply only locally.

Note:
Collaboration will work when DiagramCollaboration and UndoRedo modules are enabled. Collaboration applies to actions that raise the historyChange event.

Sample code

A complete working example is available in the EJ2 JavaScript Diagram Collaborative Editing GitHub repository