ej2-showcase-react-diagram-collaborative-editing

A real-time collaborative diagram editor built with React + TypeScript + Syncfusion Diagram components. Multiple users can edit the same diagram simultaneously with WebSocket-powered real-time synchronization.

🚀 Quick Start

Prerequisites

• Node.js: v18 or higher
• npm

Installation

1. Clone or navigate to the project directory:

   cd d:\13_02_2026_CollabSample

2. Install frontend dependencies:

   npm install

Running the Application

Terminal : Start the React App

npm run start

The app will start at: http://localhost:3000

Change WebSocket Server URL

Edit src/collaboration/CollaborationService.ts:

constructor(serverUrl: string = 'ws://localhost:8080') {
  // Change to your server URL
  this.serverUrl = serverUrl;
}

Change Server Port

Edit server/server.js:

const PORT = 8080; // Change to your desired port

Syncfusion License

For production use, you need a Syncfusion license. Get a free 30-day trial at: https://www.syncfusion.com/account/manage-trials/downloads

Update src/index.tsx:

registerLicense('YOUR_LICENSE_KEY_HERE');

Without a license, the app will show a trial banner but will work fully.

Frontend

npm run start      # Start development server (http://localhost:3000)
npm run build    # Build for production
npm run preview  # Preview production build

Learn More

Syncfusion Documentation

• React Diagram Component
• Symbol Palette
• React Toolbar

Acknowledgments

• Syncfusion for the excellent React Diagram components
• Vite for blazing-fast development experience
• React team for the amazing framework

---