This is a collaborative text editor demo that uses Ably for real-time communication and Quill.js as the text editor. The backend makes use of FaunaDB to persist metadata about the editing. It demonstrates how to create a collaborative experience, with each user's cursor position and changes to the document being synced in realtime.
To get the project running locally:
- Clone this repository.
- Navigate into the project directory and run
npm installto install the dependencies. - Create a
.envfile at the root of your project and add the following variable:
ABLY_API_KEY=your-ably-api-key
Replace your-ably-api-key with your actual Ably API key.
- Run
npm run devto start the development server. Openhttp://localhost:3000with your browser to see the result.
Once the project is running, you will see a basic text editor on the main page. You can type and edit text in this editor. If you open the same page in another browser or tab, you will see that all changes are synced across all instances of the editor. This allows multiple users to edit the same document at the same time, with each user's changes being reflected in real-time for all other users.
Each user is also assigned a random username and cursor color when they load the page, and the cursor position of each user is synced across all instances of the editor. This allows users to see in real-time where other users are in the document.
Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.
This project is open source and available under the Apache 2.0 License.