This project is a real-time collaborative graph editor built on top of the X6 graph visualization library. It allows multiple users to simultaneously create, edit, and view graph structures, demonstrating the power of real-time collaboration in a visual editing environment.
- X6-powered graph editing: Utilize the powerful features of X6 for graph manipulation
- Real-time collaboration: Multiple users can work on the same graph simultaneously
- Cursor tracking: See other users' cursors in real-time
- User awareness: Display avatars of connected users
- Vue 3: Progressive JavaScript framework for building user interfaces
- X6: Powerful graph visualization and editing library
- Yjs: CRDT framework for building collaborative applications
- Node.js: JavaScript runtime for server-side development
- Hocuspocus: Real-time collaboration backend for Yjs
- @hocuspocus/provider: Client-side provider for Hocuspocus
- @hocuspocus/server: Server-side implementation of Hocuspocus
To run this project, you need to start both the frontend and backend servers.
-
Navigate to the backend directory:
cd backend -
Install dependencies:
pnpm install -
Start the backend server:
pnpm run start
The backend server will start running on http://localhost:1234.
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
pnpm install -
Start the frontend development server:
pnpm run dev
The frontend application will be available at http://localhost:5173 (or another port if 5173 is already in use).
Open this URL in multiple browser windows to test the collaborative features.
- Hocuspocus Documentation: https://tiptap.dev/docs/hocuspocus/introduction
- Yjs Documentation: https://docs.yjs.dev/
- X6 API Documentation: https://x6.antv.antgroup.com/api/graph/graph
This project is licensed under the MIT License.